[jQuery] $.ajax POST with JSON in IE6
I am sorry I cannot link to example pages due to security
restrictions. So will do my best to describe the problem with comments
in my JS.
Firstly, I am using jQuery with jqModal to load a page partial into a
modal window. That page partial contains a form. When it is submitted,
I am capturing that info and submitting it via $.ajax() using 'POST'.
The backend script does its business, and returns some json, which is
written to the modal.
This all works perfectly in FF, Safari and IE7. Just not IE6. It
doesn't return any json at all. Further, when I look at my logs, there
is not even a POST request for the page in question, when using IE6.
Here's the jist of it with /* COMMENTS
/*LOAD A PAGE PARTIAL INTO THE MODAL
$('#modal-content').load($l).ajaxStop(function() {
/* IF THERE IS A FORM IN THE MODAL
if ($(this).children('form').length > 0 ) {
/* ATTACH THIS TO SUBMIT EVENT
$(this).children('form').submit(function() {
/* SERIALIZE THE FORM
var $s = $(this).serialize();
/* GET NAME/VALUE PAIR OF SUBMIT BUTTON (THEY AREN"T ALWAYS TEH
SAME FROM PAGE TO PAGE)
var $submit = $('input[type="submit"]').attr('name');
/* ADD IT NAME/VALUES (jQuery serialze() DOESN'T ASSUME THIS
PAIR)
$s += '&' + $submit + '=' + $submit;
$.ajax({
/* CACHING OFF FOR IE
cache: false,
/* MY DATA
data: $s,
/* I WANT JSON BACK
dataType: 'json',
/* UPDATE MODAL ON SUCCESS
success: function(data) {
if(data.flash) {
$('div.flash, #spinner').remove();
if(data.flash.classname != 'error') { $('#modal-
content').html(''); }
$('#modal-content').prepend('<div class="flash"></div>');
$('div.flash').addClass(data.flash.classname).html
(data.flash.message);
}
if(data.message) { $('#modal-content').append
(data.message); }
if(data.refresh) { window.location.reload(); }
},
/* MAKE IT A POST
type: 'POST',
/* THE BACKEND SCRIPT
url: $(this).attr('action')
});
/* HIJACK THE FORM SUBMIT
return false;
});
}
});
So I have isolated some scoping issues where IE6 doesn't know what $s
and $(this).attr('action') are when we are inside the $.ajax() bit. So
I hard coded correct values for them and tried again. Still nothing
returned, nor any evidence of a POST made to the page in question.
Finally, I changed my dataType to this:
dataType: ($.browser.msie) ? 'text' : 'json'
Then, I get can at least get a reponse back from the backend, and I
see that a POST request was made for the backend script. But that is
not what I need. I need to get JSON back. The backend script
absolutely detects JSON requests and returns them in kind for all
other browser combos. Any idea why not for IE6?
Also, what is wrong with my scope that $.ajax() doesn't know what $s
and $(this).attr('action') are in IE6?