Safari/Chrome problem with ajaxsubmit?
- by Jan
Hi
I'm currently having some weird issues with ajaxsubmit (http://jquery.malsup.com/form/#ajaxSubmit), which I'm currently using in a project.
I have a flow where I need to open a form into a modal window. I'm using fancybox for that and it works like a charm.
When the form has been forced to open in the fancybox window there can happen two things.
1) If the user who is about to submit the form is logged in she should see a confirmation in the modal box, that her input was succesfully submitted
2)If the user is not logged in there should be loaded a login form once she hits the submit button
2.1) When the user has logged in she should receive a confirmation in the modal box.
This is also working like a charm in Firefox, IE8 and IE7 but not in Safari or Chrome.
The weird part is that it seems like safari and chrome are completely ignoring my ajaxsubmit form.
To force the first form to be opened I use the follwoing script - this part is working in both Safari and Chrome.
$(".klikEnPrisForm").ajaxForm({
success: function(data){
$.fancybox({'content':data});
}
});
My ajaxsubmit form scrip looks like this
var options = {
url: '/?altTemplate=XmlProxyKlikEnPris',
dataType: 'xml',
data: $(this).serializeArray(),
success: function(data) {
if ($(data).find('loggetind').text() == 'true') {
$("#klikenpris").hide();
$('<div id="fancybox-inner-klik"></div>').appendTo('#fancybox-inner');
$('#fancybox-inner-klik').load('/KlikEnPrisAccept?tilKvittering=1&sagsno=' + $(data).find('sagsnummer').text() + '&pris=' + $(data).find('pris').text() + '&klik-comment=' + $(data).find('kommentar').text() + '&klik-telefon=' + $(data).find('tlf').text() + '&klik-maeglerkontakt=' + $(data).find('maakontakte').text()).stop(true, true);
} else {
$("#klikenpris").hide();
$("#fancybox-wrap").css({ 'width': '480px', 'height': '220px' });
$("#fancybox-inner").css({ 'width': '460px', 'height': '220px' });
$('<div id="fancybox-inner-klik"></div>').appendTo('#fancybox-inner');
$('#fancybox-inner-klik').load('/login.aspx?loginklikpris=0&klikpris=1&sagsno=' + $(data).find('sagsnummer').text() + '&pris=' + $(data).find('pris').text() + '&klik-comment=' + $(data).find('kommentar').text() + '&klik-telefon=' + $(data).find('tlf').text() + '&klik-maeglerkontakt=' + $(data).find('maakontakte').text()).stop(true, true);
}
}
};
// bind to the form's submit event
$('#klikenprisform').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
I have tried inserting an alert in the succes callback function but it's never being called it seems.
It seems like the default action is not being overruled by the link written in the "url" in ajaxsubmit.
I'm really puzzled about this, since it's working nicely in other browsers and I'm completely lost on how I should approach the debugging in safari/chrome.
I hope all the above makes sense and I'm looking forward to hear any suggestions.
Cheers!
