Question

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!

Answer 1

thanks for the help. the main issues I was having was:

1. extra dot after the html() method and
2. I wasn’t properly escaping
   the JSON.

I am using to_json now to better encode the html going out.