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!
