CODEWITHSUNDEEP
firefoxjqueryjquery-forms-plugin
phnom
phnom

Reputation: 33

Loading forms with .load kills the submit button in Firefox

I am currently loading several forms into a webpage with:

$(document).ready(function () {
    $('#content').load('php_script.php', function() {
        $(this).find('#someForm').ajaxForm(function() {
            alert('Success!');
        });
        $(this).find('.someOtherForm').ajaxForm(function() {
            alert('Success!');
        });
    });
});

This works in Chrome, Chromium and IE who loads the forms and everything works as it should (Clicking submit sends a request to the php-script defined in the form's action, which adds stuff to a db, and shows the alert dialog). In Firefox (v10.0.2) this code loads the forms into the DOM and displays them, but when clicking submit on any of the forms nothing happens.

At first I suspected ajaxForm, but changing the above code to:

$(document).ready(function () {
    $('#content').load('php_script.php');
});

yields almost the same result, the difference being that the user is sent to the script defined as the action (Except for Firefox, where nothing happens).

How do I make Firefox not kill the submit button?

Upvotes: 0

Views: 181

Answers (2)

phnom
phnom

Reputation: 33

I solved it, bad HTML from my side:

<table><form ...>
    <tr>...</tr>
</form></table>

Instead it should look like:

<form ...><table>
    <tr>...</tr>
</table></form>

The validator did not catch this since it was loaded via jQuery (and I forgot to validate the page serving the forms), and Firefox buggered out.

Upvotes: 1

Manatok
Manatok

Reputation: 5706

The code above looks ok to me...

  1. Have you had a look in firebug if there are any errors? Maybe there is a conflicting Id or something.

  2. Maybe the form isnt completely loaded into the dom yet, might be worth giving live binding a try

  3. Found this in the docs:

...jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser...

If you inspect the form is it the same as in other browsers?

Upvotes: 0

Related Questions