диалог jquery mobile с ajaxenabled = false

Question

Я работаю над мобильным сайтом jQuery, но мы не используем переходы 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).