Thread: Is this possible? (Ajax & JQuery Document Scope Problem)

I am in the middle of developing something that is causing problems, most likely because it may be trying to stand on a shakey design (which I assumed would work, until now).

Basically I have an XHTML (Strict) document, which is using a combination of JQuery + Ajax to load content in to certain div's based on some event handling I'm processing with JQuery. My problem is that the markup that is being loaded in to certain div's with Ajax calls contains elements which I need to do further event handling, and can't because it's out of scope of the document. The browser can see the markup (after the ajax call), but the document doesn't see it and therefore jQuery can't perform event handling on elements it cannot see unless they are in the same document.

So far my page is constructed as follows:

PHP document, generating XHTML (Strict) markup with document content. Amongst document content there are 2 div's, both of those div's are populated after ajax calls have been made to seperate php scripts for respective content. In the content that is returned to both divs, I want to be able to for example manipulate using jQuery an element in div(A) by clicking on an element in div(B).

Is this possible? Is the architecture wrong?

any help greatly appreciated

Ah I found the problem. I needed to take a break from coding

Solution

1. Don't sit in front of your computer writing code with a complete disregard for the passage of time.
2. Do take breaks so you don't end up making stupid design decisions
3. Instead of placing the markup inside the ajax call, just place the initial markup structure in the php script, so the entire DOM structure is available
4. Then using the ajax call, populate the necessary elements via jQuery.

Sorry folks, false alarm. I am an idiot

Ah-HA!, I'm not an idiot, but I am talking to myself in here a lot (hmmmm...)

NEway, my "solution" didn't get me completely there, because I've learned a lesson today about the DOM, and using Ajax calls to update the contents of page containers. From my understanding (always open to correction), if you re-init the contents of a div, using an ajax call then the new content is not reachable from javascript code expressed on the host document.

If I use PHP to fill a div with content, then later use ajax on that document to update the div, beyond that point in time the javascript (jQuery) code on that document will not be able to access the contents of of the updated div.

Please help because I'm going out of my mind. (...clearly).

Hey Jason, I think your problem has something to do with the need to rebind events to newly loaded elements via ajax.

Frequently Asked Questions - jQuery JavaScript Library

HTH

Cheers Jason