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

问题描述

限时删除!!

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

第一个HTML表格:

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

脚本:

  $('#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(){
        警报('错误');
    }
});

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

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

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 =; //'< UL数据角色=列表视图ID =areaList>';
        变种htmlList =;        //运行一个循环
        项= [];
        $。每个(lankanListArray,功能(指数值){
            items.push('<李>< A HREF =#对话框中的数据相对=对话框中的数据转换=弹出数据facilityid ='+ this.FacilityID +'>< P>设施:+ this.FacilityN +'|&放大器; NBSP;&放大器; NBSP;描述:+ this.FacilityDescription +'&下; / p>&下; / A>&下;类别=DELETEME>&下; / A&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(){
        警报(表单提交错误);    }
});


解决方案

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

我通过删除相对=外部和数据的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的提交的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-06 20:48