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手机不工作

回答

相关问题