Question

I would appreciate any help on this issue.

Lets say I want to load controls for different items on the page AFTER it has finished loading.

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 could I use jQuery to popular the DIVs with class of “controls” using an AJAX call? In this case, I guess it will have to do 3 ajax calls to popular each DIV.

My ajax to grab content is ajax.php?request=controls&item_id=

Thanks!

Answer 1

A basic way to do this is as follows:

$(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');
});

A nicer way would be to dynamically determine how many ‘controls’ divs 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 the custom item_id attribute, you could extract the ID you want from the element’s ID, using a regular expression perhaps, like so… (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);
    });
});