Dynamically create popup/dialog jquerymobile

Posted: October 7, 2013 in web

How to call it:

var xhr = $.ajax({
        type: context.type,
        url: context.url,
        data: context.data ? JSON.stringify(context.data) : '',
        contentType: ajaxContentType,
        timeout: context.timeout ? context.timeout : ajaxTimeOut,
        beforeSend: function(request) {
            $.mobile.loading('show');
        },
        complete: function() {
            $.mobile.loading('hide');
        },
        success: context.callback,
        error: function(xhr, ajaxOptions, thrownError) {
            obj = jQuery.parseJSON(xhr.responseText);
            showPopup({title: "Login Error", message: obj.message, buttonText: "I know!", width: "500px"});

        }
    });

Javascript file:

function showPopup(context) {
    var popup = '<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all"><div data-role="header" data-theme="a" class="ui-corner-top"><h1>Delete Page?</h1></div><div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"><h3 class="ui-title">Are you sure you want to delete this page?</h3><input value="BBB" type="button" data-theme="b" /></div></div>';
    $.mobile.activePage.append(popup).trigger("pagecreate");

    $(selectorPopupDialog + ' input[type=button]').click(function() {
        $(selectorPopupDialog).popup('close');
    });
    if (context.width)
        $(selectorPopupDialog).width(context.width);
    if (context.title)
        $(selectorPopupDialog + ' h1').html(context.title);
    if (context.message)
        $(selectorPopupDialog + ' h3').html(context.message);
    if (context.buttonText) {
        $(selectorPopupDialog + ' input').val(context.buttonText).button('refresh');
    }
    $(selectorPopupDialog).popup("open");
    $(document).on("popupafterclose", ".ui-popup", function() {
        $(this).remove();
    });
}
Advertisements
Comments
  1. Not working. Also selectorPopupDialog is not defined so I tried with var selectorPopupDialog = ‘#popupDialog’; but still no luck.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s