Tuesday, 20 August 2013

Access DOM elements on HTML page loaded with AJAX

Access DOM elements on HTML page loaded with AJAX

Im currently struggling with an AJAX related problem on a website.
The goal is as follows:
There is a "simple" HTML page containing some links and content.

If you click on a link I want to open the file that gets includes with the
link (from href) within a new div overlayed to the page. The content from
the page is of course loaded with AJAX into the new div (the overlayed
one).
Within this new overlayed div I want to add some JS code which in general
already works.
The problem anyway is that the DOM elements within the page loaded per
AJAX cannot be accessed in a way that is comfortable to work with, in my
specific case. I got following piece of code so far:
$$('.add-exercise').addEvent('click', function(e) {
var request_exercise_add = new Request.HTML({
'method' : 'post',
'url' : e.target.get('href'),
onSuccess : function(responseTree, responseElements,
responseHTML, responseJavaScript) {
// i know i can access responseElements here..
}
});
request_exercise_add.send('s=true');
return false;
});
I know I can access the elements returned within responseElements but the
logic on the included website is somehow quite complex and therefore it
should be possible to add the JS within the HTML code in the dynamically
loaded page. Notice that the JS also cannot be added to the head section
because it would not know the elements that are loaded after the dom-ready
event.

No comments:

Post a Comment