Use AJAX to fill page after page load with jQuery
Any help on this issue would be grateful.
Suppose I want to load controls for different items on a page AFTER loading is complete.
So:
Object 1
<div id="controls1" class="controls" item_id="1"></div>
Object 2
<div id="controls2" class="controls" item_id="2"></div>
Object 3
<div id="controls3" class="controls" item_id="3"></div>
How can I use jQuery for popular DIVs with class "controls" using an AJAX call? In this case, I think he will need to do 3 ajax calls for popular DIVs.
My ajax for grabbing content is ajax.php? request = controls & item_id =
Thank!
source to share
The main way to do it:
$(document).ready(function() {
$('#controls1').load('ajax.php?request=controls&item_id=1');
$('#controls2').load('ajax.php?request=controls&item_id=2');
$('#controls3').load('ajax.php?request=controls&item_id=3');
});
Your best bet would be to dynamically determine how many control "partitions" you have and load them as needed ... For example:
$(document).ready(function() {
$('.controls').each(function() {
var theId = $(this).attr('item_id');
$(this).load('ajax.php?request=controls&item_id=' + theId);
});
});
Good luck!
Update:
To avoid using a custom attribute item_id
, you can extract the id from the element id using perhaps a regex like ... (warning, not tested)
$(document).ready(function() {
$('.controls').each(function() {
var theId = $(this).attr('id');
theId = /controls(\d+)/.exec(theId)[1];
$(this).load('ajax.php?request=controls&item_id=' + theId);
});
});
source to share
In addition to repeated calls to $ .load (or whatever), if you want to do this in a single ajax call, here are two options:
1 - Wrap all these divs in another one, and provide the server with all the content in one request:
$(document).ready(function() {
$('#superDiv').load('foo.html');
});
2 - Send the json object to the client containing the ID / Content map
$(document).ready(function() {
$.get('foo.php', function(json) {
$('#controls1').html(json.controls1);
$('#controls2').html(json.controls2);
$('#controls3').html(json.controls3);
},"json");
});
source to share
Use jQuery.load () .
This will fill the DOM of the target div (any element, essentially). But if you want to attach special functions to them, you must do so explicitly after the download is complete (in the callback).
Simple event handlers can deliver a set of auto- bounds to new loaded content using jQuery.live () (as opposed to usig jQuery.bind () )
Hooray!
source to share
This will find all the matching class = "controls" divs, extract the item_id and open up to the server to grab the HTML.
More on ajax load here: http://docs.jquery.com/Ajax/load#urldatacallback
$(document).ready(function() {
$('.controls').each(function(i) {
var itemId = $(this).attr('item_id');
$(this).load('ajax.php?request=controls&item_id=' + itemId)
});
});
source to share