表單提交後的jQuery Mobile後退按鈕

我在jQuery Mobile（JQM）中遇到了一個有趣的問題。表單提交後的jQuery Mobile後退按鈕

您應該事先知道我有一個單頁模板設置（單獨的頁面），設置以下全局配置選項，主要是關閉ajax和jQM散列導航系統的目標。

$(document).bind("mobileinit", function(){ 
$.mobile.ajaxEnabled = "false"; 
$.mobile.buttonMarkup.hoverDelay = "100"; 
$.mobile.defaultPageTransition = "none";  
$.mobile.hashListeningEnabled = "false"; 
$.mobile.pushStateEnabled = "false"; 
$.mobile.loader.prototype.options.textVisible = true; 
});

的問題

我有一個搜索結果頁面，這顯然會顯示搜索結果。在頁面內是另一種允許用戶優化搜索的表單。有時候用戶會認爲他們不喜歡精緻的結果，他們會希望點擊後退按鈕來顯示他們的原始結果集。問題是，在JQM網站上，當單擊/點擊後退按鈕以實現此目的時，用戶將轉到該網站的索引頁面，而不是返回原始搜索結果。

有趣的是，頁面（減去特定於JQM的腳本/ css）與靜態html版本相同。該版本的行爲應該如此。

問：

我錯過了，這將是有幫助這裏的全局配置選項？是否還有其他特定於JQM的事情可能導致此問題？

標記：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 
<title>Search Results</title> 
<!-- JQM CSS --> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<!-- Custom Theme CSS --> 
<link rel="stylesheet" href="themes/cayce.css" /> 
<!-- Custom CSS --> 
<link rel="stylesheet" href="css/custom.css" /> 
<!-- Jquery --> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script type="text/javascript"> 
if (typeof jQuery == 'undefined') { 
    document.write(unescape("%3Cscript src='js/jquery-1.8.2.min.js' type='text/javascript'%3E%3C/script%3E")); 
} 
</script> 
<!-- Custom Jquery --> 
<script type="text/javascript" src="js/custom.js"></script> 
<!-- jQuery Mobile--> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
<script type="text/javascript"> 
if (typeof jQuery == 'undefined') { 
    document.write(unescape("%3Cscript src='js/jquery.mobile.1.2.0.min.js' type='text/javascript'%3E%3C/script%3E")); 
} 
</script> 
</head> 
<body> 
<div data-role="page" id="searchresults"> 
<div data-role="header"> 
<h1>Search Results</h1> 
<a href="javascript:history.go(-1)" data-icon="back" class="ui-btn-left">Back</a> 
<a href="WebCatPageServer.exe?Landing" data-icon="home" class="ui-btn-right">Menu</a> 
<div class="header-sub"> 
<div class="logo"> 
<a href="WebCatPageServer.exe?Landing"> 
<img src="themes/images/logo.png" width="100" height="49" alt="Company Logo"> 
</a> 
</div> 
</div> 
</div><!-- /header --> 
<div data-role="content"> 
<div class="ui-bar ui-bar-e"> 
<p>We found a total of <b>SPI_SearchHitCount</b> products containing<p> 
<p><b>"SPI_SearchStrDisp"</b></p> 
<!--Results SPI_SearchStart thru SPI_SearchEnd--> 
</div> 
<div data-role="collapsible" data-collapsed="true" data-content-theme="d" style="margin-top:15px;"> 
<h3>Refine/New Search</h3> 
<form name="RefineSearchForm" id="RefineSearchForm" method="post" action="WebCatPageServer.exe?DO_SEARCH"> 
<input name="Action" type="hidden" value="Search"> 
<input name="SearchType" type="hidden" value="AND"> 
<input name="FullSearch" type="hidden" value="SPI_SearchFull"> 
<input name="PrevSearchText" type="hidden" value="SPI_SearchPSearch"> 
<input name="Start" type="hidden" value="1"> 
<input name="New" type="hidden" value="SPI_SearchNew"> 
<input name="Refine" type="hidden" value="SPI_SearchRefine"> 
<input name="SearchMF" type="hidden" value="SPI_SearchSearchMF"> 
<input type="search" name="Search Term" id="refinesearch" value="" /> 
<div class="ui-grid-a"> 
<div class="ui-block-a"> 
<!-- SPI_HTML_RefineResults_Btn --> 
<input type="submit" name="refinesearch" data-theme="c" value="Refine Search"/> 
<!-- SPI_HTML_RefineResults_Btn --></div> 
<div class="ui-block-b"><input type="submit" data-theme="c" name="newsearch" onClick="javascript:document.RefineSearchForm.Refine.value='NO';document.RefineSearchForm.PrevSearchText.value='';document.RefineSearchForm.New.value='YES';" value="New Search"></div> 
</div><!-- /grid-a --> 
</p> 
</form> 
</div> 
<fieldset class="ui-grid-a"> 
<div class="ui-block-a"> 
<!-- SPI_HTML_PrevResults_Link --> 
        <form name="PrevSearchForm" method="post" action="WebCatPageServer.exe?DO_SEARCH" class="noprint"> 
         <input name="Action" type="hidden" value="Search"> 
         <input name="SearchType" type="hidden" value="AND"> 
         <input name="FullSearch" type="hidden" value="SPI_SearchFull"> 
         <input name="PrevSearchText" type="hidden" value="SPI_SearchPSearch"> 
         <input name="Start" type="hidden" value="SPI_SearchPrevStart"> 
         <input name="New" type="hidden" value="NO"> 
         <input name="Refine" type="hidden" value="NO"> 
         <input name="SearchMF" type="hidden" value="SPI_SearchSearchMF"> 
         <input name="SearchText" type="hidden" value=""> 
         <input name="ResultsPerPage" type="hidden" value="SPI_SearchResultsPerPage"> 
         <input type="submit" data-icon="arrow-l" value="Previous" /> 
        </form> 
