问题
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");
}
});
回答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>
I solved the issue by removing rel="external" and data-ajax="false" tags. in the above line of code from my web form
回答2:
As a thumb rule in jQuery Mobile you need to have unique ID for each of yoru page. I see that you have used same ID for both your pages. Change the ID of your page and change the relevant ID in the JS file.
It should work fine. All looks ok to me. check and update me.
update
You can navigate to your new page using $.mobile.changePage('yourpage.html');
so you should call above method in your success function after form submit.
回答3:
I had a similar problem. I was adding a script outside the data-role="page" element in the html page for specific page. So my popup was not working when page was changed because JQM only renders the content inside the data-role="page" container (or inside body tag is page is not available in the html document). So I added my code in pageinit in my starting page of the application (i.e. index.html). This is how i did
$( document ).delegate("#addseat-page", "pageinit", function() {
$("#vipPopup").popup(); //vip popup
$("#popup-reservedseat").popup(); // reserved seat popup
});
It worked for me.
Reference : http://jquerymobile.com/demos/1.2.1/docs/pages/page-scripting.html
Cheers
来源：https://stackoverflow.com/questions/15261618/popup-dialogs-not-working-after-form-submit-in-jquery-mobile