Problems with jQuery load and getJSON only when using Chrome
- by leftend
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