We Keep Coding

jQuery $.ajax works with GET but fails on POST

I've got a really weird problem on a customer's server.
I'm using code like the one posted below in several scripts.
The $.ajax configurations are almost identical (i.e. only file, data and success function change) and always use type:POST.
This works most of the times, but for the case below POST always fails.
Changing the type to GET works without a problem.
I'm a little bit clueless what happens here.
var parameter = {
password : $("#password").val()
};
$.ajax({
type : "POST",
url : "query/submit_password.php",
dataType : "xml",
async : true,
data : parameter,
success : function(aXHR) { /* ... */ },
error : function(aXHR, aStatus, aError) { alert("Error:\n" + aStatus + "\n"+ aError); }
});
This code always results with an alert "NetworkError: A network error occurred.".
Again - other cases with almost identical code work without a problem.
Chrome and Firefox dev tools report a POST error without any further explanation.
Any idea what happens here?
A few more details.
The client's site is hosted on GoDaddy
The same piece code works well on other servers
Yes, the file does exist as a GET request works
All browsers I tried this on have no blocker plugins (like adblock) installed
HTTPScoop shows the following results
(3 attempts, the red status says "Connection closed by communications partner"):
Chrome shows the following:
Almost solved.
The apache log showed a status 403 on the request.
It also showed a returned size of 0 which probably is the reason why chrome, etc. showed a failed request.
Why this happens is still not clear but it is definitely a server side configuration problem (most likely a mod_rewrite problem or sth. like that).

try add contentType: "application/json; charset=utf-8" to your ajax call
$.ajax({
type : "POST",
url : "query/submit_password.php",
contentType: "application/json; charset=utf-8",
dataType : "xml",
async : true,
data : parameter,
success : function(aXHR) { /* ... */ },
error : function(aXHR, aStatus, aError) { alert("Error:\n" + aStatus + "\n"+ aError); }
});
if it doesn't help try what benhowdle89 says, stringify(parameter).

IE8 jquery ajax head request not working?

typical IE problems everyone. this works in chrome, firefox, safari - but not in IE8. haven't tried in IE9 yet. anyone know what i'm missing? i tried it with and without the crossDomain param. thanks in advance.
$.ajax({
url:'http://www.example.com/photo.jpg',
type:'HEAD',
crossDomain:true,
error: function() {
// something bad
},
success: function() {
// something cool
}
});

From here http://api.jquery.com/jQuery.ajax/:
type
Default: 'GET'
The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.

ajax that worked repeatedly in jquery 1.3.2 only works first time in 1.7.1

