The alert from done function is executing before success. Please help me. What am I doing wrong here:
function load_organization()
{
return $.ajax({
url: '/partials/structure',
method: "GET",
data: {id:id},
success: function (data) {
$(data.organizations).each(function(index, organization) {
$("#organization").append(new Option(organization));
});
}
});
}
$(document).ready(function(){
load_organization().done(function(){
alert('Success');
});
});
"Done" is a callback triggered from a running XHR instance with jQuery.
The doc says:
jqXHR.done(function( data, textStatus, jqXHR ) {});
An alternative construct to the success callback option, refer to deferred.done() for implementation details.
Take a look:
function load_organization()
{
$.ajax({
url: '/partials/structure',
method: "GET",
data: {id:id},
success: function (data) {
$(data.organizations).each(function(index, organization) {
$("#organization").append(new Option(organization));
});
}
})
// Use done here -> look official API doc for some explanations: http://api.jquery.com/jQuery.ajax/
.done(function(){
alert('Success');
});
}
$(document).ready(function(){
load_organization();
});
Hope this could help you in your solution
You are executing alert('Success'); when load_organization() is called. so irrespective of ajax, the message is displaying. You can alert the success in same single function. And .done() has only one callback and it is the success callback.
function load_organization()
{
return $.ajax({
url: '/partials/structure',
method: "GET",
data: {id:id},
success: function (data) {
$(data.organizations).each(function(index, organization) {
$("#organization").append(new Option(organization));
alert('Success');
});
}
});
}
Related
I have an AJAX request which gets data from the database and then populates the page with the data collected. The problem I am having is that currently the ajax request is in a setInterval which is being called every second.
setInterval(function () {
$.ajax({
method: "POST",
url: "/PLM/FetchPageContent",
dataType: "json",
success: function (data) {
console.log(data);
}
});
}, 1000);
This is fetching the data every second which is a huge strain on the server as it's making a request and then I am calling it again even when the data hasn't come through first time.
Is there a way that I can call the same AJAX request over and over but only after it's finished fetching the data first time and not keep going up?
There are better architectures to accomplish this type of scenario (websockets as mentioned in the comments would be one example), but to do strictly what you're asking, sure! Wrap it in a function that calls itself:
function getData(){
$.ajax({
method: "POST",
url: "/PLM/FetchPageContent",
dataType: "json",
success: function (data) {
console.log(data);
getData();
}
});
}
Replace the setInterval with a setTimeout only once you're done:
function fetchAjax() {
$.ajax({
method: "POST",
url: "/PLM/FetchPageContent",
dataType: "json",
success: function (data) {
console.log(data);
setTimeout(fetchAjax, 1000);
}
});
};
Add a variable to distunguish if ajax call is already underway. If it is, don't do anything. If not, go ahead.
var isAjaxInProgress = false;
setInterval(function () {
if (!isAjaxInProgress){
isAjaxInProgress = true;
$.ajax({
method: "POST",
url: "/PLM/FetchPageContent",
dataType: "json",
success: function (data) {
console.log(data);
isAjaxInProgress = false;
}
});
}
}, 1000);
I'm making an Ajax request that works perfectly fine. The issue I'm having is that I attached the "error" method onto the call and when I modify the URL to try to make it throw an error....I get no error. Here is my code:
function instagramAjax () {
$.ajax ({
url: "url that works",
dataType: "jsonp",
success: function(returnedData) {
//my success code that works
},//end success
error: function(jqXHR, textStatus, errorThrown) {
console.log("Error " + errorThrown);
}
});//end ajax request
}//end instagramAjax function
What is the url that you'd set?
This handler is not called for cross-domain script and cross-domain JSONP requests.
window.MyCallback = function (data) {
console.log(data);
};
function instagramAjax () {
$.ajax ({
url: "url that works",
dataType: "jsonp",
crossDomain: true,
jsonpCallback: 'MyCallback',
success: function(returnedData) {
//my success code that works
},//end success
error: function (xhr, status, err) {
console.log(status, err);
}
});//end ajax request
}//end instagramAjax function
or you can do it:
function instagramAjax () {
$.ajax ({
url: "url that works",
dataType: "jsonp",
crossDomain: true,
jsonp: 'MyCallback',
success: function(returnedData) {
//my success code that works
},//end success
error: function (xhr, status, err) {
console.log(status, err);
}
});//end ajax request
}//end instagramAjax function
I use JQuery Ajax function :
$.ajax({
url: ...,
success: function (){
...
},
...
});
I need to execute some code just before every call of the success function (but after the response has been received).
I suppose that this success function is triggered like an event, so is there a way to make an other function call in place of success one's?
You can use the Global Ajax Event Handlers methods to do this.
Sounds like you might want to use AjaxComplete:
$(document).ajaxComplete(function(){
// do something here when ajax calls complete
});
Be warned -- this will occur for EVERY jQuery ajax call on the page...
You could also call that other function right at the biginning of done:
$.ajax({
url: ...,
done: function (){
someOtherFunction();
},
...
});
This should pretty much accomplish what you described in your question.
Is beforeSend what you are looking for:
$.ajax({
url: "...",
beforeSend: function (x) {
//do something before the the post/get
}
}).done(function (data) {
//done code
});
I succeed in calling an other function just before success one by replacing $.ajax() by a custom function like :
function mYajax(options) {
var temporaryVariable = options.success;
options.success = function () {
console.log('Custom')
if (typeof temporaryVariable === 'function')
temporaryVariable()
};
return $.ajax(options);
}
$('button').click(function () {
mYajax({
url: "/echo/json/",
data: {
foo: "bar"
},
success: function (data, textStatus, jqXHR) {
console.log('succeed action');
},
});
});
I have the following ajax request:
function getDetails()
{
$.ajax({
type: 'GET',
url: 'http://xxxxxx/get_determined_prize.php',
success: function(result)
{
alert(result);
},
fail: function()
{
console.log("Failure!!");
}
});
}
which calls the following php file containing the following code:
<?php
echo "5";
?>
can someone pinpoint what is the problem with my code? when i debugged the javascript method, during the execution of the ajax request, both the success and failure methods where skipped.
Please follow the link and try this
http://api.jquery.com/jQuery.ajax/
var request= $.ajax({
type: 'GET',
url: 'http://url/get_determined_prize.php',
success: function(result)
{
alert(result);
}
});
request.fail( function()
{
console.log("Failure!!");
});
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
An alternative construct to the error callback option, the .fail() method replaces the deprecated .error() method. Refer to deferred.fail() for implementation details.
Its displaying error missing : after property id
$.ajax({
url:"save.php",
data:"param="+escape(name),
dataType:"html",
cache:"false",
success(result){
$(".right").html(result);
}
});
success is a property you can assign your callback function to, like:
$.ajax({
url:"save.php",
data:"param="+escape(name),
dataType:"html",
cache:"false",
success: function(result){
$(".right").html(result);
}
});
This is the correct syntax for the success() callback:
success: function() { ... }