Мобильный диалог jquery с ajaxenabled = false

Question

Я работаю над сайтом jQuery Mobile, но мы не используем переходы AJAX (у нас $.mobile.ajaxEnabled = false для всего сайта).

У меня есть страница, которую я хотел бы обработатьоднако, как и в случае с диалоговым окном, это работает только при включенном AJAX.

Кто-нибудь нашел способ заставить jQuery Mobile обрабатывать страницу как диалог таким образом, чтобы просто проектировать страницу, которая выглядит как диалог

Answer 1

Каркас jQuery Mobile отображает первый элемент data-role="page", найденный в документе, он пропускает элементы data-role="dialog", поэтому вы не можете позволить первой псевдостранице в документе быть диалогом (диалоги пропускаются при начальной загрузке).

Однако вы можете вставить псевдостраницу в DOM вручную, а затем использовать $.mobile.changePage(), чтобы отобразить вновь вставленную страницу в виде диалога:

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

Вот демоверсия: http://jsfiddle.net/mVdVd/

Обратите внимание, что serverResponse, как ожидается, будет полностью сформированным HTML-блоком кода, который начинается с элемента data-role="dialog" (с идентификатором dialog-id).