Ajax not working when submitting twice

Question

Hello and thank you for reading!

First things first, so here is my setup:

index.php - loads content into divs by using

jq('#p5-content').load('content/stuff.php');

stuff.php - contains a form and a script in its <head> part.

This is the script:

var jq = $.noConflict();
jq(function () {

    jq('form').on('submit', function (e) {

        e.preventDefault();

        var page = jq(this).attr("page");

        jq.ajax({
            type: jq(this).attr("method"),
            url: jq(this).attr("action"),
            data: jq(this).serialize(),
            success: function (data) {
                jq('#' + page + '-content').html(data);
            }
        });

    });

});

This is the form:

<form action="content/stuff.php" method="post" page="p5">
    <input type="hidden" name="p5-submit-1" />
    <input type="image" style="margin-top: 20px;" src="images/send.png" />
</form>

I am running into the problem that sometimes when clicking the send button, the whole page is redirected to content/stuff.php and sometimes only the wanted content inside the div (p5-content) responds to the form. I want only the content of the p5-content to be replaced.

Also when it worked and different content is then loaded into p5-content which contains another (similar) form, the whole page changes to content/stuff.php when clicking this second form.

Additionally I am wondering why the script doesn't work if it is in the <head> part of my index.php.

Summary:

The script should work if it is in the index.php
The script should always work and not just sometimes (often it only works after reloading the page)
When submitting a second form inside the response area of my ajax the response should be inside the div again.

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Where does the p5-content element land in your hierarchy? If the <form> is a child element of p5-content, then your original form (which you assigned a submit handler to) will be replaced with a new, identical <form>, which does not have any submit handler tied to it. That would explain why it is posting the entire page, since e.preventDefault(); is no longer getting called.

To fix this, find a way to NOT replace the entire <form> with your ajax call. This is better anyways because it means you are sending less data with every ajax postback. Alternatively, if you really must replace the entire <form>, re-add the submit event handler at the end of the ajax callback.

As for why your script doesn't work in the <head>, it may be because your script is running before jQuery is included (I'm not sure where you are including jQuery). Since the HTML parser will block while it is waiting for scripts to load, you probably want to load all your scripts at the end of the <body>, anyways, to make your content load faster. You can also use the async attribute as described in this post, but this won't guarantee that your scripts will load in the right order, so I wouldn't recommend it in your case. Or, if you really care about optimizing your load time and want to put in some work, have a look at this article.

@aj-r My code looks like this: `
` and after submitting form1 it looks like this: `
`. I'm now trying to not replace the form and then I'll be reporting back. Also, I double checked and made sure that jquery would definitely be included before the script itself. I will read through your linked article - I am absolutely glad about it, thank you :) — user3735411, Jul 08 '14 at 08:37
@aj-r Awesome you helped me a lot! I wrapped the `
` now around the div and it works like a charm! Next up I'll try positioning the script at other places and keep you posted. — user3735411, Jul 08 '14 at 08:49
@aj-r Alright, everything works now just as expected! I'm loading in parts of my scripts asynchronously and the forms work great as well. Thank you! — user3735411, Jul 08 '14 at 09:43

Ajax not working when submitting twice

1 Answers1