Geek Answers Handbook

Failed to update span tag after calling Ajax Success

I had a problem updating the span tag in my html file. I get the JSON object from the server and it shows me also in console.log. But when I try to update it on the span tag in AJAX: Success does not work. If I call the same line outside the success tag, it works 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>
+4
source share
3 answers

$(this) inside the success callback no longer refers to a click.

You need to access it directly or use a temporary variable, for example:

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

and then in the internal callback do

$(clickedItem) instead of $(this)

I hope this works for you; tell me.

Here you have a good explanation of using the 'this' keyword inside callbacks.

+1
source

The problem is that you are using $ (this)

Using the 'this' keyword context with jQuery

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

An easy way is to save the link to $ (this) and then use it later.

For instance:

 $('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

$, which is just a var name starting with $, but not specific to jquery as such, but a useful habit for a variable storing jquery objects (including wrapped $ () DOM elements, since they are also jquery objects)

$ this = $ (this) is a useful template to apply using whatever variable names you want.

In addition, a simple console call to check for key variables is always recommended if something doesn't work.

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

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


Link Debugging

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

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

+1
source 
 $('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.

0
source

More articles:


All Articles