<!-- SPI_HTML_PrevResults_Link --> 
</div> 
<div class="ui-block-b"> 
<!-- SPI_HTML_NextResults_Link --> 
        <form name="NextSearchForm" method="post" action="WebCatPageServer.exe?DO_SEARCH" class="noprint"> 
         <input name="Action" type="hidden" value="Search"> 
         <input name="SearchType" type="hidden" value="AND"> 
         <input name="FullSearch" type="hidden" value="SPI_SearchFull"> 
         <input name="PrevSearchText" type="hidden" value="SPI_SearchPSearch"> 
         <input name="Start" type="hidden" value="SPI_SearchNextStart"> 
         <input name="New" type="hidden" value="NO"> 
         <input name="Refine" type="hidden" value="NO"> 
         <input name="SearchMF" type="hidden" value="SPI_SearchSearchMF"> 
         <input name="SearchText" type="hidden" value=""> 
         <input name="ResultsPerPage" type="hidden" value="SPI_SearchResultsPerPage"> 
         <input type="submit" data-icon="arrow-r" value="Next"/> 
        </form> 
<!-- SPI_HTML_NextResults_Link --> 
</div> 
</fieldset> 
<!-- SPI_HTML_Results --> 
<form name="AddItem" method="post" action="WebCatPageServer.exe"> 
<input name="Action" type="hidden" value="Add_Item"> 
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d" data-split-icon="plus" data-split-theme="d"> 
<!-- SPI_HTML_Product_LevelEntry --> 
<li data-role="list-divider" class="listdivider">SPI_Level3Entry</li> 
<!-- SPI_HTML_Product_LevelEntry --> 
<!-- SPI_HTML_Product_Entry1 --> 
<li class="prod"> 
<!-- SPI_HTML_Product_Thumbnail --> 
<a href="SPI_ProdFullLink"><!--<img src="SPI_ProdThumbnail" width="75" height="75" alt="SPI_ProdEntryID"/>--> 
<!-- SPI_HTML_Product_Thumbnail --> 
<!-- SPI_HTML_Product_LinkItemNum --> 
<h3>SPI_ProdEntryID</h3> 
<!-- SPI_HTML_Product_LinkItemNum --> 
<!-- SPI_HTML_Product_Entry_Others --> 
<p class="space"><b>Part #</b>: SPI_ProdEntryOther</p> 
<!-- SPI_HTML_Product_Entry_Others --> 
<p class="description"><b>Description</b>: SPI_ProdEntryDesc</p> 
<!-- SPI_HTML_AllowOrderPlacement --> 
<!-- SPI_HTML_AllowViewPriceAvail --> 
<p class="space"><b>Qty Avail</b>: SPI_ProdQtyAvail</p> 
<p class="space"><b>Unit Price</b>: <span class="price">SPI_ProdEntryPrice</span></p> 
<!-- SPI_HTML_AllowViewPriceAvail --> 
<input type="number" class="nolink" name="SPI_CartOrdQtyFieldName" value="" tabindex="SPI_CartOrdQtyTabIndex" /> 
</a> 
<input name="SPI_CartProductIDFieldName" type="hidden" value="SPI_ProductID" class="noprint"/> 
<input name="SPI_CartMfgProdIDFieldName" type="hidden" value="SPI_MfgProdID" class="noprint"/> 
<input name="SPI_CartProductDescFieldName" type="hidden" value="SPI_ProductDesc" class="noprint"/> 
<a href="#" onClick="javascript:if (document.AddItem.SPI_CartOrdQtyFieldName.value==0){document.AddItem.SPI_CartOrdQtyFieldName.value='1'};document.AddItem.submit();">Add</a> 
<!-- SPI_HTML_AllowOrderPlacement --> 
</li> 
<!-- SPI_HTML_Product_Entry1 --> 
<!-- SPI_HTML_Product_Entry2 --> 
<li class="prod"> 
<!-- SPI_HTML_Product_Thumbnail --> 
<a href="SPI_ProdFullLink"><!--<img src="SPI_ProdThumbnail" width="75" height="75" alt="SPI_ProdEntryID"/>--> 
<!-- SPI_HTML_Product_Thumbnail --> 
<!-- SPI_HTML_Product_LinkItemNum --> 
<h3>SPI_ProdEntryID</h3> 
<!-- SPI_HTML_Product_LinkItemNum --> 
<!-- SPI_HTML_Product_Entry_Others --> 
<p class="space"><b>Part #</b>: SPI_ProdEntryOther</p> 
<!-- SPI_HTML_Product_Entry_Others --> 
<p class="description"><b>Description</b>: SPI_ProdEntryDesc</p> 
<!-- SPI_HTML_AllowOrderPlacement --> 
<!-- SPI_HTML_AllowViewPriceAvail --> 
<p class="space"><b>Qty Avail</b>: SPI_ProdQtyAvail</p> 
<p class="space"><b>Unit Price</b>: <span class="price">SPI_ProdEntryPrice</span></p> 
<!-- SPI_HTML_AllowViewPriceAvail --> 
<input type="number" class="nolink" name="SPI_CartOrdQtyFieldName" value="" tabindex="SPI_CartOrdQtyTabIndex" /> 
</a> 
<input name="SPI_CartProductIDFieldName" type="hidden" value="SPI_ProductID" class="noprint"/> 
<input name="SPI_CartMfgProdIDFieldName" type="hidden" value="SPI_MfgProdID" class="noprint"/> 
<input name="SPI_CartProductDescFieldName" type="hidden" value="SPI_ProductDesc" class="noprint"/> 
<a href="#" onClick="javascript:if (document.AddItem.SPI_CartOrdQtyFieldName.value==0){document.AddItem.SPI_CartOrdQtyFieldName.value='1'};document.AddItem.submit();">Add</a> 
<!-- SPI_HTML_AllowOrderPlacement --> 
</li> 
<!-- SPI_HTML_Product_Entry2 --> 
</ul> 
</form> 
<!-- SPI_HTML_Results --> 
<br> 
<fieldset class="ui-grid-a"> 
<div class="ui-block-a"> 
<!-- SPI_HTML_PrevResults_Link --> 
        <form name="PrevSearchForm" method="post" action="WebCatPageServer.exe?DO_SEARCH" class="noprint"> 
         <input name="Action" type="hidden" value="Search"> 
         <input name="SearchType" type="hidden" value="AND"> 
         <input name="FullSearch" type="hidden" value="SPI_SearchFull"> 
         <input name="PrevSearchText" type="hidden" value="SPI_SearchPSearch"> 
         <input name="Start" type="hidden" value="SPI_SearchPrevStart"> 
         <input name="New" type="hidden" value="NO"> 
         <input name="Refine" type="hidden" value="NO"> 
         <input name="SearchMF" type="hidden" value="SPI_SearchSearchMF"> 
         <input name="SearchText" type="hidden" value=""> 
         <input name="ResultsPerPage" type="hidden" value="SPI_SearchResultsPerPage"> 
         <input type="submit" data-icon="arrow-l" data-theme="c" value="Previous" /> 
        </form> 
