弹出对话框不工作后形式jQuery Mobile的提交 [英] PopUp Dialogs not working after form submit in jquery mobile

查看：280
本文介绍了弹出对话框不工作后形式jQuery Mobile的提交的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在做一个简单的表格submit.On形式提交，我有表单动作=Facility.aspx。对Facility.aspx我使用对话框popups.after形式提交这些对话不工作，但他们提交表单前都在工作。

第一个HTML表格：<​​/ STRONG> 

 ＆LT; HTML和GT;
    ＆LT; HEAD＆GT;
    ＆LT;标题＆GT;设施及LT; /标题＆GT;
    ＆LT;链接rel =stylesheet属性HREF =HTTP：//$c$c.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css/＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.8.2.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;＆LT; D​​IV数据角色=页面ID =arealistpage＆GT;  ＆LT; D​​IV数据角色=头的数据主题=B＆GT;
      ＆LT; A HREF =Facility.aspx级=UI-BTN-左UI的BTN-回数据图标='箭头L'相对=外部＆GT;返回＆LT; / A＆GT;
   ＆LT; / DIV＆GT;＆LT;！ -  /头 - ＆GT;    ＆LT; D​​IV数据角色=内容＆GT;
  ＆LT;表ID =Form1的方法=后＆GT;
    ＆LT; D​​IV ID =AreaNoDiv数据角色=fieldcontain级=字段＆GT;
        ＆LT;标签=设施GT＆;基金* LT; /标签＆gt;
        ＆LT;输入ID =设施NAME =shipNo_r类型=文本要求/＆GT;
    ＆LT; / DIV＆GT;     ＆LT; D​​IV ID =desDiv数据角色=fieldcontain级=字段＆GT;        ＆LT;标签=DESID =Label1的NAME =fnameLabel＆GT;简介* LT; /标签＆gt;
        ＆LT;输入ID =DESNAME =fname_r类型=文本要求/＆GT;    ＆LT; / DIV＆GT;
     ＆LT; D​​IV ID =submitDiv数据角色=fieldcontain的风格=宽度：30％＆GT;
     ＆LT;按钮类=btnLogin数据主题=B类型=提交ID ='mysubmit'＆GT;提交＆LT; /按钮＆GT;
    ＆LT; / DIV＆GT;    ＆LT; /表及GT;    ＆LT; / DIV＆GT;＆LT;！ -  /内容 - ＆GT;    ＆LT; D​​IV数据角色=页脚数据主题=b的数据位=固定＆GT;            ＆LT; D​​IV数据角色=导航栏＆GT;
            ＆LT; UL＆GT;               ＆LT;李＆GT;＆LT; A HREF =数据角色=选项卡中的数据图标=箭头U级=returnTopAction＆GT;顶＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT; / UL＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT;！ -  /页 - ＆GT;
＆LT;脚本SRC =Submitscript.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

脚本： 

  $（'＃arealistpage'）。生活（pageshow'，函数（事件）{
VAR的serviceURL ='Service1.asmx的/ SubmitList';
    $（'＃mysubmit'）。绑定（'点击'，功能（E）{
            $阿贾克斯（{
            键入：POST，
            网址：serviceURL中，
            数据：{名：'+名字+'}
            的contentType：应用/ JSON的;字符集= UTF-8，
            数据类型：JSON
            成功：successFunc，
            错误：errorFunc
        }）;
    }）;    功能successFunc（数据，状态）{        //解析为研究对象
       // VAR outStr = JSON.parse（data.d）;
       //警报（outStr）;
    }    功能errorFunc（）{
        警报（'错误'）;
    }
}）;

我的第二个从哪里对话框没有工作表单提交后。 

 ＆LT; HTML和GT;
    ＆LT; HEAD＆GT;
    ＆LT;标题＆GT;设施及LT; /标题＆GT;
    ＆LT;链接rel =stylesheet属性HREF =HTTP：//$c$c.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css/＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.8.2.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js＆GT;＆下; /脚本＆GT;
 ＆LT;脚本类型=文/ JavaScript的＆GT;
     $（'＃arealistpage'）。生活（pageshow'，函数（事件）{
         $（'DIV [ID =primaryList] UL [数据角色=列表视图]一'）。绑定（点击，函数（）{
             VAR facilityid = $（本）。数据（facilityid）;
             sessionStorage.facilityid = facilityid;
            }）;
     }）;
＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体GT;＆LT; D​​IV数据角色=页面ID =arealistpage＆GT;  ＆LT; D​​IV数据角色=头的数据主题=B＆GT;
        ＆所述; H1＆GT;＆下;一个名称=顶＆GT;＆下; / A＆GT;设施及下; / H1＆GT;
       LT＆; A HREF =../ MenuePages / Dictionaries.aspx级=UI-BTN-左UI的BTN-回数据图标='箭头L'相对=外部＆GT;返回＆LT; / A＆GT;
   ＆LT; A HREF =AddFacility.aspx数据角色=按钮数据图标=加数据主题=d的风格=浮动：左;相对=外部数据过渡=幻灯片数据AJAX =假＆gt;添加＆LT; / A＆GT;
    ＆LT; / DIV＆GT;＆LT;！ -  /头 - ＆GT;    ＆LT; D​​IV数据角色=内容＆GT;
     ＆LT; D​​IV ID =primaryList＆GT;
    ＆LT; UL数据角色=列表视图数据插入=真正的数据主题=C数据过滤器=真正的ID =areaList数据分割图标=齿轮的数据分割主题=D＆GT;    ＆LT; / UL＆GT;        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;＆LT;！ -  /内容 - ＆GT;    ＆LT; D​​IV数据角色=页脚数据主题=b的数据位=固定＆GT;            ＆LT; D​​IV数据角色=导航栏＆GT;
            ＆LT; UL＆GT;               ＆LT;李＆GT;＆LT; A HREF =数据角色=选项卡中的数据图标=箭头U级=returnTopAction＆GT;顶＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT; / UL＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
   ＆LT;脚本SRC =FacilityScript.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;＆LT; / DIV＆GT;＆LT;！ -  /页 - ＆GT;
  ＆LT; D​​IV数据角色=页面ID =对话＆GT;
  ＆LT; D​​IV数据角色=头的数据主题=B＆GT;
    ＆LT; H1＆gt;选项＆LT; / H1＆GT;
  ＆LT; / DIV＆GT;
 ＆LT; UL数据角色=列表视图数据插入=假
                数据主题=C＆GT;
               ＆LT;李数据图标=false的＆GT;＆LT; A HREF =UpdateFacility.aspx数据AJAX =假＆gt;编辑＆LT; / A＆GT;＆LT; /李＆GT;              ＆LT;李数据图标=false的＆GT;＆LT; A HREF =＃divMsg数据相对=对话框中的数据转换=啪＆GT;删除＆LT; / A＆GT;＆LT; /李＆GT;            ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV数据角色=页面ID =divMsg＆GT;
  ＆LT; D​​IV数据角色=头的数据主题=B＆GT;
    ＆LT; H1＆GT;确认和LT; / H1＆GT;
  ＆LT; / DIV＆GT;  ＆LT; D​​IV数据角色=内容＆GT;
  ＆LT; A HREF =Facility.aspx的onclick =DeleteFacility（）;返回true数据角色=按钮数据AJAX =false的＆GT;删除记录＆LT; / A＆GT;
  ＆LT; / DIV＆GT;
   ＆LT;脚本SRC =FacilityScript.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

Facility.js 

  $（'＃arealistpage'）。生活（pageshow'，函数（事件）{
    $ .mobile.showPageLoadingMsg（）;
    VAR的serviceURL ='../ServiceScripts/FacilityWebService.asmx/GetFacilityList';    $阿贾克斯（{
        键入：POST，
        网址：serviceURL中，
        数据：参数=，
        的contentType：应用/ JSON的;字符集= UTF-8，
        数据类型：JSON
        成功：successFunc，
        错误：errorFunc
    }）;    功能successFunc（数据，状态）{        //解析为研究对象
        VAR lankanListArray = JSON.parse（data.d）;        //创建HTML字符串
        变种listString =; //'＆LT; UL数据角色=列表视图ID =areaList＆GT;';
        变种htmlList =;        //运行一个循环
        项= [];
        $。每个（lankanListArray，功能（指数值）{
            items.push（'＆LT;李＆GT;＆LT; A HREF =＃对话框中的数据相对=对话框中的数据转换=弹出数据facilityid ='+ this.FacilityID +'＆GT;＆LT; P＆GT;设施：+ this.FacilityN +'|＆放大器; NBSP;＆放大器; NBSP;描述：+ this.FacilityDescription +'＆下; / p＆GT;＆下; / A＆GT;＆下;类别=DELETEME＆GT;＆下; / A＆GT ;＆LT; /李＆GT;'）;        }）;        $（'＃areaList'）空（）;
        $（'＃areaList'）追加（items.join（''））;
        $（'＃areaList'）的ListView（'刷新'）;
        $ .mobile.hidePageLoadingMsg（）;    }    功能errorFunc（）{
        警报（'错误'）;
    }
}）;$（'＃arealistpage'）。生活（pageshow'，函数（事件）{    $ .mobile.showPageLoadingMsg（）;
    VAR的serviceURL ='../ServiceScripts/FacilityWebService.asmx/InsertFacility';    $（'＃btnAdd'）。绑定（'点击'，功能（E）{
        VAR设施= $（＃设施）VAL（）。
        。Var描述= $（＃德）VAL（）;
        //ËpreventDefault（）;
        $阿贾克斯（{
            键入：POST，
            网址：serviceURL中，
            数据：{设施：'+设施+'，FacilityDescription：'+说明+'}
            的contentType：应用/ JSON的;字符集= UTF-8，
            数据类型：JSON
            成功：successFunc，
            错误：errorFunc
        }）;
    }）;
    功能successFunc（数据，状态）{
        VAR lankanListArray = JSON.parse（data.d）;    }    功能errorFunc（）{
        警报（表单提交错误）;    }
}）;


解决方案

 ＆LT; A HREF =AddFacility.aspx数据角色=按钮数据图标=加数据主题=d的风格=浮动：左;相对=外部数据过渡=幻灯片数据AJAX =假＆gt;添加＆LT; / A＆GT;

我通过删除相对=外部和数据的ajax =false的标签解决的问题。从我的Web表单code以上行

I'm doing a simple form submit.On the form submit i have the form action="Facility.aspx".on Facility.aspx i'm using dialog popups.after the form submit those dialogs are not working but they are working before submitting the form.

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>

Script:

$('#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');
    }
});

My Second From where the dialogs are not working after form submit.

<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");

    }
});

解决方案 

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

I solved the issue by removing rel="external" and data-ajax="false" tags. in the above line of code from my web form

这篇关于弹出对话框不工作后形式jQuery Mobile的提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