jQuery Mobile Alert/Confirmation dialogs

Question

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

Answer 1

Try,

if (confirm("Are you sure?"))
{
   /*code to execute when 'Ok' bttn selected*/
}

Answer 2

This plugin craftpip/jquery-confirm

was designed for mobile initially, is based on the bootstrap3 framework. Supports alerts, confirms, modals, dialogs, and many options.

Simple to use.

$.alert({
    title: 'title here',
    content: 'content here',
    confirm: function(){
        //on confirm
    },
    cancel: function(){
        // on cancel
    }
})

Supports ajax loading, CSS3 animations, Responsive, etc.

[EDIT] Detailed documentation can be found here

Features list:

• Themes (android themes included)
• Ajax loading content.
• CSS3 animations (2D & 3D animations)
• Animation Bounce options
• Auto close (triggers a action after timeout)
• Icons
• background dismiss (closes the modal on clicking outside the modal)
• Keyboard actions (ENTER/SPACE triggers confirm, ESC triggers cancel)
• Detailed API for programmically changing content in modal.

I'm actively developing the plugin, please do suggest improvements and features.

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!

Answer 4

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 5

I had similar problem. I wanted to have easy to use function like standard confirm().

Since dialogs are deprecated in jquery mobile 1.4 (documentation), I decided to create my own fiddle:

function confirmDialog(text, callback) {
var popupDialogId = 'popupDialog';
$('<div data-role="popup" id="' + popupDialogId + '" data-confirmed="no" data-transition="pop" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:500px;"> \
                    <div data-role="header" data-theme="a">\
                        <h1>Question</h1>\
                    </div>\
                    <div role="main" class="ui-content">\
                        <h3 class="ui-title">' + text + '</h3>\
                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionConfirm" data-rel="back">Yes</a>\
                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionCancel" data-rel="back" data-transition="flow">No</a>\
                    </div>\
                </div>')
    .appendTo($.mobile.pageContainer);
var popupDialogObj = $('#' + popupDialogId);
popupDialogObj.trigger('create');
popupDialogObj.popup({
    afterclose: function (event, ui) {
        popupDialogObj.find(".optionConfirm").first().off('click');
        var isConfirmed = popupDialogObj.attr('data-confirmed') === 'yes' ? true : false;
        $(event.target).remove();
        if (isConfirmed && callback) {
            callback();
        }
    }
});
popupDialogObj.popup('open');
popupDialogObj.find(".optionConfirm").first().on('click', function () {
    popupDialogObj.attr('data-confirmed', 'yes');
});

}

I noticed strange behavior, when redirecting/clearing window was done on "Yes" button click. It started working in afterClose event, so that's why it's a bit complicated.

Here is a jsfiddle demo

Answer 6

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