<!-- SPI_HTML_PrevResults_Link --> 
</div> 
<div class="ui-block-b"> 
<!-- SPI_HTML_NextResults_Link --> 
        <form name="NextSearchForm" method="post" action="WebCatPageServer.exe?DO_SEARCH" class="noprint"> 
         <input name="Action" type="hidden" value="Search"> 
         <input name="SearchType" type="hidden" value="AND"> 
         <input name="FullSearch" type="hidden" value="SPI_SearchFull"> 
         <input name="PrevSearchText" type="hidden" value="SPI_SearchPSearch"> 
         <input name="Start" type="hidden" value="SPI_SearchNextStart"> 
         <input name="New" type="hidden" value="NO"> 
         <input name="Refine" type="hidden" value="NO"> 
         <input name="SearchMF" type="hidden" value="SPI_SearchSearchMF"> 
         <input name="SearchText" type="hidden" value=""> 
         <input name="ResultsPerPage" type="hidden" value="SPI_SearchResultsPerPage"> 
         <input type="submit" data-icon="arrow-r" data-theme="c" value="Next"/> 
        </form> 
<!-- SPI_HTML_NextResults_Link --> 
</div> 
</fieldset> 
</div><!-- /content --> 
<div data-role="footer"> 
</div><!-- /footer --> 
<script type="text/javascript"> 
$('#searchresults').on('pageshow', function() { 
    $('a input.nolink').each(function() { 
     var default_value = this.value; 
     $(this).focus(function() { 
      if(this.value == default_value) { 
       this.value = ''; 
      } 
      $('a input.nolink').click(function(event) { 
       event.preventDefault(); 
       event.stopPropagation(); 
      } 
      ); 
     } 
     ); 
    } 
    ); 
    $('body').append('<div data-role="popup" id="popupBasic" data-transition="pop" >'+ 
      '<p>Please enter keyword(s) in the search input field.</p>'+ 
      '</div>'); 
    $("#popupBasic").popup(); 
    var search_cmds = $('input[name="newsearch"][type="submit"]').attr('onclick'); 
    $('input[name="newsearch"][type="submit"]').attr('onclick',''); 
    $('input[name="refinesearch"], input[name="newsearch"][type="submit"]').on('click', function() { 
     if ($('#refinesearch').val()=='') { 
      //$("#popupBasic").trigger('create'); 
      $("#popupBasic").popup("open"); 
      setTimeout(function() { 
       $("#popupBasic").popup("close"); 
      } 
      ,1500); 
      return false; 
     } 
     if ($(this).attr('name')=='newsearch') { 
      /*document.RefineSearchForm.Refine.value='NO'; 
      document.RefineSearchForm.PrevSearchText.value=''; 
      document.RefineSearchForm.New.value='YES';*/ 
      eval(search_cmds); 
     } 
    } 
    ) 
} 
); 
</script> 
</div><!-- /page --> 
</body> 
</html>

