3

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?

1 Answer 1

2

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).

2
  • It took me a minute to figure this out but I think it'll work! Thanks. Dec 27, 2011 at 22:20
  • @HectorScout I updated my answer with some comments in the code to hopefully make it a bit easier to understand.
    – Jasper
    Dec 27, 2011 at 22:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.