本文介绍了弹出对话框不工作后形式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;< DIV数据角色=页面ID =arealistpage> < DIV数据角色=头的数据主题=B>
< A HREF =Facility.aspx级=UI-BTN-左UI的BTN-回数据图标='箭头L'相对=外部>返回< / A>
< / DIV><! - /头 - > < DIV数据角色=内容>
<表ID =Form1的方法=后>
< DIV ID =AreaNoDiv数据角色=fieldcontain级=字段>
<标签=设施GT&;基金* LT; /标签>
<输入ID =设施NAME =shipNo_r类型=文本要求/>
< / DIV> < DIV ID =desDiv数据角色=fieldcontain级=字段> <标签=DESID =Label1的NAME =fnameLabel>简介* LT; /标签>
<输入ID =DESNAME =fname_r类型=文本要求/> < / DIV>
< DIV ID =submitDiv数据角色=fieldcontain的风格=宽度:30%>
<按钮类=btnLogin数据主题=B类型=提交ID ='mysubmit'>提交< /按钮>
< / DIV> < /表及GT; < / DIV><! - /内容 - > < DIV数据角色=页脚数据主题=b的数据位=固定> < DIV数据角色=导航栏>
< 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;< DIV数据角色=页面ID =arealistpage> < DIV数据角色=头的数据主题=B>
&所述; H1>&下;一个名称=顶>&下; / A>设施及下; / H1>
LT&; A HREF =../ MenuePages / Dictionaries.aspx级=UI-BTN-左UI的BTN-回数据图标='箭头L'相对=外部>返回< / A>
< A HREF =AddFacility.aspx数据角色=按钮数据图标=加数据主题=d的风格=浮动:左;相对=外部数据过渡=幻灯片数据AJAX =假>添加< / A>
< / DIV><! - /头 - > < DIV数据角色=内容>
< DIV ID =primaryList>
< UL数据角色=列表视图数据插入=真正的数据主题=C数据过滤器=真正的ID =areaList数据分割图标=齿轮的数据分割主题=D> < / UL> < / DIV>
< / DIV><! - /内容 - > < DIV数据角色=页脚数据主题=b的数据位=固定> < DIV数据角色=导航栏>
< UL> <李>< A HREF =数据角色=选项卡中的数据图标=箭头U级=returnTopAction>顶< / A>< /李>
< / UL>
< / DIV>
< / DIV>
<脚本SRC =FacilityScript.js类型=文/ JavaScript的>< / SCRIPT>< / DIV><! - /页 - >
< DIV数据角色=页面ID =对话>
< DIV数据角色=头的数据主题=B>
< H1>选项< / H1>
< / DIV>
< UL数据角色=列表视图数据插入=假
数据主题=C>
<李数据图标=false的>< A HREF =UpdateFacility.aspx数据AJAX =假>编辑< / A>< /李> <李数据图标=false的>< A HREF =#divMsg数据相对=对话框中的数据转换=啪>删除< / A>< /李> < / UL>
< / DIV>
< DIV数据角色=页面ID =divMsg>
< DIV数据角色=头的数据主题=B>
< H1>确认和LT; / H1>
< / DIV> < DIV数据角色=内容>
< 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 + ' | 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的提交的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!