Position An Injected DIV Using JQuery's "Load" Function

Question

I'm pulling some info from a database then putting it into a DIV and injecting all that in to my page. The problem I have is positioning the newly injected DIV after it has finished loading.

Here's my jQuery:

$j(document).ready(function() {
   $('a#load-content').click(function(event) {
      event.preventDefault();
      var productId = $j(this).attr('id').replace(/more-info-/, '');

      $j.getJSON('../json/quicky/product/id/' + productId, function(json) {
         var productImage = json.image;
         var html = '<div class="quick-info"><img src="' + json.image + '"/></div>';

         $j(body).append(html);   
      });
   });

   $j('div.quick-info').load(function() {
      positionBoxCenter();
   });
});

I've tried placing the load event for the quick-info DIV after the load-content click event, inside the getJSON callback function, before the load-content click event, and inside the load-content click callback function. I still can't get it working.

What am I doing wrong with the load function?

Answer 1

Position it in your success handler you've already got:

  $j.getJSON('../json/quicky/product/id/' + productId, function(json) {
     var html = '<div class="quick-info"><img src="' + json.image + '"/></div>';

     $j('body').append( html );
     positionBoxCenter();
  });

The problem with load is that you have to make this handler before the element is fully loaded... I've never used it because that's a pain :)

Personally I'd write positionBoxCenter as a quick jQuery plugin and do something more like this:

  $j.getJSON('../json/quicky/product/id/' + productId, function(json) {
     var html = $j('<div class="quick-info"><img src="' + json.image + '"/></div>');
     // so now html is actually a jquery extended element
     html.positionBoxCenter();
     $j('body').append( html );
  });

This way you can use jQuery to setup it's positioning before it's even added to the dom at all. Alternatively you might try attaching that load handler before doing the append (you'll still need to extend the element).

Answer 2

try using $().live

   $j('div.quick-info').live('load', function() {
      positionBoxCenter();
   });

with jQuery 1.3.2 because div.quick-info doesn't exist at the time you try and bind load

also FYI .. in general, $('#load-content') selects faster than $('a#load-content')

Answer 3

The problem is you are trying to bind an event handler to 'div.quick-info' before such an element exists. (when $(document).ready() executes, the div hasn't been added yet)

Use thenduks suggestion of accomplishing the action in the success handler.

Answer 4

You are creating your div in the ready function which will be called once a#load-content is clicked.

However you are setting up load event straight away. That javascript will get executed as the page loads which will be way before the div has actually been created.

I would put it at the end of the getJSON function like so :

$j.getJSON('../json/quicky/product/id/' + productId, function(json) {
     var productImage = json.image;
     var html = '<div class="quick-info"><img src="' + json.image + '"/></div>';

     $j(body).append(html);   
     positionBoxCenter();
  });

Answer 5

The load event doesn't apply to the div, as it's simply not loaded.

Skip the load event entirely and just place the code that positions the element after the code that adds the element to the body.