感謝我欣賞你的時間非常多，夥計們！

更新現在已解決。我的JQM全局配置選項中有語法錯誤。這應該如下所示：

$(document).bind("mobileinit", function(){ 
$.mobile.ajaxEnabled = false; 
$.mobile.buttonMarkup.hoverDelay = 100;  
$.mobile.hashListeningEnabled = false; 
$.mobile.pushStateEnabled = false; 
$.mobile.loader.prototype.options.textVisible = true; 
});

來源

2012-10-11 dentalhero

而不是使用

<a href="javascript:history.go(-1)">

嘗試JQM內置的功能是這樣的

<a data-role="button" data-rel="back" data-icon="arrow-l">back</a>

如需進一步信息和細節檢查正式文件這裏

http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

讓我知道它是否有用

來源

2012-10-11 11:46:44 thefly73

謝謝。我最初嘗試過。這種情況並沒有什麼不同。另外，我的理解是data-rel =「back」內置函數只適用於啓用ajax的情況。 – dentalhero

對不起，我沒有看到阿賈克斯被禁用...我認爲這將是有用的性能和使用所有功能，讓它激活，許多問題將更容易管理，但我可以想象你有你的理由不要激活它 – thefly73

表單提交後的jQuery Mobile後退按鈕

回答

相關問題