Question

我正在做一个简单的表单提交。在表单提交中我有表单action =“Facility.aspx”.on Facility.aspx我正在使用对话框弹出窗口。在表单提交后这些对话框不起作用但他们在提交表格之前正在努力。

First Form 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

$('#arealistpage').live('pageshow', function (event) {
    $.mobile.showPageLoadingMsg();
    var serviceURL = '../ServiceScripts/FacilityWebService.asmx/GetFacilityList';

    $.ajax({
        type: "POST",
        url: serviceURL,
        data: param = "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successFunc,
        error: errorFunc
    });

    function successFunc(data, status) {

        // parse it as object
        var lankanListArray = JSON.parse(data.d);

        // creating html string
        var listString = ""; //'<ul data-role="listview" id="areaList">';
        var htmlList = "";

        // running a loop
        items = [];
        $.each(lankanListArray, function (index, value) {
            items.push('<li><a href="#dialog" data-rel="dialog" data-transition="pop" data-facilityid=' + this.FacilityID + '><p>Facility: ' + this.FacilityN + '  |&nbsp;&nbsp;Description: ' + this.FacilityDescription + '</p></a><a class="deleteMe"></a></li>');

        });

        $('#areaList').empty();
        $('#areaList').append(items.join(''));
        $('#areaList').listview('refresh');
        $.mobile.hidePageLoadingMsg();

    }

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

$('#arealistpage').live('pageshow', function (event) {

    $.mobile.showPageLoadingMsg();
    var serviceURL = '../ServiceScripts/FacilityWebService.asmx/InsertFacility';

    $('#btnAdd').bind('click', function (e) {
        var Facility = $("#Facility").val();
        var Description = $("#des").val();
        // e.preventDefault();
        $.ajax({
            type: "POST",
            url: serviceURL,
            data: '{"Facility":"' + Facility + '","FacilityDescription":"' + Description + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successFunc,
            error: errorFunc
        });
    });
    function successFunc(data, status) {
        var lankanListArray = JSON.parse(data.d);

    }

    function errorFunc() {
        alert("Form Submit Error");

    }
});

Answer 1

 <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”标记解决了这个问题。在我的网络表格的上述代码行

Answer 2

作为jQuery Mobile中的拇指规则，您需要为每个yoru页面提供唯一ID。我看到你的两个页面都使用了相同的ID。更改页面的ID并更改JS文件中的相关ID。

应该可以正常工作。一切看起来都不错。检查并更新我。

更新

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

导航到新页面

所以你应该在表单提交后在你的成功函数中调用上面的方法。

Answer 3

我有类似的问题。我在特定页面的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

干杯

在jquery mobile中提交表单后，PopUp对话框无法正常工作

3 个答案: