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");
}