AJAX - load all div elements

Question

I have a webpage with a number of div elements such as this one:

<div id='ahFyb2JpdGFpbGxlc2FuZGJveHIKCxIA'>
</div>

I would like each div element to call a javascript function when it has loaded, to fill in the div. Ideally I would have liked to do

<div id='ahFyb2JpdGFpbGxlc2FuZGJveHIKCxIA'
     onload=getcontent('ahFyb2JpdGFpbGxlc2FuZGJveHIKCxIA');>
</div>

but of course, onloads are not allowed for div elements. Is there a way to do this? I have read in a number of places that jQuery can help for this, but I can't figure out how to code it up. Any help would be very much appreciated!

Answer 1

To do it without jquery, you just need to set the onload for the window, and tell it what to do with each div. But jquery makes this much simpler.

So without:

 window.document.onload = function() {
      var divs = document.getElementsByTagName("div");
           for(var i = 0; i < divs.length; i++)
              divs[i].text("blah blah blah");
           }
  };

It might be innerHTML. I'd have to double check. But that's the gist. With jquery:

   $(function(){
          $("div").text("blah blah blah");
    };

This of course assumes each div gets the same text. If you want it to be based on ID or class, you most certainly want jquery.

PS - Most web pages try to avoid placing javascript event handlers in the actual HTML. If yous set up the event handlers on load, there's no need and the code is cleaner. Jquery definitely helps on this.

Answer 2

If you're basing the content on the ID of the div, a slight modification to Anthony's code should work

document.onload = function() {
          var divs = document.getElementsByTagName("div");
          for(var i = 0; i<divs.length;i++){
              divs[i].innerHTML = getContent(divs[i].id);
          }

Answer 3

I would assign a class to the div's that you want to 'autoload' their own content. This makes the markup clearer and the JavaScript more concise.

$(function() {
    $('.autoload').each(function() {
        // Use AJAX
        $.get("service.php", {id: this.id} function(response) {
            // Handle server response here
        });

        // Or a local data island
        this.innerHTML = getDataById(this.id);
    });
});

Answer 4

With jQuery:

You should consider using $.load() to retrieve html content. It's slightly easier to use than $.get(). Altho it'll use POST semantics if you supply paramters...

In any event, do you really want to make separate calls back to server for each div? .. Perhaps you should consider a single call that sends the accumulated set of div id's awaiting content to a your web-service function, that then subsequently returns a json structure that you can walk thru at success filling divs all in one shot ..

Something like (not-tested!):

$(function() {
    var ids = [];
    $('div.autoload').each() { function() { ids.push($(this).attr('id')); });
    $.get('service.php', {ids: ids}, function (response) {
       $.each(response.perdiv, function (i, c) {
          $('div#' + c.id).html(c.html);
       });
    });
});