jQuery Mobile - jQuery.ajax никогда не вызывается

Question

Я уже давно борюсь с этим. jQuery.ajax в приведенном ниже коде никогда не запускается. Я знаю, что это потому, что я использую неправильный pageinit / document.ready.

Еще одна странная вещь заключается в том, что pageLoadingMsg не становится "Laddar ...", как указано ниже, а "загружается" ...

Я попытался инициализировать вызов ajax с помощью:

Но что мне использовать? Я пробовал:

$ (function () {

$ (документ) .live ('pageinit', функция (событие) {

$ (документ) .live ('pagecreate', функция (событие) {

$ (документ) .bind ('mobileinit', функция (событие) {

$ (документ) .bind ('pageinit', функция (событие) {

Мой полный код:

 $(function() {

     var photos = {};

     $.mobile.showPageLoadingMsg("Laddar...");

     $.ajax({
             type: "get",
             url: "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
             data: ({tags: 'cat', format: 'json', tagmode: 'any'}),
             cache: false,
             dataType: "json",
             success: onSuccess,
             error: onError
     });
});


//////////////////////////////////////////////////////////////////////////
//
// Handle the returned data
//
//////////////////////////////////////////////////////////////////////////

function onSuccess(data)
{
     photos = data;
     var output = [];

     for (var i = 0, len = data.items.length; i < len; i++) {

         output.push('<li><a data-index="' + i + '" href="details.html?author='+ data.items[i].author +'&image='+ data.items[i].media.m +'"><img src="images/de.png" class="ui-li-icon">' + data.items[i].author + '</a></li>')
     };

     $('#list').append(output.join('')).listview('refresh');
     $.mobile.hidePageLoadingMsg();
}


//////////////////////////////////////////////////////////////////////////
//
// Failure for the ajax call
//
//////////////////////////////////////////////////////////////////////////

function onError(param1, param2, param3)
{
    alert(param1); alert(param2); alert(param3);
} 

Answer 1

Это потому, что jquery mobile загружает новые страницы с помощью запросов ajax, и, за исключением первой загруженной страницы, каждая дополнительная страница, загружаемая ajax, извлекает только содержимое, которое существует между первым элементом data-role = "page" "это находит.

Он не тянет в головной части или что-либо еще.Если 'data-role = "page"' не найдено, он попытается загрузить все из тегов body.

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

$('your-page-id').live('pagebeforecreate', function(){ // code to run here  });

Answer 2

Я пытался поместить свой код в

, как подсказывают ответы в теме, на которую ссылается Матеуш Возняк:

<div data-role="page" id="news">

<script type="text/javascript">
    $("#news").live('pageinit', function() {


            alert("pageinit runs");
            getData();
     });
</script>

// More html code...

</div>

И getData () определяется в разделе :

<script type="text/javascript">


    //////////////////////////////////////////////////////////////////////////
    //
    // Get data
    //
    //////////////////////////////////////////////////////////////////////////

    function getData()
    {
         var photos = {};

        alert("getData() runs");

         $.mobile.loadingMessage = "Laddar...";
         $.mobile.showPageLoadingMsg();

         $.ajax({
                 type: "get",
                 url: "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                 data: ({tags: 'cat', format: 'json', tagmode: 'any'}),
                 cache: false,
                 dataType: "json",
                 success: onSuccess,
                 error: onError
         });    
    }
</script>

Отображается первое предупреждение, но не в getData (). Я получаю сообщение об ошибке:

getData () не определено.

Но это так, вы видите какие-либо ошибки?

Решение

Ну, это странно. Поскольку он не смог найти мою функцию после того, как я позвонил в pageinit, я немного погуглил. Через некоторое время я понял, что вы должны поместить весь свой JS-код в тег . Когда я поместил свою функцию getData (), это сработало!

Может кто-нибудь объяснить, почему?

Answer 3

В jQuery mobile была ошибка, и, возможно, вы с ней столкнулись.Вот решение: Как инициализировать страницы в jquery mobile?pageinit не стреляет