Need to determine button clicked in a JQuery mobile popup and perform actions based thereon
- by Clifford
I am having a problem with a JQM popup. The popup has 3 buttons, and the action taken in the main program depends on which button is clicked. The code in the main program is run more than once and I am not sure why.
The simple example below uses an alert to display which button on the popup was clicked. When the popup is called the first time, it works as hoped, the 2nd time, the alert is displayed twice, the 3rd time, the alert is displayed 3 times, etc.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"/></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
<script>
function doCustomDialog(text1,button1,button2,button3,callback)
{
$("#customDialog .customDialogDesc").text(text1);
$("#customDialog .customDialogOption1").text(button1).on("click.customDialog", function(){
callback("option1");
});
$("#customDialog .customDialogOption2").text(button2).on("click.customDialog", function(){
callback("option2");
});
$("#customDialog .customDialogOption3").text(button3).on("click.customDialog", function(){
callback("option3");
});
$("#customDialog").popup("open");
}
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="content">
<INPUT type="button" id="confirm" value="Save data" />
<div data-role="popup" id="customDialog" data-title="Are you sure?" class="ui-content">
<p class ="customDialogDesc">???</p>
<a href="#" class ="customDialogOption1" data-role="button" data-theme="b" data-rel="back">Yes</a>
<a href="#" class ="customDialogOption2" data-role="button" data-theme="b" data-rel="back">No</a>
<a href="#" class ="customDialogOption3" data-role="button" data-theme="b" data-rel="back">Cancel</a>
</div>
</div>
</div>
<script>
$("#mainPage").on("pageshow", function(e) {
$("#confirm").click(function() {
doCustomDialog("A similar record already exists. Do you want to Update the existing record or Add a new record?", "Update", "Add", "Cancel",
function( returned )
{
//Do things depending on the button clicked, for now just display which button was clicked
alert(returned);
});
});
});
</script>
</body>
</html>
