Ive been playing with the ajax tools in jQuery and am having an issue with using $(this) inside the success of the execution of my ajax. I was wondering if its possible to use $(this) inside of your success as ive seen tutorials use it but when i attempt to use it it doesnt work... However if i use $(document) or some other method to get to the object i want it works fine... Any help would be greatly appreciated as i am quite new to jQuery! Thanks in advance! The code im playing with is as follows:
$(".markRead").click(function() {
var cId = $(this).parents("div").parents("div").find("#cId").val();
var field = "IsRead";
$.ajax({
type: "POST",
url: "ajax/contract_buttons.php",
dataType: "text",
data: "contractId=" + cId + "&updateField=" + field,
async: false,
success: function(response) {
//$(this) doesnt recognize the calling object when in the success function...
$(this).find("img").attr("src", "images/read.png");
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.statusText);
alert(thrownError);
}
});
});
this always refers to the current execution context so it does not necessarily stay the same in a callback function like an ajax success handler. If you want to reference it, you must just do as Dennis has pointed out and save its value into your own local variable so you can reference it later, even when the actual this value may have been set to something else. This is definitely one of javascript's nuances. Change your code to this:
$(".markRead").click(function() {
var cId = $(this).parents("div").parents("div").find("#cId").val();
var field = "IsRead";
var element = this; // save for later use in callback
$.ajax({
type: "POST",
url: "ajax/contract_buttons.php",
dataType: "text",
data: "contractId=" + cId + "&updateField=" + field,
async: false,
success: function(response) {
//$(this) doesnt recognize the calling object when in the success function...
$(element).find("img").attr("src", "images/read.png");
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.statusText);
alert(thrownError);
}
});
});
Related
im sure this is something obvious but I cant figure it out
onclick of button retrieveScoreButton my button is simply not doing anything
any help is appreciated, im attempting to append the data to a table but cant even get it to register the clicking of the button so I cant test the function showsccore
<button id="addScoreButton">Add score</button>
<button id="retrieveScoreButton">Retrieve all scores</button>
<br>
<div id="Scores">
<ul id="scoresList">
</ul>
</div>
<script>
$(document).ready(function () {
$("#addScoreButton").click(function () {
$.ajax({
type: 'POST',
data: $('form').serialize(),
url: '/addScore',
success: added,
error: showError
}
);
}
);
});
$(document).ready(function () {
$("#retrieveScoreButton").click(function () {
console.log(id);
$.ajax({
type: 'GET',
dataType: "json",
url: "/allScores",
success: alert("success"),
error: showError
}
);
}
);
});
function showScores(responseData) {
$.each(responseData.matches, function (scores) {
$("#scoresList").append("<li type='square'>" +
"Home Team " + matches.Home_Team +
"Away Team: " + matches.Away_Team +
"Home: " + scores.Home_Score +
"Away: " + scores.Away_Score
);
}
);
}
function showError() {
alert("failure");
}
</script>
</body>
</html>
There are a couple things wrong here:
console.log(id);
$.ajax({
type: 'GET',
dataType: "json",
url: "/allScores",
success: alert("success"),
error: showError
});
First, you never defined id. (After some comments on the question it turns out your browser console is telling you that.) What are you trying to log? You may as well just remove that line entirely.
Second, what are you expecting here?: success: alert("success") What's going to happen here is the alert() is going to execute immediately (before the AJAX call is even sent) and then the result of the alert (which is undefined) is going to be your success handler. You need a handler function to be invoked after the AJAX response, and that function can contain the alert.
Something like this:
$.ajax({
type: 'GET',
dataType: "json",
url: "/allScores",
success: function() { alert("success"); },
error: showError
});
(To illustrate the difference, compare your current success handler with your current error handler. One of them invokes the function with parentheses, the other does not. You don't want to invoke a handler function right away, you want to set it as the handler to be invoked later if/when that event occurs.)
I am having an ajax function that returns updated value from the database. It is implemented under the click event of a certain button.
DIV :
<div class="rep">
<div class="up_arrow"></div>
<div class="rep_count"></div>
</div>
There are about 10 same divs repeating on a page. up_arrow is where the user will click.
I am trying to update the data in rep_count and also change the class of up_arrow to up_arrowed.
SUCCESS Function of Ajax :
success: function(data){
$(this).addClass('.up_arrow').removeClass('.up_arrowed');
$(this).css('background-position','0 40px');
$(this).next('.rep_count').html(data);
}
This success function is a part of ajax function which is invoked on a click function and thats the reason i'm using this to refer to its siblings. This is not doing what i'm expecting. I tried using siblings instead of next but that too is not doing the magic.
Thanks for your help in advance.
EDIT :
The Click function :
$('.up_arrow').each(function() {
$(this).click(function(event) {
var resid = $(this).attr('name');
var post_data = {
'resid' : resid,
'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
};
if(resid){
$.ajax({
type: 'POST',
url: "/ci_theyaw/restaurants/plusrepo",
data: post_data,
success: function(data){
//console.log($(this).siblings('.rep_count').text());
$(this).addClass('.up_arrow').removeClass('.up_arrowed');
//$(this).css('background-position','0 40px');
//$(this).next('.rep_count').html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
console.log(xhr.responseText);
alert(thrownError);
}
});
}
});
});
this inside the success handler does not refer the same object as it was referring outside the ajax call.
One solution is to use a closure variable self which is referring the clicked element and then use it in the success handler. Also there are few other changes
//there is no need to use .each() here
$('.up_arrow').click(function () {
var resid = $(this).attr('name');
var post_data = {
'resid': resid,
'<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
};
var self = this;
if (resid) {
$.ajax({
type: 'POST',
url: "/ci_theyaw/restaurants/plusrepo",
data: post_data,
success: function (data) {
//console.log($(this).siblings('.rep_count').text());
//you had swapped the class names here also should not use . in front of the class name, it is used only for class selector
$(self).addClass('up_arrowed').removeClass('up_arrow');
//$(this).css('background-position','0 40px');
//$(this).next('.rep_count').html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
console.log(xhr.responseText);
alert(thrownError);
}
});
}
});
Another solution is to use $.proxy as shown below to pass a custom context
success: $.proxy(function(data){
$(this).addClass('.up_arrow').removeClass('.up_arrowed');
$(this).css('background-position','0 40px');
$(this).next('.rep_count').html(data);
}, this)
You need to pass the item the user clicked on to the success function. I would change your code to this:
$('.up_arrow').click(function() {
//you don't need an .each() loop to bind the events
var TheClickedItem = $(this);
.......
success: function(data){
//now you're accessing/modifying the item that was actually clicked.
TheClickedItem.addClass('.up_arrow').removeClass('.up_arrowed');
TheClickedItem.....
}
The problem is that this does not refer to the clicked element inside the success callback.
Use the context option in $.ajax to specify what you need as this inside the success callback.
$.ajax({
...
context: $(this), // now the clicked element will be `this` inside the callback
...
success: function(data) {
// here 'this' refers to the clicked element now
},
...
});
You need to save this in onclick context, because in ajax-success function this refers to other context. You should do something like this:
$('.up_arrow').on('click', function() {
var self = this; // save this refering to <a>
$.ajax(.....,
success: function() {
// this - refers to success-function context, but self - refers to 'a'-onclick handler
$(self).addClass('.up_arrow').removeClass('.up_arrowed');
$(self).css('background-position','0 40px');
$(self).next('.rep_count').html(data);
}
)
})
Will toDistance.php ran after calling this function? It seems like toDistance.php is not called. Thanks
function myAjax(volunteerDist, jid){
$.ajax({
type:'POST',
url: 'toDistance.php',
data : ({
distance:volunteerDist,
id:jid
}),
success: function(){
alert('worked');
},
error :function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
},
complete : function(){
alert('thanks');
}
});
Did you tried out by taking arguments on your success function? Try this code.
function myAjax(volunteerDist, jid){
$.ajax({
type:'POST',
url: 'toDistance.php',
success: function( data ){
///CHECK UR UPCOMING DATA
alert(data.jid);
alert('worked');
},
error :function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
},
complete : function(){
alert('thanks');
}
});
Will toDistance.php ran after calling this function?
If the data parameter is what the server expecting to get, Yes.
Use firebug, check what is going on with your request and stop guessing...
It seems OK. Try to track web traffic with FIddler and check if the script is called and the arguments.
If you're debbuging with Safari, Chrome or Firefox you can record the traffic.
Check for POST variables, script location etc.
I am working on a learning planner which gets its data (languagekeys, tasks, activities, etc.) from a database. Because I need a JSON string, I encode it with json_encode to work with it in JavaScript.
I have a different function (for keys, tasks, activities, etc.) which gets this data and writes it into an array.
function get_tasks(start_date,end_date){
maxsubtasks=0;
maxtasks=0;
$.getJSON(json_data+"?t_startdate="+start_date+"&t_enddate="+end_date, function(data) {
tasks=new Array();
$.each(data.tasks, function(i,item){
tasks[i]= new Object();
tasks[i]["t_id"]=item.t_id;
tasks[i]["t_title"]=item.t_title;
tasks[i]["t_content"]=item.t_content;
. . .
if ( i > data.tasks.length) return false;
maxtasks = data.tasks.length;
if(item.t_parent > 0){
maxsubtasks++;
}
});
});
return true;
}
Everything is working just fine. I need some help, because I now have to call this function in $(document).ready(). I want to build my learning planner only once the function get_tasks() is complete (the array is filled with data). Otherwise, I will get errors.
How can this be solved?
Here is what I have in $(document).ready():
if(get_tasks(first_day,last_day) && get_tmp_data()){ // If this function is done
// This function should be fired -- just like a callback in jQuery
init_learnplanner();
}
You can add a callback to the function:
function get_tasks(start_date, end_date, callback) {
Then after populating the array in the function, call the callback function:
if (callback) callback();
Now you can use the callback parameter to initialise the learning planner:
get_tasks(first_day, last_day, function() {
init_learnplanner();
});
You should be able to specify a callback in $.getJSON, which gets executed as soon the request is completed.
EDIT:
You're already doing this, but why don't you just call the second code block from the end of the callback funciton in $.getJSON?
Other answers haven't worked for me because I have 5 functions which use my data with $.getJSON, and I need to have collected all information to even start init_learnplanner().
After several hours of searching, I've discovered the jQuery function ajaxComplete, which works like a charm for me. jQuery tracks all ajax calls that have been fired and triggers anything assigned .ajaxComplete() when one is complete.
What I'm doing is usually something like this:
simple, looks like beginner but it works :) :D
<script type="text/javascript">
var isBusy = true;
$(document).ready(function () {
// do your stuff here
isBusy = false;
});
function exampleajax() {
if(isBusy) return false;
isBusy=true;
$.ajax({
async: true,
type: 'POST',
url: "???.asp",
dataType: "jsonp",
data: qs,
error: function(xhr, ajaxOptions, thrownError){
//console.log(xhr.responseText + " AJAX - error() " + xhr.statusText + " - " + thrownError);
},
beforeSend: function(){
//console.log( "AJAX - beforeSend()" );
},
complete: function(){
//console.log( "AJAX - complete()" );
isBusy = false;
},
success: function(json){
//console.log("json");
}
});
}
</script>
hope this help you
I am trying out JQuery Ajax methods. I wrote a simple Ajax request to fetch certain 'tagged' photos from Flickr. Following is the snippet I am using:
function startSearch() {
$(function() {
var tagValue = $("#tagInput").attr("value");
alert(tagValue);
$.ajax({
url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + tagValue + "&tagmode=any&format=json&jsoncallback",
dataType: 'json',
async: false,
success: function(data) {
alert("Success");
$.each(data.items, function(i, item) {
var pic = item.media.m;
$("<img/>").attr("src", pic).appendTo("#images");
});
},
error: function(data, error) {
alert("Error " + error);
}
}); });
'startSearch' is associated with a Search button. User is supposed to input a 'tag' to search and on click this function gets called.
Problem is that I am not receiving any 'data' in response. Hence no images gets displayed.
What am I doing wrong here?
Thanks & Regards,
Keya
I think the problem is that you're trying to make a cross-site request, which doesn't work because of security concern. You could use JSONP instead, e.g. as described in http://www.viget.com/inspire/pulling-your-flickr-feed-with-jquery/
You can also try searching for "cross site ajax" on this site, there's plenty of discussion about it.