Question

I’m working on a jQuery Mobile site but we’re not using the AJAX transitions (we have $.mobile.ajaxEnabled = false for the entire site).

I have a page that I would like to be treated like a dialog however, this only appears to work with AJAX enabled.

Has anyone found a way to get jQuery Mobile to treat a page like a dialog in this way short of just designing a page that looks like a dialog?

Answer 1

The jQuery Mobile framework displays the first data-role="page" element found in the document, it skips data-role="dialog" elements so you cannot let the first pseudo-page in a document be a dialog (dialogs are skipped on the initial load).

You can however insert a pseudo-page into the DOM manually and then use $.mobile.changePage() to show the newly inserted page as a dialog:

//bind a `click` event handler to a link (to open the dialog)
$('#some-link-id').bind('click', function (event) {

    //prevent the default behavior of the link (an href of '#' would try to scroll to the top of the page, we want to prevent that behavior)
    event.preventDefault();

    //now to get the HTML to add to the DOM for the new dialog, for demonstration purposes I set the URL of the AJAX request to the `href` attribute of the link clicked
    $.get(this.href, function (serverResponse) {

        //append the server response to the `body` element, this should be a `data-role="dialog"` element and it's contents
        $('body').append(serverResponse);

        //now that the new dialog is appeneded to the DOM, transition to it using it's ID as a reference
        $.mobile.changePage($('#dialog-id'), { role : 'dialog' });
    });
});

Here is a demo: http://jsfiddle.net/mVdVd/

Note that serverResponse is expected to be a fully formed HTML code-block that starts with a data-role="dialog" element (that has the Id of dialog-id).