CODEWITHSUNDEEP
javascriptjqueryajaxdom
arjun sharma
arjun sharma

Reputation: 61

Load more gif not functioning properly

//DOM code 

echo "<div class='loadmorebutton'>";
          echo "<div class='loadmore'>";
            echo "<img class='loadmoreimage' src='loadmore.gif'/>";
          echo "</div>";
echo "</div>";

//ajax 

$(document).on( 'click', '.loadmorebutton', function() {
      $(this).parent().find(".loadmore").show();
        $.ajax({
          type: "post",
          url: "some.php",
          data: somevariable,
          dataType: "text",                  
          success: function(data) {        
            $(this).parent().find(".loadmore").hide();
          }
      });
    });

Loadmore class is set to display:none;

Above ajax is used to fetch data from a php file. Now when i click on loadmorebutton it displays loadmore class which contains loading gif and when once it got data then it should hide loadmore class resulting in hiding the gif but loadmore class does not hide and is always displayed on screen after first click.

How can i do that?

Upvotes: 0

Views: 40

Answers (2)

Rayon
Rayon

Reputation: 36609

Try this:

$(document).on( 'click', '.loadmorebutton', function() {
    $(this).parent().find(".loadmore").show();
    $.ajax({
        type: "post",
        url: "some.php",
        data: somevariable,
        dataType: "text",                  
        success: function(data) {        
            $(this).parent().find(".loadmore").hide();
        }.bind(this)
    });
});

You will be getting ajax object in this context. Need to override this context using .bind(this)

Upvotes: 1

rrk
rrk

Reputation: 15846

$(document).on( 'click', '.loadmorebutton', function() {
    var loadGif = $(this).parent().find(".loadmore").show();
    $.ajax({
      type: "post",
      url: "some.php",
      data: somevariable,
      dataType: "text",                  
      success: function(data) {        
        loadGif.hide();
      }
  });
});

Upvotes: 0

Related Questions