jQuery - load from another page after all elements are loaded

Question

I want to display the rating of a product, witch is on the product page in div with id rating, on the category page, so I made a script below:

$('.product').each(function(){
    var url = $(this).find('a').attr('href');
    $(this).prepend('<div class="rating"></div>');
    $(this).find('.rating').load(url +'#rating');
});

The problem is, that the rating on the product page is generated with another script, so the element #rating is not present on the site from the start, so after doing some search I tried adding ajaxcomplete function:

$('.product').each(function(){
    var url = $(this).find('a').attr('href');
    $(this).prepend('<div class="rating"></div>');
    $(this).ajaxComplete(function(nxt) {
        $(this).find('.rating').load(url +'#rating');
        nxt();
    });
});

But that also doesn't seem to work, so I'm wondering is there any solution for this to work?

Thanks

Answer 1

You need to load the script that does the rating using jQuery getScript. This way you can put processing dependent on the rating script in the success handler of the getScript call.

The code will look something like this:

$.getScript( "rating.js", function( data, textStatus, jqxhr ) {
  console.log( "rating complete" );
  $('.product').each(function(){
    var url = $(this).find('a').attr('href');
    $(this).find('.rating').load(url +'#rating');
  }
});