jQuery Mobile:由于页面转换而提交表单的问题 [英] jQuery mobile: problem with submitting forms due to page transitions

问题描述

我对我要在jquery mobile中尝试执行的操作有些困惑.我的网站上总共有大约5页，每个页面上都有相同的Web表单.我已经编写了一个脚本，该脚本使用jquery ajax处理表单.所有这些都可以在index.html上使用.

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.

我的index.html中有一个page2 div，它是我网站的第二页，但是该表格似乎不起作用.

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.

我也有一个page3.html页面.当我转到此页面时，它具有与我主页相同的形式，但是它不需要任何jquery js，就像我使用jquery隐藏p.error行一样，它在主页上可以正常工作，但不会根本不会在内部页面上触发.

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.

是否可以解决此问题?当在整个网站上使用完全相同的形式时，jquery mobile的一般建议是什么?现在，我只能在我的主页上使用该网络表单.

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.

这是网站上的一些代码，首先是js.

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 }) ...

我只是摘录了js代码.可能是document.read函数仅加载到主页上，然后所有内部页面都丢失了该脚本.因此，不是index.htl的页面，我应该以其他方式触发表单脚本吗?

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?

我将每个页面都包裹在div中，如下所示:

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>

每个页面中都有相同的表单，但是当我转到page2时，表单会进行验证，但它也会与其他表单冲突，因此我无法提交它，因为它将始终将表单字段视为空白.

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.

每个页面都包含指向其他页面的链接.当我单击以转到不是索引或page2的页面时，表单上没有任何内容(我的p.error语句可见，单击Submit按钮将我发送到405错误页面).当我从首页提交表单时，一切都按预期工作.如果我没有从下拉菜单中选择任何内容，它将显示我的p.error短语.如果我将电子邮件地址字段留空，它将显示p.error短语以显示错误消息.

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.

我很确定问题是jquery mobile如何劫持脚本并将内容加载到DOM中，并且我读到我只能在首页上加载一次javascript.是真的吗?

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.

推荐答案

让我们从头开始. 原来，表单提交默认为Ajaxified，此处为RTFM . 而这是在jQuery中的处理方式.

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

由此，我创建了2个页面，并且提交"按钮仅提交它所驻留的表单，这就是您所需要的！

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

第1页:

<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 -->

第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 -->

尝试一下，如果!IsFromValid()用您的替换我的!confirm("Other page submit?")，那应该很好！ 如果可行，您欠我一品脱，伴侣=)

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 =)

这篇关于jQuery Mobile:由于页面转换而提交表单的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！