CODEWITHSUNDEEP
javascriptjqueryajaxdom
user3487775
user3487775

Reputation: 147

Trouble in updating span tag after Ajax Success call

I am having trouble in updating span tag in my html file. I am getting JSON object from server and its showing me in console.log too. But When I try to update it on span tag in AJAX:Success it doesn't work. If I call same line outside the success tag, it does work there.

AJAX.JS 

$('a.up_vote').click(function(e) {
          e.preventDefault();

          $(this).siblings("span").css( "background-color", "green" );

          $.ajax({
            url: $(this).attr('href'),
            type :'get' ,
            success : function (data){
              $(this).find("span").css( "background-color", "red" ); 
              $(this).siblings('span').html(data.count);
              $(this).siblings("span").css( "background-color", "red" );
            },
            failure : function (data){
              alert('failure') ; 
            }
          }) ;  // ajax call 

       }); // upvote link call

HTML

   <div class ='up' style="float:left">
         <a href='{% url 'upvote-detail' post.id %}' class='up_vote'>Up vote</a>
         <span> {{ post.upvote }} </span> 
   </div>

Upvotes: 4

Views: 391

Answers (3)

Neeraj Pathak
Neeraj Pathak

Reputation: 759

$('a.up_vote').click(function (e) {
    e.preventDefault();

    $(this).siblings("span").css("background-color", "green");

    $.ajax({
        url: $(this).attr('href'),
        type: 'get',
        success: function (data) {
            $('a.up_vote').siblings("span").css("background-color", "red");
            $('a.up_vote').siblings('span').html(data.count);
        },
        failure: function (data) {
            alert('failure');
        }
    });  // ajax call 

}); // upvote link call

try this one.

Upvotes: 0

trainoasis
trainoasis

Reputation: 6720

$(this) inside the success callback is not referencing the clicked item anymore.

You have to reference it directly or use a temporary variable like:

var clickedItem = $(this); // before ajax call

and then inside success callback try

$(clickedItem) instead of $(this)

I hope this works for you; please let me know.

Here you have a nice explanation of 'this' keyword use inside callbacks.

Upvotes: 1

Daniel Brose
Daniel Brose

Reputation: 1403

The issue is your use of $(this)

Using the context of the 'this' keyword with jQuery

https://remysharp.com/2007/04/12/jquerys-this-demystified

A simple way is to store referance to $(this) then use it later.

For example:

$('a.up_vote').click(function(e) {
      e.preventDefault();
      window.alert("hello");
      console.log("hello there");

      var $that = $(this);

      $that.siblings("span").css( "background-color", "green" );

      $.ajax({
        url: $that.attr('href'),
        type :'get' ,
        success : function (data){
          // alert('success');
          console.log('hello from success ajax')
          console.log(data.count); 
          $that.find("span").css( "background-color", "red" ); 
          $that.siblings('span').html(data.count);
          $that.siblings("span").css( "background-color", "red" );
          // $('#upvote_count').html(data.count);
          console.log('siblings passed')
        },
        failure : function (data){
          alert('failure') ; 
        }
      }) ;  // ajax call 

   }); // upvote link call

The $that is just a var name starting with a $, not specific to jquery as such but a useful habit for variable that store jquery objects (including $() wrapped DOM elements, as those are jquery objects too)

The $that = $(this) is a useful pattern to apply, using whatever variable names you want.

Also, a simple console call to check key variables is always recomended when something doesnt work

console.log('debug',$(this));

You just hit F12 and go to console tab (or google your browser name + dev console if nothing happens) and see what is printed there (or even use breakpoints or other debugging method, see link)


Debugging Links

Chrome DevTools: https://developer.chrome.com/devtools

Debugging JS in Chrome: https://developer.chrome.com/devtools/docs/javascript-debugging

Upvotes: 1

Related Questions