Problems with jQuery load and getJSON only when using Chrome

Question

I'm having an issue with two jQuery calls. The first is a "load" that retrieves HTML and displays it on the page (it does include some Javascript and CSS in the code that is returned). The second is a "getJSON" that returns JSON - the JSON returned is valid.

Everything works fine in every other browser I've tried - except Chrome for either Windows or Mac. The page in question is here:

http://urbanistguide.com/category/Contemporary.aspx

When you click on a Restaurant name in IE/FF, you should see that item expand with more info - and a map displayed to the right. However, if you do this in Chrome all you get is the JSON data printed to the screen.

The first problem spot is when the "load" function is called here:

    var fulllisting = top.find(".listingfull");
    fulllisting.load(href2, function() {
       fulllisting.append("<div style=\"width:99%;margin-top:10px;text-align:right;\"><a href=\"#\" class=\"" + obj.attr("id") + "\">X</a>");
       itemId = fulllisting.find("a.listinglink").attr("id");

...

In the above code, the callback function doesn't seem to get invoked.

The second problem spot is when the "getJSON" function is called:

$.getJSON(href, function(data) {
    if (data.error.length > 0) {
        //display error message
    }
    else {
        ...
    }

In this case - it just seems to follow the link instead of performing the callback... and yes, I am doing a "return false;" at the end of all of this to prevent the link from executing.

All of the rest of the code is inline on that page if you want to view the source code.

Any ideas??

Thanks

Answer 1

The prolem I see now is

$.getJSON(href, function(data) {
if (data.error.length > 0) {
    //display error message
}
else {
    ...
}
});

However, I dont think that is the problem.

Answer 2

I have the same problem with the the callback of $.load not firing. It seems to have something to do with a failure to properly parse the response. I end up with some gobbledy javascript control code at the bottom of my response text. All other browsers are fine.

Answer 3

Chrome is too strict and doesn't recognize malformed JSON object, not like other browsers.

i.e. {"list":["abc","def",]}

you have to change it to

{"list":["abc","def"]}

or

{"list":["abc","def",""]}

and of course omit the last one.

Answer 4

In loadBusiness(obj, doScrollTo) redeclare top = obj.parent().parent().parent() as var top = obj.parent().parent().parent().

The way you have it now it refers to the global variable top as in window. Because it is a special variable, Chrome doesn't allow you to redefine it. When you run var fulllisting = top.find(".listingfull") you are essentially running var fulllisting = window.find(".listingfull") (check https://developer.mozilla.org/en/DOM/window.find). This method returns false and then an exception is thrown here: fulllisting.load(...) because it is the same as false.load(...)

Answer 5

I don't have enough rep to vote up, but lazy fri13th is right with this one.