Run jQuery code after AJAX jQuery load()

Question

How can i run the below code only after the code 1 has load all its content from the external page ?

jQuery Script tried

//filters
$(window).bind("load", function() {
    $(".filters li").on("click", function () {
    id = ($(this).data("id")+'').split(',');
    filter = $(this).data("filter");
    $("#hotel-list .box").hide();
    id[0] == "all" && $("#hotel-list .box").show() || id.forEach(function(v){
        $('#hotel-list .box[data-'+filter+'*="'+v.trim()+'"]').show();
    });
    return false;
});
      <!-- Count Star Rating -->
        var two_stars = $("article[data-stars*='2']").length;
        var three_stars = $("article[data-stars*='3']").length;
        var four_stars = $("article[data-stars*='4']").length;
        var five_stars = $("article[data-stars*='5']").length;
        $('.total-three').text(three_stars);
        $('.total-four').text(four_stars);
        $('.total-five').text(five_stars);
        var totals = three_stars + four_stars + five_stars + two_stars;
        $('.totals').text(totals);      
        <!-- Count Board -->
        var board_no = $("article[data-board*='No']").length    
        var board_ro = $("article[data-board*='Room']").length  
        var board_bb = $("article[data-board*='Breakfast']").length;            
        var board_fb = $("article[data-board*='Full Board']").length    
        var board_hb = $("article[data-board*='Half']").length  
        var board_ai = $("article[data-board*='All']").length   
        var board_sc = $("article[data-board*='Self']").length  
        $('.total-ro').text(board_ro);
        $('.total-bb').text(board_bb);
        $('.total-fb').text(board_fb);
        $('.total-hb').text(board_hb);
        $('.total-ai').text(board_ai);
        $('.total-sc').text(board_sc);
        var total = board_ro + board_bb + board_fb + board_hb + board_ai + board_sc + board_no;
        $('.total').text(total);

  //Fix broken images
  fixBrokenImages = function( url ){
    var img = document.getElementsByTagName('img');
    var i=0, l=img.length;
    for(;i<l;i++){
        var t = img[i];
        if(t.naturalWidth === 0){
//this image is broken
            t.src = url;
        }
    }
}
 window.onload = function() {
    fixBrokenImages('images/noimg.png');
 }
});

And the jQuery AJAX code is:

var datastring = location.search; // now you can update this var and use
$("#hotel-list").load("Rezults2.php"+ datastring + " #hotel-list> *");

So i need that the 1st codes to be executed only after the 2nd code has done its job ( from 3 to 9 secs )

ANy ideea on this ?

Answer 1

Solution is:

$(document).ajaxComplete(function( event, xhr, settings ) {
   // Your complete function here
});

Or in my Case full code:

        $(document).ajaxComplete(function(event, xhr, settings) {
        //Count STARS
        var two_stars = $("article[data-stars*='2']").length;
        var three_stars = $("article[data-stars*='3']").length;
        var four_stars = $("article[data-stars*='4']").length;
        var five_stars = $("article[data-stars*='5']").length;
        $('.total-three').text(three_stars);
        $('.total-four').text(four_stars);
        $('.total-five').text(five_stars);
        var totals = three_stars + four_stars + five_stars +
          two_stars;
        $('.totals').text(totals);
        //COUNT BOARD
        var board_no = $("article[data-board*='No']").length
        var board_ro = $("article[data-board*='Room']").length
        var board_bb = $("article[data-board*='Breakfast']").length;
        var board_fb = $("article[data-board*='Full Board']").length
        var board_hb = $("article[data-board*='Half']").length
        var board_ai = $("article[data-board*='All']").length
        var board_sc = $("article[data-board*='Self']").length
        $('.total-ro').text(board_ro);
        $('.total-bb').text(board_bb);
        $('.total-fb').text(board_fb);
        $('.total-hb').text(board_hb);
        $('.total-ai').text(board_ai);
        $('.total-sc').text(board_sc);
        var total = board_ro + board_bb + board_fb + board_hb +
          board_ai + board_sc + board_no;
        $('.total').text(total);
        //Fix broken images
        fixBrokenImages = function(url) {
          var img = document.getElementsByTagName('img');
          var i = 0,
            l = img.length;
          for (; i < l; i++) {
            var t = img[i];
            if (t.naturalWidth === 0) {
              //this image is broken
              t.src = url;
            }
          }
        }
        window.onload = function() {
          fixBrokenImages('images/noimg.png');
        }
        });
        });

Answer 2

function runThisAfter() {
    var two_stars = $("article[data-stars*='2']").length;
    var three_stars = $("article[data-stars*='3']").length;
    var four_stars = $("article[data-stars*='4']").length;
    var five_stars = $("article[data-stars*='5']").length;
    //etc...
}

$("#hotel-list").load("Rezults2.php", function(){ runThisAfter(); });

This will run "runThisAfter()" when load is complete.