Reputation: 35349
When submitting an ajax request, I would like to toggle a class before send, toggle it back on error, or keep it if everything turns out ok. But the $(this)
selector does not seem to be working and I'm not sure why. I'm using jQuery 1.4.3.
html
<a class="vote-down vote-down-112 state-3" data-postid="112" data-voteid="6">down</a>
js
$('.vote-down').click(function() {
var voteData = '&postId=' + $(this).data('postId') + '&voteId=' + $(this).data('voteid');
$.ajax({
dataType: 'script',
url: "myURL" + "?format=js" + voteData,
error: function(XMLHttpRequest, textStatus, errorThrown) { $(this).toggleClass("status-3"); },
beforeSend: function(XMLHttpRequest) { $(this).toggleClass("status-3"); }
});
return false;
});
Upvotes: 1
Views: 302
Reputation: 22438
Common mistake. this
refers to the XHR request, not to the element:
$('.vote-down').click(function() {
var that = this; // save a reference to the element;
$.ajax({
dataType: 'script',
url: "myURL" + "?format=js" + voteData,
error: function() {
$(that).toggleClass("status-3");
},
beforeSend: function() {
$(that).toggleClass("status-3");
}
});
return false;
});
That is because jQuery calls you error and beforeSend function like this: userfunction.apply( xhr[, args] );
, which makes the this
keyword refer to the XHR.
Upvotes: 2
Reputation: 630429
this
by default refers to the ajax
object itself, if you want this
to be something specific, use the context
option to set what this
is in your callbacks, like this:
$('.vote-down').click(function() {
var voteData = '&postId=' + $(this).data('postId') +
'&voteId=' + $(this).data('voteid');
$.ajax({
context: this,
dataType: 'script',
url: "myURL" + "?format=js" + voteData,
error: function() { $(this).toggleClass("status-3"); },
beforeSend: function() { $(this).toggleClass("status-3"); }
});
return false;
});
I removed the function arguments just to clean up, they're not needed if you're not using them.
Upvotes: 6