jQuery mobile: problem with submitting forms due to page transitions

Question

I'm a bit confused with something i am trying to do in jquery mobile. I have about 5 pages total in my site and every page has the same webform on it. I've written a script that processes the form using jquery ajax. All of that works on the index.html.

I have a page2 div in my index.html that serves as a second page of my website, however the form doesnt appear to work.

I also have a page3.html page. When i go to this page, it has the same form that i had from my homepage, but it doesn't take any of jquery js, like I am hiding p.error lines using jquery, it works fine on the homepage, but doesn't trigger at all on the internal page.

Is there a way to fix this? What is the general recommendation in jquery mobile when it comes to have the same exact form across the entire website? Right now, i can only get the webform to work on my homepage.

Here is some code from the site, first the js.

$(document).ready(function() {
     $('.error').hide();

     $(function() {
     $(".button").click(function() {
     ... form validations go here ...
     ... using $.ajax({ type: "post", data: datastring }) ...

I just put an excerpt of the js code. It might be that the document.read function only loads on the homepage and then all interior pages are losing that script. So, pages that are not the index.htl, should i trigger my form script differently?

I wrap each page in a div like this:

<div id="container" data-role="page">... my page content code here ...</div>
<div id="page2" data-role="page">... my page content code here ...</div>

Each page has the same form in it, but when i go to page2, the form validates but it also conflicts with the other form so i cant submit it because it will always see the form fields as blank.

Each page contains links to other pages. When i click to go to a page that is not index or page2, nothing works on the form (my p.error statements are visible, click the submit button sends me to a 405 error page). When I submit the form from the homepage everything works exactly as expected. If i don't choose something from the drop down, it shows my p.error phrases. if i leave my email address field blank, it will show the p.error phrase to show the error message.

I am pretty sure the issue is how jquery mobile hijacks the scripts and loads things into the DOM and i had read that i can only load javascript once on the homepage. is that true?

The end result i am looking for is a way to have a fully functioning form with form validation on every page of the site whether it is a stacked data-role page or an external data-role page and i want to keep all of the animated transitions.

Answer 1

Let's start from scratch. Turns out form submission is Ajaxified by default, RTFM here. And this is how you handle it in jQuery.

From this, I've created 2 pages and submit button only submits the form it resides in, which is what you need!

Page1:

<div data-role="page">
    <script type="text/javascript">
        $(document).ready(function () {    
            $("form").submit(function () { // important: form selector, not ID
                if (!confirm("Index submit?"))
                    return false;
            });
        });
    </script>
    <div data-role="header">
        <h1>Main Page</h1>
    </div><!-- /header -->

    <div data-role="content">
        <form id="form1" method="post" action="index.html">
            <p>Page content goes here.</p>
            <input type="submit" value="Submit" class="button" />
            <a href="otherpage.html">Other Page</a>
        </form>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Page 2:

<div id="page2" data-role="page">
    <script type="text/javascript">
        $(document).ready(function () {
            $("form").submit(function () { // important: form selector, not ID
                if (!confirm("Other page submit?"))
                    return false;
            });
        });
    </script>
    <div data-role="header">
        <h1>Other Page</h1>
    </div><!-- /header -->

    <div data-role="content"> 
        <form id="form2" method="post" action="otherpage.html">  
            <p>Page content goes here.</p>
            <input type="submit" value="Submit" class="button" />
            <a href="index.html">Home Page</a> 
        </form>   
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Try this, replacing my !confirm("Other page submit?") with yours if !IsFromValid() and it should be good to go! If it works, you owe me a pint, mate =)

Answer 2

I think I'm with you now. Basically, what I've managed to replicate is a simple jQuery call that works on initial index.html page load, stops working when you navigate away and come back to this page, the url becoming something like index.html#index.html.

This is caused by jQuery mobile AJAXified page transitions, which has a few limitations mentioned here (under "Known limitations"), one of which being:

Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the "page" element (the element with a data-role attribute of "page"). For example, links to styles and scripts that are specific to a particular page can be referenced inside that div.

So, basically, what it is saying is you need to move your JavaScript inside the <div data-role="page"></div>. This worked for me.