I am beginner to jquery ajax. My below ajax code was working fine when I was using async: false, but due to problems in firefox I removed it after referring this link(I was facing the same issue). Now it is not working. not even showing any errors.
Here is my code:
try {
_ajaxCall = $.ajax({
url: URL,
type: "POST",
data: "drqlFragment=" + text,
//async : false,
cache: false,
headers: {
accept: "application/json",
contentType: "application/x-www-form-urlencoded"
},
contentType: "application/x-www-form-urlencoded",
//processData : true,
success: function (data, textStatus, jqXHR) {
var resData = data.suggestions;
for (var i = 0; i < resData.length; i++) {
sugData.push(resData[i].keyword);
}
},
error: function (response) {
//Error here
alert('hello');
}
});
} catch (e) {
alert(e);
}
The above code is neither executing success nor error. I even tried to catch the error by keeping try catch block but no use.
The problem was that I was doing manipulations outside the success callback function. It was working fine when I used async: false. that means the ajax call will be synchronous. When I removed async: false, the manipulations which I was doing outside the success callback function were not working. The problem was because of asynchronous behaviour of the ajax call. When calling a ajax call asynchronously, it will not flow as the code priciple i.e step by step and top to bottom but it can happen anytime. So, I was not able to get the desired output.
When I replaced the code manipulations in success callback, my code is working fine.
Thanks to #mccannf who pointed the problem in the above comments. :).
Related
I send a post request using ajax, the data is being saved in the database but my success function never run?
If I put the success function in the error function the app is behaving as I would expect. I dont see any error messages in the node terminal. I have built the API myself, but I have noticed any problems before.
I am still on the steep learning curve, is there something wrong I have missed in my code?
$('#newPoiForm').on('submit', function(e) {
e.preventDefault();
let formData = $(this).serialize();
$.ajax({
dataType: 'json',
type: 'POST',
url: '/api/pois/',
data: formData,
success: function(message) {
console.log('success, now run the success function');
// add the new point ajax should go here
},
error: function(data) {
console.log('something went wrong');
$.ajax({
dataType: 'json',
url: 'http://localhost:3000/api/pois/last',
success: function (data) {
$(data.features).each(function (key, data) {
// add last to poi
console.log('last point added');
poi.addData(data);
});
}
});
}
});
first get rid of the nested success function within the error function and replace the error function with this to debug the cause:
error: function(ts) { alert(ts.responseText) }
Then have a look at the url, they differ within your success functions.
Either simply the first url-parameter is wrong, or the response is invalid.
I am having an issue with IE related to jQuery and ajax. Chrome and Firefox work just fine, but my ajax calls are disappearing in IE.
After making the ajax call, neither the success nor the fail functions are being called. I can see the response in the IE console, and I know my controller action is being hit.
$.ajax({
url: controllerUrl
type: 'POST',
dataType: 'json',
cache: false,
data: {
id: customerId
},
success: function () {
alert('success!');
},
error: function () {
alert('failed!');
}
});
Has anyone else seen this issue?
fail: function () {
alert('failed!');
}
fail is not a valid jQuery ajax setting. I believe you are looking for error.
Also, cache: false, does nothing with POST requests.
Note, jQuery does not append the time stamp with POST requests.
The source code clearly demonstrates this. (summarized from https://github.com/jquery/jquery/blob/master/src/ajax.js)
var rnoContent = /^(?:GET|HEAD)$/;
s.hasContent = !rnoContent.test( s.type );
if ( !s.hasContent ) {
/* code to append time stamp */
}
You are missing a comma , after your URL parameter:
$.ajax({
url: controllerUrl, // <--- you were missing this comma!
type: 'POST',
dataType: 'json',
cache: false,
data: {
id: customerId
},
success: function () {
alert('success!');
},
error: function () {
alert('failed!');
}
});
I have a mobile app using mostly JQuery Mobile. I have an ajax function using POST and I can't seem to get anything to effect the UI when I fire the click event. I tried setting
$('#cover').show();
as the very first thing in the function then I do some basic things like document.getElementById('user') etc to set some variables and check input, but as long as the ajax function is there it won't show the div or even the spinner from JQ Mobile. Unless I debug and step through the code then the spinner and div show up fine. I tried setTimeout and putting it in the beforeSend area of the ajax call. Everything works fine otherwise. It seemed to work a little better with GET I'm not sure if that has anything to do with it or not.
$.ajax({
cache: false,
type: "POST",
async: false,
url: urlString,
data: jsonstring,
contentType: "application/json",
dataType: "json",
success: function (data) {
JSONobj = JSON.parse(data);
},
beforeSend: function(xhr){
//console.log('BeforeSend');
},
complete: function (xhr) {
//console.log('Complete');
},
error: function (xhr, status, error) {
console.log(error);
}
});
You could use the Ajax Global handlers to handle this:
$(document).
.ajaxStart(function(){
$('#cover').show();
})
.ajaxStop(function(){
$('#cover').hide();
});
This way you don't have to worry about showing/hiding the overlay on individual Ajax calls.
Try this
$("#someButton").click(function(e){
e.preventDefault() //if you want to prevent default action
$('#cover').fadeIn(100,function(){
$.ajax({
url: "someurl",
data: "Somedata",
contentType: "application/json",
dataType: "json",
},
success: function (data) {
JSONobj = JSON.parse(data);
$('#cover').fadeOut(100);
},
complete: function (xhr) {
$('#cover').fadeOut(100);
}
});
});
});
I'm making an attempt at a RESTful application but my $.ajax function stops in the middle of its execution.
function addEntry()
{
$.ajax({
type: 'POST',
contentType: 'application/json',
url: passAPI,
dataType: "json",
data: dataToJSON(),
success: hideform
})
}
function hideform()
{
$('#form').hide();
}
The data is put correctly in the database but the form doesn't get hidden. Anyone know why that happens ?
I tried setting up an error statement that didn't return anything. When I tried again it worked.
I think I fixed some dumb syntax error.
Sorry !
Given there are no errors. Does this work? I added the function()
function addEntry()
{
$.ajax({
type: 'POST',
contentType: 'application/json',
url: passAPI,
dataType: "json",
data: dataToJSON(),
success: function() {
hideform();
}
})
}
function hideform()
{
$('#form').hide();
}
making an assumption that your not using an event.preventDefault() if that's the case the ajax call will get cut off as the page reloads to submit the form using its default handlers.
if you already have an
event.preventDefault();
then ignore me ha.
In jquery that is.
I would like something that works as the success-pararameter, but that is run when the function is called, rather than once I get the response.
sample (oajax is an extension of ajax for open auth)
$.oajax({
url: url,
jso_provider: "facebook", // Will match the config identifier
jso_scopes: false, // List of scopes (OPTIONAL)
dataType: 'json',
success: function(data) {
fbposts=data.data
//a bunch of code irellevant for the question
},//success done
error: function() {
console.log("ERROR Custom callback()");
}
})
};
Are you looking for .ajaxSend() ?
Attach a function to be executed before an Ajax request is sent.
This function (and .ajaxComplete et al) allow you to register callback functions that are called for the different phases of every AJAX request.
In a normal ajax function, you pass it as beforeSend:
$.ajax({
url: url,
dataType: 'json',
beforeSend: function(jqXHR, status){
// CODE HERE
},
success: function(data) {
fbposts=data.data
},
error: function() {
console.log("ERROR Custom callback()");
}
})
};
You'll have to check if oajax have this event too, but it probably do