If you’re new to AJAX you may be wondering how you can pull in just a single element from another HTML page (as calling an HTML page with AJAX pulls the entire HTML content in as a String).
It has also been explained to me that the particular solution I’m going to discuss here is the same technique used by the jQuery library.
I’m not going to run through how to actually write an AJAX method as that is outside the scope of this post, so feel free to use your own home baked JavaScript code, or use any one of the numerous JavaScript libraries as they all include their own variation of a cross-browser AJAX call.
With most AJAX scripts you’ll also specify a callback function which will run once the requested data has been retrieved. In my case this looks something like this…
$.Remote.load({
url: "Test.html",
callback: function(response)
{
// Do something with the response object
}
});
Once my AJAX function has successfully retrieved the data, it runs the callback function which then processes the data and grabs the element we’re interested in.
Within the callback function we first need to create a new element and then set the elements innerHTML to the response data (which is returned as a String).
We then grab all the elements we’re interested in (for this example I’m specifically looking for a DIV element that has an ID value of “content”) and loop through them until we find the relevant node…
Recent comments
3 weeks 2 days ago
3 weeks 2 days ago
3 weeks 5 days ago
3 weeks 6 days ago
4 weeks 1 day ago
4 weeks 4 days ago
5 weeks 2 days ago
5 weeks 3 days ago
6 weeks 4 hours ago
6 weeks 4 days ago