I am writing a web page widget for my company. This widget must inject an HTML snippet from any domain (our website, possibly a customer CNAME) into the customer's website, which may be on any domain (Tumblr, blogspot, mydomain.com, etc.)
JQuery.load() would do exactly what I'd like it to do, except I don't think it will work with JSONP.
At this point I've chosen on the client-side to use a standard JQuery.ajax() GET call using JSONP that calls to the server. The server returns an object with a single attribute (the html to inject), which is kind of working except for the fact that I'm still working on making it not choke on the HTML payload. Seems if I escape the HTML, it passes through like a charm, but I'm looking for a better way...
FWIW, I am running RoR on the server-side. Any ideas on best practices to get this to work?
This is the code I'm using on the client:
$.ajax({
dataType: 'jsonp',
url: "http://test.host:3000/widgets/widget_1?username=foo",
crossDomain: true,
success: function(data) { $("#my-div").html.(data.foo) }
});
And what I'm returning from the server:
JQueryCallback({"foo": "<div>bar</div>"})
And the error I get in the Firebug console:
unterminated string literal (pointing to the beginning of the open tag in the div)
I think its choking on the , but I'm not sure how to get around this, or if this is the best way to go about it.
Thanks!
thanks for the help. the main issues I was having was:
I am using to_json now to better encode the html going out.