jQuery Mobile Alert/Confirmation dialogs

Question

Is there a nice Sencha-like jQuery Mobile solution for Alerts and Confirmation dialogs?

Answer 1

Yes, the plugin is nice. However, if you don't need the full functionality, it's still much lighter in weight to roll your own simple dialogs. I use this:

<div data-role="dialog" id="sure" data-title="Are you sure?">
  <div data-role="content">
    <h3 class="sure-1">???</h3>
    <p class="sure-2">???</p>
    <a href="#" class="sure-do" data-role="button" data-theme="b" data-rel="back">Yes</a>
    <a href="#" data-role="button" data-theme="c" data-rel="back">No</a>
  </div>
</div>

And this:

function areYouSure(text1, text2, button, callback) {
  $("#sure .sure-1").text(text1);
  $("#sure .sure-2").text(text2);
  $("#sure .sure-do").text(button).on("click.sure", function() {
    callback();
    $(this).off("click.sure");
  });
  $.mobile.changePage("#sure");
}

You can use these wherever you need the confirmation dialog:

areYouSure("Are you sure?", "---description---", "Exit", function() {
  // user has confirmed, do stuff
});

Answer 2

This plugin for jQM will style the confirmation box with jQM styling

http://dev.jtsage.com/jQM-SimpleDialog/

EDIT : This plugin has now been supserseeded by SimpleDialog2 which can be found here:

http://dev.jtsage.com/jQM-SimpleDialog/demos2/

Answer 3

Excellent code @ Peter, but not to be generating consecutive events, it might be better to use unbind (), like this:

function areYouSure(text1, text2, button, callback) {
  $("#sure .sure-1").text(text1);
  $("#sure .sure-2").text(text2);
  $("#sure .sure-do").text(button).unbind("click.sure").on("click.sure", function() {
    callback(false);
    $(this).off("click.sure");
  });
  $.mobile.changePage("#sure");
}

Thanks!