Making successive "jQuery.load()"s in nested pages work

Question

The main page ("parent.html") has a link that ajaxloads a page ("page1.html") into a div ("targetdiv") in the main page, like so:

parent html:

$("#targetdiv").html(loading).load('page1.html');

This works fine and "page1.html" is loaded into "targetdiv".

The "page1.html" also has a link in it that is supposed to ajaxload another page ("page2.html") into "targetdiv" (onto itself), like so:

page1.html: (in "targetdiv")

$("#targetdiv").html(loading).load('page2.html');

This does not work; "html(loading)" comes up in "targetdiv" and stays there, "page2.html" is not loaded.

If you're sure why this is so, tell me and I'll owe you a beer.

All the best...

(This page/site is not available on line.)

Answer 1

Given that the loading html seems to be inserted, the code is actually running. The issue, then probably has to do with the response (or lack thereof) to the second request. I suggest using Firefox/Firebug to inspect the requests that are made and the response that you get to it as a way of diagnosing what may be going wrong. If you have trouble figuring it out after running Firebug, edit your question to add the results obtained from Firebug and post a comment on my question to let me know you've updated.