jQuery мобильный AJAX не загружается - PullRequest
Новая
       0

jQuery мобильный AJAX не загружается

0 голосов
/ 30 августа 2011

Я должен пропустить очень простую вещь здесь, потому что это кажется настолько очевидным ... и я не могу поверить, что я не могу найти что-либо в Интернете для этого!

Я пытаюсь использовать мобильную библиотеку jQuery для мобильного просмотра моего веб-сайта.

У меня есть три страницы (data-роль) на моей странице. Два со статическим контентом и второй с контентом я хочу загрузить с помощью ajax. На главной странице есть ссылка на две другие страницы: 

<div data-role="page" id="home">
    <div data-role="header" id="header">
        <h1>the header</h1>
    </div>
    <div data-role="content">
        <a href="http://absolutepathtomyserver/homepage#highlights" data-role="button">highlights</a>
        <a href="http://absolutepathtomyserver/updatePlaylistTemplate#playlist" data-role="button" rel="external">playlist</a>
    </div>
</div>

<div data-role="page" id="highlights">
    <div data-role="content">
        <p class="center">My static content</p>
    </div>
</div>

<div data-role="page" id="playlist">
    <div data-role="content"><!-- TO BE FILLED FROM AJAX! --></div>
</div>

Из моего понимания многих учебных пособий, которые я прочитал, по умолчанию все ссылки href выполняют вызов ajax, если не указано иное, но он не работает. Когда я нажимаю на ссылку выделения, страница скользит, как и ожидалось, без загрузки какой-либо другой страницы, поскольку это та же страница. Здесь все хорошо. Но когда я нажимаю на страницу списка воспроизведения, анимация слайда выполняется, но вызов ajax никогда не выполняется, поэтому содержимое списка воспроизведения никогда не заполняется. Обратите внимание, что я отслеживаю сетевые вызовы, но при нажатии на ссылку они не совершаются.

Что я пропустил?

Это мой абсолютный вызов? Я использую базовый URL-адрес тега для статического содержимого, поэтому ссылки должны быть абсолютными во всем приложении.

Нужно ли использовать метод .bind?

Нужно ли делать вызов ajax вручную? Я могу это сделать, но из того, что я прочитал, кажется, что это родная ссылка href в мобильном расширении ...

Ответы [ 2 ]

3 голосов
/ 30 августа 2011

Обработка ajax-ссылок в jQuery Mobile применяется к псевдостраничным страницам, которые еще не указаны в вашем документе.Если вы хотите ajax-загрузить страницу по ссылке на псевдостранице home, тогда пропустите псевдостраницу playlist из документа.jQuery Mobile перейдет по URL-адресу, указанному в ссылке, захватит весь контент в элементе data-role="page", автоматически добавит его в домен и перейдет на вновь добавленную страницу.

Другой способ - загрузить данные.через вызов ajax, когда страница playlist отображается следующим образом: 

$('#playlist').bind('pageshow', function () {
    $.get('url_to/get.php', function (data) {
        $('#playlist').find('[data-role="content"]').html(data);
    });
});

Приведенный выше пример перезагружает HTML-код в элементе data-role="content" внутри псевдостраницы playlist каждый раз, когда она отображается.Вы можете поочередно использовать pagecreate или одно из других jQuery Mobile событий .

1 голос
/ 31 августа 2011

Вариант 2 с небольшим количеством настроек.Я не знаю почему, но как есть, функция обратного вызова в вашем коде кажется слишком быстрой, потому что контент не заполняется, хотя контент берется из серверной части.Я вижу вызов в моем сетевом инспекторе.Кроме того, во втором селекторе отсутствовали символы "."Я также боюсь, что, выполняя мой ajax-вызов вручную, я пропущу спиннер по умолчанию в мобильной среде jquery.В местном масштабе это слишком быстро, я все равно не вижу.

...