jquerymobile и AJAX - PullRequest
Новая
       1

jquerymobile и AJAX

2 голосов
/ 10 ноября 2011

мне кажется, что я не полностью понял концепцию jquerymobile, потому что не знаю, как решить эту проблему.

Я хочу загрузить HTML-контент через AJAX в соответствии с location.hash, поместить его на новую страницу и загрузить эту страницу.

Но если я сам создаю страницу, используя событие pagebeforechange, jquerymobile просто игнорирует ее, создает свой собственный div и мой контент не будет отображаться.

Как мне это сделать?

Edit: Вот как я сейчас это делаю, но это не сработает. 

$(function() {

    getPageContent(top.location.href, false);

    $(document).bind( "pagebeforechange", function( e, data ) {

            getPageContent(data.toPage, true);
    });


});



function getPageContent(pageUrl, changedPage) {

    var re = /.*\/#(.*)/;
    var result;


    result = re.exec(pageUrl);


    window.page = result[1].substr(0,3);
    window.id = result[1].substr(3);



    window.ajaxUrl = "request.php?page="+window.page+"&id="+window.id;

    $.ajax({

        url: window.ajaxUrl,

        success: function(data) {

            if(data.error) {
                alert(data.error);
            }
            else if(data.data) {
                if(changedPage) {
                    changePage(data.data));
                }
                else {
                    $('#content[role="main"]').html(atob(data.data));
                    setupPage();
                }

            }
            else {
                alert("UNKNOWN ERROR: "+data);
            }       
        }

    });

}

function changePage(html) {


    var div = "<div></div>";

    var newPage = $(div).attr("data-role", "page").attr("data-url", window.page+window.id);

    var header = $(div).attr("data-role", "header");
    var content = $(div).attr("data-role", "content");
    var footer = $(div).attr("data-role", "footer");

    $("body").append(newPage);
    newPage.append(header, content, footer);

    content.html(html);

    newPage.page();
}

Ответы [ 3 ]

1 голос
/ 10 ноября 2011

Завершите редактирование всего ответа:

Сначала.Установите идентификатор вашего тела на id=body.Затем, когда вы хотите загрузить новую страницу и перейти на нее, используйте ajax-вызов, подобный следующему: 

$.get(window.ajaxUrl, function(data){
    $('#body').append("<div id='newPage' data-role='page'></div>"); //Creates a new page.
    $('#newPage').html(data); //Loads the html content into the new page.
    $.mobile.changePage('#newPage'); //Navigates to the new page.
}

. Это отправляет ajax-вызов с методом GET на URL-адрес, найденный в вашем window.ajaxUrl.Если вызов успешен, он создает новую страницу с именем «newPage» и заполняет ее данными, полученными от вызова ajax.Затем перенаправляет на вновь созданную страницу.

Этот jsFiddle показывает основы того, как это работает.Однако он не использует ajax-вызов.

0 голосов
/ 03 июня 2012

Он делает это для вас автоматически - просто сделайте обычную ссылку на страницу, и jquery mobile покажет загрузочный счетчик, загрузит его в фоновом режиме через ajax, а затем перейдет на новую страницу.

Убедитесь, чтовсе ваши страницы определяются с уникальными идентификаторами и data-role = 'page'.Ознакомьтесь с руководством по началу работы здесь: http://jquerymobile.com/demos/1.1.0/docs/about/getting-started.html

0 голосов
/ 10 ноября 2011

Вы должны обновить страницу с помощью jQueryMobile: 

 $("#your-page").trigger("create");

- Изменить 

<script> 
     $("#thepage").live("pageshow", function(){
        $("#thepage).trigger("create");
       });
</script>

Изменить содержимое #thepage перед событием 'pageshow'

...