Load ajax after page load

Question

This is the first time that I'm using ajax with jquery and I'm new on jquery I have a structure

 $(document).ready(function(){ data_url = $('.lazy_content').attr("data-url"); data_id = $('.lazy_content').attr("data-target-id"); $.ajax({ url: data_url, type: "POST", beforeSend: function() { $(".loaderDiv").show(); $("#" + data_id).html(""); }, success: function(data) { $(data).each(function(index, el) { $(".loaderDiv").hide(); $("#" + data_id).html(data); }); } }); }); 

 <div class="lazy_content" data-url="/ajax/yorumlar/@Model.OtelBilgileri.seflink" data-target-id="ajax-content-1"> <h4 class="tur-main-baslik">COMMENTS</h4> <div id="ajax-content-1"></div> </div> <div class="lazy_content" data-url="/ajax/trustyou/@Model.OtelBilgileri.seflink" data-target-id="ajax-content-2"> <h4 class="tur-main-baslik section-head">POSTS</h4> <div id="ajax-content-2"></div> </div> 

as you see I have data-url this data url has my ajax-file and I'm getting my ajax file but after page loading nothing work..whats wrong with my code ?

Answer 1

Depending on where the javascript is in the HTML the DOM may not have loaded at the point you run the script.

encapsulating your javascript within the jquery 'on DOM loaded' function ( $(document).ready( function() { ) will fix that problem, code as follows.

$(document).ready( function() {
  $('.lazy_content').on("load", function() {
    data_url = $(this).attr("data-url");
    data_id = $(this).attr("data-target-id");

    $.ajax({
      url: data_url,
      type: "POST",
      beforeSend: function() {
        $(".loaderDiv").show();
        $("#" + data_id).html("");
      },
      success: function(data) {
        $(data).each(function(index, el) {
          $(".loaderDiv").hide();
          $("#" + data_id).html(data);
        });
      }
    })
  });
});

Answer 2

Put your code inside $( document ).ready()

and I think you need to change your code like :

$(document).ready(function() {
    data_url = $('.lazy_content').attr("data-url");
    data_id = $('.lazy_content').attr("data-target-id");

    $.ajax({
        url: data_url,
        type: "POST",
        beforeSend: function() {
            $(".loaderDiv").show();
            $("#" + data_id).html("");
        },
        success: function(data) {
            $(data).each(function(index, el) {
                $(".loaderDiv").hide();
                $("#" + data_id).html(data);
            });
        }
    })
})

Or iterate with each class ie .lazy_content

$( document ).ready(function() {
    $('.lazy_content').each(function(){
        data_url = $(this).attr("data-url");
        data_id = $(this).attr("data-target-id");

        $.ajax({
            url: data_url,
            type: "POST",
            beforeSend: function() {
                $(".loaderDiv").show();
                $("#" + data_id).html("");
            },
            success: function(data) {
                $(data).each(function(index, el) {
                    $(".loaderDiv").hide();
                    $("#" + data_id).html(data);
                });
            }
        })
    })
})

Answer 3

Load evnet is Only usable in window,img element.

If You use Jquery load function, You can use callback function.

$("#target").load("append.html",function(){
     // callback
});

another way, you append scripts below target html.