jQuery Form Plugin not responding well with FireFox

Question

Referring to the plugin: http://malsup.com/jquery/form/#getting-started

I've recently tried to upgrade from old v2.28 to v2.96 but cannot as there appears to be a new bug introduced when trying to use FireFox to submit a form that has been loaded using another Ajax call.

I have two kinds of forms: ones that I load without an Ajax call and other that I load from the server. I use ajaxForm() for the binding:

function bindAjaxResponse() {
    // Bind for Ajax POST
    var options = {
            delegation: true,
           //target:        '#output1',   // target element(s) to be updated with server response
            beforeSubmit:  showRequest,  // pre-submit callback
            success:       showResponse  // post-submit callback
        };

    $('#my_form').ajaxForm(options);   
}

In both Chrome and IE, the code works well and both showRequest and showResponse are called and filled with proper parameters. With latest FireFox (v10.0.2) only showRequest is called but showResponse is never called. FireBug clearly shows that no submission is done at all. There are no error messages nor warnings in the console window. I really have no idea what could trigger such a difference in behavior.

Please mind that all this code worked perfectly on all browser in the older version v2.28

Anyone?

Question cross-posted on https://forum.jquery.com/topic/jquery-form-plugin-not-responding-well-with-firefox

Thanks

Is it this bug? https://github.com/malsup/form/issues/171 I just tested with the latest version and it works perfectly, try upgrading again. — Tjkoopa, Mar 07 '12 at 14:44

score 6 · Answer 1 · answered Mar 08 '12 at 19:07

6

I was having problems with jQuery forms as well, so I just call $.ajax directly:

function bindAjaxResponse() {
    // Bind for Ajax POST

    $('#my_form').submit( function() {
        var datastream = $(this).serialize();

        console.log('Submitting form');

        $.ajax({
            type: 'post',
            url: $(this).form.attr('action'),
            data: datastream,
            timeout: 2000,

            error: function() {
                console.log("Failed to submit");
            },  
            success: function(data) {
                console.log('Successfully submitted form');
                console.log(data);
            }
        });

        return false;
    });
}

answered Mar 08 '12 at 19:07

SameOldNick

2,397
24
33

Thank you for your answer but fortunately this bug is fixed. I still believe using the forms plugin is better than rewriting the whole thing which may not be as compatible as code written and maintained on a permanent basis. – Collector Mar 09 '12 at 07:23
@ub3rst4r Hi, I am having trouble with an application I am trying to write using JQuery (JQuery form plugin specifically), which I have posted here: http://stackoverflow.com/questions/20729645/jquery-file-upload-using-post-redirects-to-post-response. Please take a look at it. There's a bounty for the right answer. – EternallyCurious Dec 26 '13 at 11:10

score 4 · Accepted Answer · answered Mar 09 '12 at 06:56

4

Seems there was a bug in v2.96 and as I now upgraded to v3.02 it is solved.

answered Mar 09 '12 at 06:56

Collector

2,034
4
22
39

jQuery Form Plugin not responding well with FireFox

2 Answers2