Load more gif not functioning properly

Question

//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?

possible duplicate of [$(this) inside of AJAX success not working](http://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working) — rrk, Aug 28 '15 at 18:10

score 1 · Accepted Answer · edited Aug 28 '15 at 18:13

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)

score 0 · Answer 2 · answered Aug 28 '15 at 18:08

$(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();
      }
  });
});

Load more gif not functioning properly

2 Answers2