jQuery Mobile提交表单将我返回主页而不是下一页

时间:2012-11-28 10:47:08

标签: jquery-mobile

我正在jQuery mobile中构建一个小应用程序。

我在提交表单时从一个页面转到另一个页面时遇到问题。

所以我的第一页看起来像这样

<div data-role="page" data-theme="a"  id="page1">

<div data-role="header" data-theme="a">
        <h1>Contact Us</h1>
        <a  data-icon="back"
            data-iconpos="notext"
            data-rel="back"
            data-transition="slidefade"
            >Info</a>
        <a href="#home"
            data-icon="home"
            data-iconpos="notext"
            data-transition="slidefade"
            >Home</a>

    </div>

 <div class="pageContainer">     
    <section id="links">

    <form name="page1" method="post" action="#page2" id="form">

    <div  class="panel colourPanel">


        <div class="searchMethod buttonColour even">

            <input name="hidBranch" type="hidden" id="hidBranch" value="0" />
            <div class="searchText textShadow">Branch</div>
            <div class="searchImg">&nbsp;</div>

        </div>

        <div class="searchMethod buttonColour odd">

           <input name="hidATM" type="hidden" id="hidATM" value="0" />
            <div class="searchText textShadow">ATM</div>
            <div class="searchImg">&nbsp;</div>

        </div>

        <div class="searchInput">
            <input id="searchArea"  type="text" value="Search address">
        </div>

        <div id="searchContainer">
            <input type="submit" name="btnSearch" id="btnSearch2" alt="Find" value="Search" />

        </div>

    </div>

    </form>


      </section>

</div>

所以我希望这可以转到第2页,而是回到根页面?

为什么会发生这种情况?

谢谢

2 个答案:

答案 0 :(得分:0)

您的内容必须包含在此div中:

<div data-role="content" data-theme="a" id="someid"></div>

如果你想在jQM页面中找到一个内容,你需要有一个data-role =“content”。

答案 1 :(得分:0)

我不知道你是在做这个还是解决了这个问题,但我想我会为那些有问题的人发布一个解决方案。

jQM默认在表单提交后将您的应用返回到“第一页”。您可以使用以下内容(取自docs)来更改默认值。在处理表单和导航时,jQM正在侦听对pagebeforechange事件的调用,以更新默认值。

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {

    // We only want to handle changePage() calls where the caller is
    // asking us to load a page by URL.
    if ( typeof data.toPage === "string" ) {

        // We are being asked to load a page by URL, but we only
        // want to handle URLs that request the data for a specific
        // category.
        var u = $.mobile.path.parseUrl( data.toPage ),
            re = /^#category-item/;

        if ( u.hash.search(re) !== -1 ) {

            // We're being asked to display the items for a specific category.
            // Call our internal method that builds the content for the category
            // on the fly based on our in-memory category data structure.
            showCategory( u, data.options );

            // Make sure to tell changePage() we've handled this call so it doesn't
            // have to do anything.
            e.preventDefault();
        }
    }
});