Making an on-the-fly 'ajaxForm'

Question

I am trying to use ajaxForm on my on-the-fly created form. In fact, my application will produce a link 'on the fly' and by clicking on that link, it will produce an ajaxForm (again on-the-fly by jQuery!), so I used the .live() function with ajaxForm(). This is my wrong code:

$('form').live('submit', function() {
    $(this).ajaxForm({dataType: 'html', success: function(data) {
        alert(data);
    }});
    return false; // For preventing page refresh!
});

In my form, when I click the submit button, the page refreshes.

Is there a solution?

You haven't shown us enough. We have no idea where you execute this code, or how you include jQuery, nor can we see the problem in action. — Lightness Races in Orbit, Sep 10 '11 at 20:40
yes, data will receive from server after loading page. and the form will be shown after clicking on a link, that link is part of process method of received data — Morteza, Sep 10 '11 at 20:49
:) sorry, my mind is full of errors! how you include jQuery: simple script tag (produced by cakephp). the jQuery.js works on other elements, so it is included correctly. can we see the problem in action: it is not possible for me — Morteza, Sep 10 '11 at 21:09
Why on earth not? If you can't produce a testcase then something is _very_ wrong! — Lightness Races in Orbit, Sep 10 '11 at 21:10
oh in my test script it worked! http://pastebin.com/XC6WTch7 — Morteza, Sep 10 '11 at 21:43
Right, so you have just proved that this is a complete non-question. Next time please try that _before_ posting. — Lightness Races in Orbit, Sep 10 '11 at 22:01
see title of question, _problem_ in making ..., and that problem isn't fixed up to now. 'Please avoid extended discussions in comments' — Morteza, Sep 11 '11 at 05:27

score 0 · Answer 1 · answered Sep 10 '11 at 20:10

0

Try using event.stopPropagation(); which is a JQuery function.

To do so you will need to take the event object as parameter to the handeler:

$('form').live('submit', function(event){

and use this line in place of return false; :

event.stopPropagation();

answered Sep 10 '11 at 20:10

Drew Galbraith

2,216
4
19
22

Try adding `url:"#"` to the object passed to the ajaxForm function. – Drew Galbraith Sep 10 '11 at 20:27
2

Drew you have it backwards, you don't want to stop propagation, you just want to prevent the default behaviour. – aziz punjani Sep 10 '11 at 20:31

score 0 · Answer 2 · answered Sep 10 '11 at 20:27

The return false should work, but, it's best practice to either do event.preventDefault() or event.stopPropagation() when you have no need to do both. In this case it would be event.preventDefault() because you want to stop the default action of submitting the form. But like i said return false; should have worked in your case so i'm suspecting you might be getting some kind of errors with the plugin you're using. If i were you i would look at the documentation again for your plugin and make sure your options are correct. Right off the back i see a dataType: 'html' and there can only be 'xml', 'script', or 'json' as stated in the documentation...You may want to have another look at your usage of the plugin.

score 0 · Accepted Answer · answered Sep 10 '11 at 20:40

0

As others have said, your return false should work.

So, something else is wrong. Ensure that jQuery is loaded properly and that your on-submit handler actually executes by placing debugging code in it.

Also, make sure that you have Firebug installed and enabled (or equivalent for your browser) so that you can perform your debugging.

answered Sep 10 '11 at 20:40

Lightness Races in Orbit

378,754
76
643
1,055

with all these answeres problem should be this! ok i will test it now – Morteza Sep 10 '11 at 20:53

momo · Answer 4 · 2011-09-10T21:19:22.207

You might need to call preventDefault in place of "return false". Pseudo code of that use case of jQuery livewith form combined with AJAX is below:

    //Override form submit
    $("form").live("submit", function (event) {
        event.preventDefault();
        var form = $(this);
        $.ajax({
            url: form.attr('action'), // Get the action URL to send AJAX to
            type: "POST",
            data: form.serialize(), // get all form variables
            success: function(result){
                // ... do your AJAX post result
            }
        });
    });

Also, I am not sure if with ajaxForm (as I haven't used ajaxForm) you need to use jQuery.live. Inferring from the doc, you might not need it at all.

Making an on-the-fly 'ajaxForm'

4 Answers4