jQuery: using $(this) inside of $.ajax success function - javascript

I'm making an $.ajax call, and the following code does not work as intended. The alert results in 'undefined'
$(document).ready( function {
$(".elem").on("click", function(e) {
e.preventDefault();
$.ajax( {
url: 'index.php',
data: {
'action': 'something'
},
success: function() {
alert($(this).data("foobar"));
}
});
});
)};
However, I was able to get it working by adding an alias to $(this) before entering the ajax function.
$(document).ready( function {
$(".elem").on("click", function(e) {
var old_this = $(this);
e.preventDefault();
$.ajax( {
url: 'index.php',
data: {
'action': 'something'
},
success: function() {
alert(old_this.data("foobar"));
}
});
});
)};
I can't assign unique IDs to the element being clicked, so accessing it via $("#id") isn't an option.
Is there a more standardized approach to accessing the $(this) that existed before entering the success function or does this way work just fine?

The way that you have it is just fine. By default this in jQuery ajax callbacks is the ajax settings object (you can set via $.ajaxSettings). $.ajax also has a context property that you can set:
$.ajax({
url: url,
data: data,
context: this,
success: success
});
Then you could use $(this) as expected, but personally I find the reassignment of this easier to understand. You may want to pick a better variable name than old_this, though.

Related

How to target an element that is being clicked in a class inside ajax

I want to target some div in a class, i would use $(this), but that doesn't doesnt work since im calling that class from another function.
Sample Code.
$(document).on('click', '.Player', function(e){
var id = $(this).find('.Song_Id').html();
$.ajax({
type:"POST",
data: {data:id},
complete: function(){
$(this).attr('src', '../images/appicons/2/16x16/refresh - Red.png')
},
url:"php/player/get_song.php"
}).done(function(f){
$('#Song_info').html(f)
});
})
From above, the following is the line i don't know how to impliment.
$(this).attr('src', '../images/appicons/2/16x16/refresh - Red.png'),
it suppose to target class ".player", but not the entire class, only the element that was clicked.
Thanks.
You can store $(this) inside another variable and use this variable inside your function.
$(document).on('click', '.Player', function (e) {
var id = $(this).find('.Song_Id').html(),
that = $(this);
$.ajax({
type: "POST",
data: {
data: id
},
complete: function () {
that.attr('src', '../images/appicons/2/16x16/refresh - Red.png')
},
url: "php/player/get_song.php"
}).done(function (f) {
$('#Song_info').html(f)
});
})
When the ajax callback is executed, by default the execution context of the callback method is set to the ajax settings object.
You can use the context option of $.ajax() to pass a custom execution context
$(document).on('click', '.Player', function (e) {
var id = $(this).find('.Song_Id').html();
$.ajax({
type: "POST",
data: {
data: id
},
//use context to set the execution context of the callback
context: this,
complete: function () {
$(this).attr('src', '../images/appicons/2/16x16/refresh - Red.png')
},
url: "php/player/get_song.php"
}).done(function (f) {
$('#Song_info').html(f)
});
})
context:
This object will be made the context of all Ajax-related callbacks. By
default, the context is an object that represents the ajax settings
used in the call ($.ajaxSettings merged with the settings passed to
$.ajax). For example, specifying a DOM element as the context will
make that the context for the complete callback of a request

Can't access object made by ajax call

