我正在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"> </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"> </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页,而是回到根页面?
为什么会发生这种情况?
谢谢
答案 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();
}
}
});