如何在页面之间导航后停止 jquery 移动设备中的重复数据
How to stop duplicate data in jquery mobile after navigationg between pages
我正在 jQuery 创建一个聊天应用程序 Mobile.The 问题是,当您在页面之间导航并在提交数据时返回聊天页面时,数据会根据次数重新发送一个在其他页面之间导航
当我执行整页刷新时,数据只按要求发送一次。
我已经尝试将 data-ajax = false
添加到 link(按钮)的 href
,但仍然不起作用?
html代码:
<form id="form_message_user" method="post"
action="#user_requestmoreinfo_page
">
<div data-inset="true">
<label for="requestmessage" class="ui-hidden-accessible"></label>
<textarea cols="40" rows="6" name="requestmessage"
id="text_user_message" placeholder="Type message to send "></textarea>
</div>
<input type="submit" value="submit" id="submitmessage" />
</form>
表单在
的页面上
<div data-role="page" id="user_requestmoreinfo_page" data-theme="e">
提交代码:
$(document).on('pageshow', '#user_requestmoreinfo_page',function(e){
var id_from = localStorage.loggedin_id;
var id_to = localStorage.user_schoolls_id;
var message = $("#text_user_message").val();
$('#form_message_user').on('submit', function(e){
e.preventDefault();
if(message > 0 ){
// Send data to server through the Ajax call
// action is functionality we want to call and outputJSON is our data
$.ajax({url: '127.0.0.1/php/send.php',
data: {message:message,id_from:id_from,id_to:id_to},
type: 'post',
async: 'true',
dataType: 'json',
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function (result) {
console.log(result);
},
error: function (error) {
// This callback function will trigger on unsuccessful action
console.log(error);
}
});
} else {
alert('Please enter the message');
}
return false; // cancel original event to prevent form submitting
});
});
成功时console.log()根据到达页面前的页面导航次数显示json数据(#user_requestmoreinfo_page);
示例:
如果我必须在其他页面之间导航 3 次 console.log() 将显示 3 次的输出
我的猜测是,每次处理#user_requestmoreinfo_page 事件时,您都将事件处理程序绑定到#form_message_user 元素。我会尝试添加
$('#form_message_user').off('submit');
就在
之前
$('#form_message_user').on('submit', function(e){
// function body continues
您也可以尝试使用 .one:
$('#form_message_user').one('submit', function(e){
// function body continues
根据文档,这应该与 .off() 后跟 .on() 具有相同的效果:
我能想到您遇到这种行为的两个原因。
1) 代码乘法。将代码绑定到pagecreate
,而不是pageshow
,因为每次显示页面都会触发后一个事件,重复提交代码并导致多个事件。
2) 页面重复。这是 jQM 中的一个众所周知的错误,描述为 here。简而言之,第一页(及其表格)在某些情况下会在 DOM 中重复。要修复它,请使用属性 data-url
描述 HTML 文档的路径,并将其放在 page div
中。示例代码:
<div data-role="page" data-url="mysite/path/index.html" id="user_requestmoreinfo_page">
这是对您的代码进行的修改,添加了用于页面导航的按钮:
示例代码:
$(document).on('pagecreate', '#user_requestmoreinfo_page', function(e) {
$('#form_message_user').on('submit', function(e) {
//Cancel default action (https://api.jquery.com/event.preventdefault/)
e.preventDefault();
//var id_from = localStorage.loggedin_id;
//var id_to = localStorage.user_schoolls_id;
var message = $("#text_user_message").val();
//Validate
if(message == "")
alert('Please enter the message');
// Send data to server through the Ajax call
// action is functionality we want to call and outputJSON is our data
alert("Thank you for your comment.");
$.ajax({
url: '127.0.0.1/php/send.php',
data: {
message: message,
id_from: id_from,
id_to: id_to
},
type: 'post',
async: 'true', //<- true is default
dataType: 'json',
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function(result) {
console.log(result);
},
error: function(error) {
// This callback function will trigger on unsuccessful action
console.log(error);
}
});
return false; // cancel original event to prevent form submitting
});
});
<html>
<head>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-url="<mysite>/index.html" id="user_requestmoreinfo_page">
<div data-role="content">
<form id="form_message_user" data-ajax="false">
<label for="requestmessage">Message:</label>
<textarea data-inline="true" id="text_user_message" placeholder="Type message to send"></textarea>
<input type="submit" value="Submit" data-inline="true" />
</form>
<a href="#second" data-role="button" data-inline="true">Next page</a>
</div>
</div>
<div data-role="page" id="second">
<div data-role="content">
<p>
Second page
</p>
<a href="#user_requestmoreinfo_page" data-role="button" data-inline="true">First</a>
<a href="#third" data-role="button" data-inline="true">Third</a>
</div>
</div>
<div data-role="page" id="third">
<div data-role="content">
<p>
Third page
</p>
<a href="#user_requestmoreinfo_page" data-role="button" data-inline="true">First</a>
</div>
</div>
</body>
</html>
我正在 jQuery 创建一个聊天应用程序 Mobile.The 问题是,当您在页面之间导航并在提交数据时返回聊天页面时,数据会根据次数重新发送一个在其他页面之间导航
当我执行整页刷新时,数据只按要求发送一次。
我已经尝试将 data-ajax = false
添加到 link(按钮)的 href
,但仍然不起作用?
html代码:
<form id="form_message_user" method="post"
action="#user_requestmoreinfo_page
">
<div data-inset="true">
<label for="requestmessage" class="ui-hidden-accessible"></label>
<textarea cols="40" rows="6" name="requestmessage"
id="text_user_message" placeholder="Type message to send "></textarea>
</div>
<input type="submit" value="submit" id="submitmessage" />
</form>
表单在
的页面上<div data-role="page" id="user_requestmoreinfo_page" data-theme="e">
提交代码:
$(document).on('pageshow', '#user_requestmoreinfo_page',function(e){
var id_from = localStorage.loggedin_id;
var id_to = localStorage.user_schoolls_id;
var message = $("#text_user_message").val();
$('#form_message_user').on('submit', function(e){
e.preventDefault();
if(message > 0 ){
// Send data to server through the Ajax call
// action is functionality we want to call and outputJSON is our data
$.ajax({url: '127.0.0.1/php/send.php',
data: {message:message,id_from:id_from,id_to:id_to},
type: 'post',
async: 'true',
dataType: 'json',
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function (result) {
console.log(result);
},
error: function (error) {
// This callback function will trigger on unsuccessful action
console.log(error);
}
});
} else {
alert('Please enter the message');
}
return false; // cancel original event to prevent form submitting
});
});
成功时console.log()根据到达页面前的页面导航次数显示json数据(#user_requestmoreinfo_page);
示例:
如果我必须在其他页面之间导航 3 次 console.log() 将显示 3 次的输出
我的猜测是,每次处理#user_requestmoreinfo_page 事件时,您都将事件处理程序绑定到#form_message_user 元素。我会尝试添加
$('#form_message_user').off('submit');
就在
之前$('#form_message_user').on('submit', function(e){
// function body continues
您也可以尝试使用 .one:
$('#form_message_user').one('submit', function(e){
// function body continues
根据文档,这应该与 .off() 后跟 .on() 具有相同的效果:
我能想到您遇到这种行为的两个原因。
1) 代码乘法。将代码绑定到pagecreate
,而不是pageshow
,因为每次显示页面都会触发后一个事件,重复提交代码并导致多个事件。
2) 页面重复。这是 jQM 中的一个众所周知的错误,描述为 here。简而言之,第一页(及其表格)在某些情况下会在 DOM 中重复。要修复它,请使用属性 data-url
描述 HTML 文档的路径,并将其放在 page div
中。示例代码:
<div data-role="page" data-url="mysite/path/index.html" id="user_requestmoreinfo_page">
这是对您的代码进行的修改,添加了用于页面导航的按钮:
示例代码:
$(document).on('pagecreate', '#user_requestmoreinfo_page', function(e) {
$('#form_message_user').on('submit', function(e) {
//Cancel default action (https://api.jquery.com/event.preventdefault/)
e.preventDefault();
//var id_from = localStorage.loggedin_id;
//var id_to = localStorage.user_schoolls_id;
var message = $("#text_user_message").val();
//Validate
if(message == "")
alert('Please enter the message');
// Send data to server through the Ajax call
// action is functionality we want to call and outputJSON is our data
alert("Thank you for your comment.");
$.ajax({
url: '127.0.0.1/php/send.php',
data: {
message: message,
id_from: id_from,
id_to: id_to
},
type: 'post',
async: 'true', //<- true is default
dataType: 'json',
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function(result) {
console.log(result);
},
error: function(error) {
// This callback function will trigger on unsuccessful action
console.log(error);
}
});
return false; // cancel original event to prevent form submitting
});
});
<html>
<head>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-url="<mysite>/index.html" id="user_requestmoreinfo_page">
<div data-role="content">
<form id="form_message_user" data-ajax="false">
<label for="requestmessage">Message:</label>
<textarea data-inline="true" id="text_user_message" placeholder="Type message to send"></textarea>
<input type="submit" value="Submit" data-inline="true" />
</form>
<a href="#second" data-role="button" data-inline="true">Next page</a>
</div>
</div>
<div data-role="page" id="second">
<div data-role="content">
<p>
Second page
</p>
<a href="#user_requestmoreinfo_page" data-role="button" data-inline="true">First</a>
<a href="#third" data-role="button" data-inline="true">Third</a>
</div>
</div>
<div data-role="page" id="third">
<div data-role="content">
<p>
Third page
</p>
<a href="#user_requestmoreinfo_page" data-role="button" data-inline="true">First</a>
</div>
</div>
</body>
</html>