I have this ajax request:
$.ajax({
type: "POST",
dataType: "json",
data: dataString,
url: "app/changeQuantity",
success: function(data) {
$('#table').append('<tr><td><a id="uid">click</a></td></tr>');
});
as you can see it makes new row in #table. But this new objects made by ajax are not accessible from next functions. Result from ajax is not a regullar part of DOM, or what is the reason for this strange behavior?
$('#uid').on('click', function () {
alert('ok');
});
Use event delegation:
$(document).on('click','#uid', function () {
alert('ok');
});
Note that ajax calls are asynchronous. So whatever you do with the data you need to do it in a callback within the success function (that is the callback which is called when the ajax call returns successfully).
Jquery on doesn't work like that. Use have to give a parent which not loaded by ajax, and the specify ajax load element like this
$('#table').on('click','#uid' ,function () {
// what ever code you like
});
Is simple and complex at the same time. Simple to solve but complex if you are getting started with javascript...
Your event handler - onclick is being fired and bound to an object that doesnt yet exist.
So when you append the object to the #table, you need to set up your click handler as the object now exists.
So in your success part of the ajax return add the click handler event there.
success: function(data) {
$('#table').append('<tr><td><a id="uid">click</a></td></tr>');
$('#uid').on('click', function () {
alert('ok');
});
});
Or how about you make it dynamic and create a function to do it for you.
function bindClick(id) {
$('#' + id).click(function() {
//Do stuff here
console.log('I made it here' + id);
});
}
Then:
success: function(data) {
$('#table').append('<tr><td><a id="uid">click</a></td></tr>');
bindClick(uid);
});
}
This is a super contrived example but you get the idea you just need to make the rest of it dynamic as well. for example some name and counter generated id number: id1, id2, id3...
Try it like this, add this $('#uid').on('click', function () { into the success
$.ajax({
type: "POST",
dataType: "json",
data: dataString,
url: "app/changeQuantity",
success: function(data) {
$('#table').append('<tr><td><a id="uid">click</a></td></tr>');
$('#uid').on('click', function () {
alert('ok');
});
});
});

JQuery $(this) not accessible after ajax POST?

Let's say I have a bunch of links that share a click event:
Click me
Click me
Click me
Click me
and in the $('.do-stuff').click function I execute a JQuery ajax POST request that updates the database with stuff and I get a successful response. After the ajax is completed, I simply want to change the value of the link text to be whatever I send back from the server...
$('.do-stuff').click(function () {
$.ajax({
type: "POST",
url: "MyWebService.asmx/DoSomething",
data: '{CurrentLinkText: "'+ $(this).text() +'"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$(this).text(result.d);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
});
This invoked just fine and I verified that "result.d" is indeed the text from the server but the text is not changing. I think that the $(this) element is no longer accessible after the AJAX post? What can I do to work around this?
In general when you lose context like that, you can save a reference to the object. Like this:
function clickHandler() {
var that = this;
$.ajax( { url: '#',
success: function (result) {
$(that).text(result.d);
}
);
}
See here:
$(this) inside of AJAX success not working
You can set the context option:
This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax). (...)
Example:
$.ajax({
//...
context: this,
success: function(json) {
//...
}
});
or use $.proxy:
$.ajax({
//...
success: $.proxy(function(json) {
//...
}, this)
});
Try:
success: $.proxy(function(result) {
//...
}, this)
There are lots of ways to do this, as you can see from the answers here. Personally, I prefer to construct a function bound to the current value of this:
success: (function(target) {
return function(result) {
$(target).text(result.d);
}
})(this)
It's neat, clean, and $(this) will remain the same as it is in the outer context; i.e. it will be the element that raised the event.
jQuery('#youridvalue').html(result.d);
jQuery('.yourclassvalue').html(result.d);
Use it

jQuery methods in $.ajax success handler don't work

I have a function:
$(".delete").click(function() {
$.ajax({
url: "ServerHandler.ashx",
data: "mode=delete&item=" + $(this).attr("title"),
success: function() {
$(this).parent().parent().remove();
alert("hi");
}
});
});​
I have a problem when I delete the parent object. It just does not disappear. I tried to hide - did not help.
Alert is called normal.
How to solve?
Sorry for bad English.
You're inside another function with another this value by default. Pass the this value from the outer function with the $.ajax function as follows:
$.ajax({
context: this,
...
Because the this in the ajax success callback function is different from the click callback function. You could cache it to a local variable or use the $.ajax()'s context option.
$(".delete").click(function () {
var $this = $(this);
$.ajax({
url: "ServerHandler.ashx",
data: "mode=delete&item=" + $this.attr("title"),
success: function () {
$this.parent().parent().remove();
alert("hi");
}
});
});
Have you tried setting the context: this, parameter in the ajax function.
When the success handler fires, the value of this won't be the same as it was before hand.
See here fore more: http://api.jquery.com/jQuery.ajax/
Try this:
$(".delete").click(function() {
$object = $(this);
$.ajax({
url: "ServerHandler.ashx",
data: "mode=delete&item=" + $(this).attr("title"),
success: function() {
$object.parent().parent().remove();
alert("hi");
}
});
});​

jquery help selecting the parent

I have this HTML
<li>
<a rel="1" href="/jobwall/job/1">
<img src="http://lcl.moovjob.com/media/images/employers/simonainleydotinfo.jpg">
</a>
</li>
and I have this javascript
$('ul#jobs li a').mouseenter(function(){
$(this).parent().addClass('active');
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
$(this).parent($(this)).addClass('added');
}
});
}).mouseleave(function(){
$('#wrapper').append('Leave');
});
On mouse enter I am wanting to add a class the li that holds the a that has the mouseenter event on it, however I cannot get it to add the class on mouseenter.
You have two calls to .addClass(). Which one are you talking about?
The first one should work.
The second one will not because the value of this has changed inside the success: callback. You can cache it in a variable and reference it inside.
$('ul#jobs li a').mouseenter(function(){
// cache the parent here, because "this" will have different
// meaning in the callback
var $parent = $(this).parent().addClass('active');
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
// Inside here, "this" no longer references the DOM element
$parent.addClass('added'); // reference the parent you cached
}
});
}).mouseleave(function(){
$('#wrapper').append('Leave');
});
Another option would be to set the context: property of the AJAX call.
$.ajax({
type: 'POST',
context: this, // set the context to the current "this" for the callback
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
$(this).parent().addClass('added');
}
});
And another option would be to use $.proxy() to retain the value of this.
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success: $.proxy( function(html) { // Have $.proxy return a function
$(this).parent().addClass('added'); // with the proper "this"
}, this )
});
Your this inside of the success event will be the window not the anchor element.
Take a ref of the anchor outside the .ajax call and use it in the success event.
$('ul#jobs li a').mouseenter(function(){
var $this = $(this);
$this.parent().addClass('active');
$.ajax({
type: 'POST',
url: '/jobwall/job_tooltip',
data: 'employer_id='+$(this).attr('rel'),
success:function(html) {
$this.parent().addClass('added');
}
});
}).mouseleave(function(){
$('#wrapper').append('Leave');
});
You're mis-calling the parent method.
Change it to
$(this).parent()
Try
$(this).closest('li').addClass('added');
Or just
$(this).parent().addClass('added');

Categories