PopUp對話框在表單提交後jquery手機不工作

我正在做一個簡單的表單submit.On表單提交我有表單action =「Facility.aspx」.on Facility.aspx我使用dialog popups.after表單提交這些對話框不起作用，但他們在提交表單之前工作。PopUp對話框在表單提交後jquery手機不工作

首先HTML表單：

<html> 
    <head> 
    <title>Facility</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
</head> 
<body> 

<div data-role="page" id="arealistpage"> 

    <div data-role="header" data-theme="b"> 
     <a href="Facility.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a> 
    </div><!-- /header --> 

    <div data-role="content"> 
    <form id="form1" method="post"> 
    <div id="AreaNoDiv" data-role="fieldcontain" class="field"> 
     <label for="Facility">Facility*</label>  
     <input id="Facility" name="shipNo_r" type="text" required/> 
    </div> 

    <div id="desDiv" data-role="fieldcontain" class="field"> 

     <label for="des" id="Label1" name="fnameLabel">Description*</label>  
     <input id="des" name="fname_r" type="text" required/> 

    </div> 
    <div id="submitDiv" data-role="fieldcontain" style="width: 30%">  
    <button class="btnLogin" data-theme="b" type="submit" id='mysubmit'>submit</button> 
    </div> 

    </form> 

    </div><!-- /content --> 

    <div data-role="footer" data-theme="b" data-position="fixed"> 

      <div data-role="navbar"> 
      <ul> 

       <li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li> 
      </ul> 
     </div> 
    </div> 
</div><!-- /page --> 
<script src="Submitscript.js" type="text/javascript"></script> 
</body> 
</html>

腳本：

$('#arealistpage').live('pageshow',function(event){ 
var serviceURL = 'service1.asmx/SubmitList'; 
    $('#mysubmit').bind('click', function(e){ 
      $.ajax({ 
      type: "POST", 
      url: serviceURL, 
      data: '{"name":"' + name + '"}', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: successFunc, 
      error: errorFunc 
     }); 
    }); 

    function successFunc(data, status) { 

     // parse it as object 
     // var outStr = JSON.parse(data.d); 
     // alert(outStr); 
    } 

    function errorFunc() { 
     alert('error'); 
    } 
});

我的第二個從哪裏對話框不工作表單提交後。

<html> 
    <head> 
    <title>Facility</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
<script type="text/javascript"> 
    $('#arealistpage').live('pageshow', function (event) { 
     $('div[id="primaryList"] ul[data-role="listview"] a').bind("click", function() { 
      var facilityid = $(this).data("facilityid"); 
      sessionStorage.facilityid = facilityid; 
      }); 
    }); 
</script> 

</head> 
<body> 

<div data-role="page" id="arealistpage"> 

    <div data-role="header" data-theme="b"> 
     <h1><a name="top"></a>Facility</h1> 
     <a href="../MenuePages/Dictionaries.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a> 
    <a href="AddFacility.aspx" data-role="button" data-icon="plus" data-theme="d" style="float:left;" rel="external" data-transition="slide" data-ajax="false">Add</a> 
    </div><!-- /header --> 

    <div data-role="content"> 
    <div id="primaryList"> 
    <ul data-role="listview" data-inset="true" data-theme="c" data-filter="true" id="areaList" data-split-icon="gear" data-split-theme="d"> 

    </ul> 

     </div> 
    </div><!-- /content --> 

    <div data-role="footer" data-theme="b" data-position="fixed"> 

      <div data-role="navbar"> 
      <ul> 

       <li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li> 
      </ul> 
     </div> 
    </div> 
    <script src="FacilityScript.js" type="text/javascript"></script> 

</div><!-- /page --> 
    <div data-role="page" id="dialog"> 
    <div data-role="header" data-theme="b"> 
    <h1>Options</h1> 
    </div> 
<ul data-role="listview" data-inset="false" 
       data-theme="c"> 
       <li data-icon="false"><a href="UpdateFacility.aspx" data-ajax="false">Edit</a></li> 

       <li data-icon="false"><a href="#divMsg" data-rel="dialog" data-transition="pop">Delete</a></li> 

      </ul> 
</div> 
<div data-role="page" id="divMsg"> 
    <div data-role="header" data-theme="b"> 
    <h1>Confirmation</h1> 
    </div> 

    <div data-role="content"> 
    <a href="Facility.aspx" onclick="DeleteFacility(); return true" data-role="button" data-ajax="false">Delete Record?</a> 
    </div> 
    <script src="FacilityScript.js" type="text/javascript"></script> 
</div> 
</body> 
</html>

Facility.js

來源

2013-03-07 chamara

我會檢查並getback你 – 2013-03-07 04:09:10

謝謝朋友！ – chamara 2013-03-07 04:11:41

你在腳本'FacilityScript.js'中有什麼？ – 2013-03-07 06:04:32

<a href="AddFacility.aspx" data-role="button" data-icon="plus" data-theme="d" style="float:left;" rel="external" data-transition="slide" data-ajax="false">Add</a>

我通過刪除rel =「external」和data-ajax =「false」標籤解決了該問題。在上面的代碼從我的網絡表格

來源

2013-03-07 12:08:00 chamara

如jQuery Mobile的一個經驗法則，你需要有唯一的ID爲每個頁面夜的。我發現您的網頁都使用了相同的ID。更改頁面的ID並更改JS文件中的相關ID。

它應該工作正常。所有看起來都對我好。檢查並更新我。

更新

可以導航使用$.mobile.changePage('yourpage.html');

所以你應該調用上述方法在你的成功函數形式後提交新的一頁。

來源

2013-03-07 06:18:24

我改變了頁面ID仍然沒有工作。更多的事情。表單提交後 - >導航到第二頁。一旦我刷新第二頁一切工作正常。 – chamara 2013-03-07 06:39:43

檢查我的udpate – 2013-03-07 06:44:42

我試了兩個$ .mobile。changePage（「Facility.aspx」）;和

我有一個類似的問題。我在html頁面的data-role =「page」元素之外爲特定頁面添加了一個腳本。因此，當頁面被更改時，我的彈出窗口不起作用，因爲JQM只呈現data-role =「page」容器內的內容（或者body標籤內部的頁面在html文檔中不可用）。所以我在我的應用程序起始頁（即index.html）的pageinit中添加了我的代碼。這是我的方式

$(document).delegate("#addseat-page", "pageinit", function() { 
    $("#vipPopup").popup(); //vip popup 
    $("#popup-reservedseat").popup(); // reserved seat popup 
});

它爲我工作。

參考：今天http://jquerymobile.com/demos/1.2.1/docs/pages/page-scripting.html

乾杯

來源

2013-04-23 20:30:19

PopUp對話框在表單提交後jquery手機不工作

回答

相關問題