Как использовать PJAX? (PJAX с PHP?)

Я пытался заставить PJAX работать с моим PHP-сайтом, это код, который я использую для него:

<script src="js/jquery.js"></script> 
<script src="js/jquery.pjax.js"></script>
    <script type="text/javascript">
        $(function(){
            // pjax
            $('ul a').pjax('section')
        })
    </script>

Я просто использую код, который они использовали на демонстрационной странице PJAX, но заменяю используемый ими контейнер (#main) контейнером для моего сайта, который был тегом раздела. Ни в консоли, ни на странице ошибок нет, но и не работает! Прежде чем я использовал

$(function() { $('ul a').pjax('section') }); и

$('document').ready(function(){
   $('ul a').pjax('section')
});

Но когда я не использую ни один из них, а просто использую $('ul a').pjax('section') я вижу эту ошибку в консоли:

Необработанный контейнер pjax для раздела в jquery.pjax.js (строка: 353)

Могу ли я получить некоторую помощь с этим? Спасибо


php jquery ajax pushstate pjax
person user1302430    schedule 04.04.2012    source источник
comment
На вашей странице есть тег <section>? Ваш сервер возвращает контент без хрома при отправке заголовка X-PJAX или параметра поиска _pjax? Можете ли вы дать ссылку на демонстрационный URL?   -  person Sean Hogan    schedule 04.04.2012
comment
На самом деле я не смог загрузить материал PHP, но я попробовал то же самое с простыми простыми файлами html, но все равно то же самое. Вы можете увидеть это здесь: sbtest.comoj.com   -  person user1302430    schedule 05.04.2012
comment
На этом тестовом сайте замените вызов pjax на $(function() { $('ul a').pjax("#main", { fragment: "#main" }); });. Или сделайте звонок внизу страницы.   -  person Sean Hogan    schedule 05.04.2012
comment
@Sean Hogan Большое спасибо! Теперь он работает отлично!   -  person user1302430    schedule 05.04.2012
comment
Я опубликовал ответ, соответствующий нашей отладке. Если вы считаете это правильным, пожалуйста, примите его.   -  person Sean Hogan    schedule 05.04.2012
comment
Я успешно использую instaclick, это здорово для PJAX - instantclick.io   -  person vsync    schedule 10.09.2014

Ответы (1)


arrow_upward
10
arrow_downward

По умолчанию pjax ожидает, что новые страницы будут доставляться без chrome — фрагмента HTML, который будет использоваться как innerHTML контейнера.

Я полагаю, что в вашем примере контейнер будет первым тегом <section>. Я не знаю, гарантирует ли pjax, что он будет использовать первый элемент, соответствующий селектору - он может просто заменить каждый соответствующий элемент. Вероятно, было бы лучше использовать селектор ID, например #main.

В любом случае, похоже, что вы доставляли не фрагменты HTML, а всю страницу. Это почти противоречит назначению pjax, но его можно поддержать, указав фрагмент в загружаемом содержимом. Почти всегда это будет селектор, соответствующий заменяемому контейнеру.

Итак, если вы используете контейнер с @id=main, вы можете вызвать pjax с помощью

$(function() { $("ul a").pjax("#main", { fragment: "#main" }); });

Убедитесь, что pjax вызывается после загрузки документа, иначе поиск контейнера завершится ошибкой.

Кстати, более простой способ переключиться на навигацию с помощью pushState — это мой проект HTMLDecor. Это требует, чтобы вы изменили свою точку зрения на создание HTML-страниц, но как только вы это сделаете, вам просто нужно добавить сценарий HTMLDecor.js на свои страницы, и pushState будет использоваться автоматически, когда это необходимо — конфигурация не требуется.

person Sean Hogan    schedule 05.04.2012