admin管理员组文章数量:1318580
I'd like to add an 'Are you sure?' confirm dialog to links on a jQuery mobile page.
Here's my code - it's straight outta the jQuery docs, all apart from the links with the confirm dialogs on them.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href=".0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src=".5.2.min.js"></script>
<script type="text/javascript" src=".0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="return confirm('Leave page?'); history.back();">Back</a><h1 id="route-header">Bar</h1><a href="#foo" onclick="return confirm('Leave page?');" class="ui-btn-right" data-icon='home'>Home</a>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
Currently the confirm dialogs have no effect :(
Anyone know how I can add these with jQuery mobile?
Thanks!
I'd like to add an 'Are you sure?' confirm dialog to links on a jQuery mobile page.
Here's my code - it's straight outta the jQuery docs, all apart from the links with the confirm dialogs on them.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery./mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery./jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery./mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="return confirm('Leave page?'); history.back();">Back</a><h1 id="route-header">Bar</h1><a href="#foo" onclick="return confirm('Leave page?');" class="ui-btn-right" data-icon='home'>Home</a>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
Currently the confirm dialogs have no effect :(
Anyone know how I can add these with jQuery mobile?
Thanks!
Share Improve this question asked Apr 26, 2011 at 21:11 simonsimon 6,11713 gold badges32 silver badges28 bronze badges2 Answers
Reset to default 4It's nicer if you give IDs or classes to your buttons and bind events to them in your jQuery ready function, or wherever you dynamically create your forms (if you do).
Assuming you give the following id attribute to the back and home buttons and remove the inline onclick attribute, add this to a script tag:
$(function(){
$('#btnBack').click(function(){
if(!confirm("Leave page?")) return false;
history.back();
});
$('#btnFoo').click(function(event){
return confirm("Leave page?");
});
});
When the back button is clicked, it only returns false if the user cancelled the operation. If they clicked ok, you DO want to execute history.back() to go back to the previous page.
On the foo link, you have to return false to avoid automatically following the hyperlink.
Also note that the confirm function is synchronous, unlike most user interactions that you do in javascript through the DOM. This means when the dialog pops up, your code execution is on hold until the user presses a button, and the function evaluates to the result of that click. This is in fact what you need in this situation.
Edit: Removed preventDefault() on @bazmegakapa's suggestion.
I was facing the same problem and just solved it now. I hope my example can help you and others having the similer problem.
<a href="javascript:delComment();" data-role="button" data-icon="false" data-mini="true" data-inline="true" data-theme="b">Delete</a>
function delComment(mentSno) {
...
// save
var nextUrl = "/deleteComment.do";
$("#frm").attr("action", nextUrl);
showConfirm("Are you sure to delete?", function() {
$("#frm").submit();
}
);
}
<div data-role="dialog" id="confirmbox">
<div data-role="header" data-icon="false">
<h1>Confirmation</h1>
</div><!-- /header -->
<div data-role="content">
<h3 id="confirmMsg">Confirmation Message</h3>
<br><p>
<center>
<a href="#" class="btnConfirmYes" data-role="button" data-icon="check" data-mini="true" data-inline="true"> Yes </a>
<a href="#" class="btnConfirmNo" data-role="button" data-rel="back" data-icon="delete" data-mini="true" data-inline="true">No</a>
</center>
</div>
function showConfirm(msg, callback) {
$("#confirmMsg").text(msg);
$("#confirmbox .btnConfirmYes").on("click.confirmbox", function() {
$("#confirmbox").dialog("close");
callback();
});
$("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) {
});
$.mobile.changePage("#confirmbox");
}
本文标签： javascriptjQuery mobile add confirm dialog to linksStack Overflow
版权声明：本文标题：javascript - jQuery mobile: add confirm dialog to links? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742046738a2417830.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论