Safari/Chrome problem with ajaxsubmit?

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!

EDIT:

I have been googling for some hours now and I found this post: http://forum.jquery.com/topic/jquery-jquery-form-plugin-not-sending-name-of-button-in-safari

I'm thinking that this is maybe the same thing that happens in my scenario - but I'm not quite sure where I should place the script he is posting, which fixed his problem.

My form looks like this:

    <form id="klikenprisform" method="post" action="/login?clicked=1">
      <input type="hidden" name="loggetind" value="0" />
      <h2>Tak. Du du er nu ved at gå et skridt videre</h2>
      <ol>
        <li id="klikkom">
          <label for="klik-comment">Evt. kommentar</label>
          <textarea id="klik-comment" name="klik-comment">Add your comment:</textarea>
        </li>
        <li id="kliktlf">
          <label for="klik-telefon">Telefonnummer</label>
          <input type="text" id="klik-telefon" name="klik-telefon" />
        </li>
        <li>
          <p>Some text...</p>
        </li>
        <li id="klikkon">
          <label for="klik-kontakt">Ja, jeg må godt kontaktes</label>
          <input type="checkbox" id="klik-kontakt" name="klik-kontakt" />
        </li>
        <li>
          <input type="image" src="/frontend/images/buttons/videre.gif" id="submit" value="Videre" />
        </li>
      </ol>
    </form>

The fact that it's being wrapped in a list, could that be the problem?

ansaurus

tags:

views:

answers:

Safari/Chrome problem with ajaxsubmit?

related questions