Here's the code:
$(document).ready(function() {
$().ajaxStart(function(){
alert("in ajaxStart")
//tried removing $.blockUI( below, same thing. don't see alert
//$.blockUI({ message: '<h1><img src="images/ajax-loader.gif" /> Running query...</h1>' });
});
$().ajaxStop(function(){
$.unblockUI()
});
...
$("#frmQUERYSUBMIT").submit(function(e) {
...
$.ajax({
type: "POST",
url: '/execquery/' + jsonQuery,
//datatype: JSON, //original, incorrect
datatype: "json", //still get same problem with correct usage
success: function(data, textStatus) {
$("#status p").html(data);
},
async: true
});
...
});
});
In 1.3.2, this worked fine, reached the server, gave me back the data I expected. When I upgraded to 1.7.1, it works once (per opening of browser), but all subsequent executions do nothing. If I step thru the code in firebug, it shows it going from line to line every time, but only actually does something the first time. Also, in 1.7.1, $().ajaxStart( is also only run the first time, not any subsequent times.
TIA
EDIT: I had originally posted that my server logs showed no connection on subsequent attempts. This was an error. The logs show that a connection is made, and a response given. It just doesn't show up in the browser.
EDIT: FWIW, in 1.3.2, the data comes back as "{"queries":{"f.sp":{"1d":{"show_results":{"19820611":-2.6893769610040343,..."; but in 1.7.1, it comes back as Document, and says that the type is application/xml

JSON is not a valid datatype, try giving datatype: 'json'

Issue #1, the data not being available to javascript was solved by this: https://stackoverflow.com/a/250245/403748,
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/j-son;charset=UTF-8");
}
},
and issue #2 was solved by https://stackoverflow.com/a/4034337/403748
$(document).ajaxStart(
instead of
$().ajaxStart(
Sorry for the time-waster...

Jquery .Get() pulls NULL in Internet Explorer

I have a problem with an AJAX call in JQuery. It works on Chrome, FF, and Safari, but not IE. In fact in IE nothing happens at all, no errors, no data loaded.
Here is the code:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
$.get("ShoppingCart2.aspx", { }, function(data) {
//query the jq object for the values
alert(data);
alert($(data).find('#Items').text());
var intI = parseInt(($(data).find('#Items').html()));
With the alert data I find all the data from the page I am making a call from, but unfortunately my data.find methods pull up null for IE. I'm not sure if it's the code or the browser, but I am really stuck. Thank you for the help.
Edit: I did add in the cache: false command, but still I have no luck. I really cannot understand why this won't work in IE.

Try this (once in your page/external js, before your AJAX calls):
$.ajaxSetup({ cache: false });
IE likes to cache the hell out of things, and if you were testing and had no content there at one point, chances are IE is holding onto it. Using $.ajaxSetup() and and telling it by default to not cache AJAX results should resolve this. If you're curious, it's sticking a timestamp on the URL as a cache breaker under the covers, use fiddler to see this happening.

Is it perhaps caching the AJAX? What happens if you put this before your code:
$.ajaxSetup({ cache:false });

A quick solution without coding it could be to press CTR+F5 to clear the cache upon refresh.

Well I was unable to make the .find part of the .get work in internet explorer, but I did find a way to get the ajax information I needed:
var information = $.ajax({ type: "GET", dataType: "html", url: "ShoppingCart2.aspx", data: querystring, async: false }).responseText + " ";
This passes a query string to the website then gets information from the website back into one big string. I then
manipulated that string to get what I needed. Unfortunately it is a lot slower than the .get command, but it is a fix.
Thanks for the help everyone!

Problem with jQuery.ajax with 'delete' method in ie

I have a page where the user can edit various content using buttons and selects that trigger ajax calls. In particular, one action causes a url to be called remotely, with some data and a 'put' request, which (as i'm using a restful rails backend) triggers my update action. I also have a delete button which calls the same url but with a 'delete' request. The 'update' ajax call works in all browsers but the 'delete' one doesn't work in IE. I've got a vague memory of encountering something like this before...can anyone shed any light? here's my ajax calls:
//update action - works in all browsers
jQuery.ajax({
async:true,
data:data,
dataType:'script',
type:'put',
url:"/quizzes/"+quizId+"/quiz_questions/"+quizQuestionId,
success: function(msg){
initializeQuizQuestions();
setPublishButtonStatus();
}
});
//delete action - fails in ie
function deleteQuizQuestion(quizQuestionId, quizId){
//send ajax call to back end to change the difficulty of the quiz question
//back end will then refresh the relevant parts of the page (progress bars, flashes, quiz status)
jQuery.ajax({
async:true,
dataType:'script',
type:'delete',
url:"/quizzes/"+quizId+"/quiz_questions/"+quizQuestionId,
success: function(msg){
alert("success");
initializeQuizQuestions();
setSelectStatus(quizQuestionId, true);
jQuery("tr[id*='quiz_question_"+quizQuestionId+"']").removeClass('selected');
},
error: function(msg){
alert("error:" + msg);
}
});
}
I put the alerts in success and error in the delete ajax just to see what happens, and the 'error' part of the ajax call is triggered, but WITH NO CALL BEING MADE TO THE BACK END (i know this by watching my back end server logs). So, it fails before it even makes the call. I can't work out why - the 'msg' i get back from the error block is blank.
Any ideas anyone? Is this a known problem? I've tested it in ie6 and ie8 and it doesn't work in either.
thanks - max
EDIT - the solution - thanks to Nick Craver for pointing me in the right direction.
Rails (and maybe other frameworks?) has a subterfuge for the unsupported put and delete requests: a post request with the parameter "_method" (note the underscore) set to 'put' or 'delete' will be treated as if the actual request type was that string. So, in my case, i made this change - note the 'data' option':
jQuery.ajax({
async:true,
data: {"_method":"delete"},
dataType:'script',
type:'post',
url:"/quizzes/"+quizId+"/quiz_questions/"+quizQuestionId,
success: function(msg){
alert("success");
initializeQuizQuestions();
setSelectStatus(quizQuestionId, true);
jQuery("tr[id*='quiz_question_"+quizQuestionId+"']").removeClass('selected');
},
error: function(msg){
alert("error:" + msg);
}
});
}
Rails will now treat this as if it were a delete request, preserving the REST system. The reason my PUT example worked was just because in this particular case IE was happy to send a PUT request, but it officially does not support them so it's best to do this for PUT requests as well as DELETE requests.

IE 7 and 8 do not support DELETE and PUT methods. I had a problem where IE7,8 would not follow a 302 redirect and IE would use the DELETE or PUT method for the location that it was supposed to redirect to (with a get.)
To ensure that IE7 and 8 work properly, I would use a POST with the parameters:
data: {'_method': 'delete'}

Take a look at your type attribute type:'delete'
jQuery documentation on type:
The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.
I would instead try and include this with your data and look for it on the server-side, like this:
data: {'action': 'delete'},