Форум Сайтостроение Веб-строительство

Рожаю AJAX-пагинацию средствами JQuery для WP. Тяжелые схватки - помогите!

artalex
На сайте с 08.12.2005
Offline
144
artalex
5877

Всех приветствую!

Идея - сделать "пагинацию" в WP как сейчас стало "популярно" и "вебдванольно" - т.е. "подгружать" очередную порцию записей без перезагрузки, внизу тех, что уже выведены на странице...

Итак, есть, есть цикл, который выводит записи (он помещен в <div> с классом ".to_navigation"), и ниже - кнопка "Показать еще" 

<div class="to_navigation">



<?php if (have_posts()) : while (have_posts()) : the_post(); ?>



<div>Заголовок и анонс записи</div>



<?php endwhile; else: ?>

<p>Записей не найдено...</p>

<?php endif; ?>



</div>



<div id="pagination">

<?php next_posts_link('Показать больше');?>

</div>

Идея заключается в том, чтобы по клику на ссылку "Показать больше" - динамически создать новый <div>, поместив его непосредственно перед этой кнопкой, пока грузится в него следующая "порция" записей - "покрутить" там анимашку "loading...", и затем сделать в него load() следующей страницы (а вернее, той порции ее, где выводятся записи).

Все задуманное реализовать удалось.

Привожу скрипт с камментами:


// отловил клик по "показать больше", использую livequery плагин, т.к. иначе без него, новая кнопка "показать больше" будет "не видна" в DOMе
jQuery('#pagination a').livequery('click', function(event){
// запретил переход по ссылке
event.preventDefault();
// получил в переменную ссылку на следующую страницу
var link = jQuery(this).attr('href');
// это я "сгенерил" уникальный ID для создаваемого блока (ну, такой способ выбрал...)
var now = jQuery.now();
// создаю новый <div> и присваиваю ему уникальный ID
var newdiv = document.createElement('div');
newdiv.id = now;
// помещаю этот новый <div> перед блоком с кнопкой "пагинации"
jQuery('#pagination').before(newdiv);
// пишу в него "анимашку" пока...
jQuery(newdiv).html('<img src="http://site.com/ajax-loader.gif" />');
// прячу, а затем вообще удаляю блок с кнопкой "пагинации"
jQuery('#pagination').fadeOut();
jQuery('#pagination').remove();
// загружаю в новосозданный блок новую "порцию" постов, а в callback функции я "вырезаю" блок с кнопкой "пагинации" и помещаю его после новосозданного блока
jQuery(newdiv).load(link + ' .to_navigation', function() {
var newpag = jQuery('#pagination').detach();
newpag.insertAfter(newdiv);
});
// показываю новый блок с новой "порцией" записей... при этом кнопка "Показать еще" тоже обновлена и находится "под ним"
jQuery(newdiv).fadeIn(500, function(){ });
});

...Все это красиво работает (возможно, вероятна более "красивая" реализация), но проблема у меня вот в чем:

В новых "порциях" записях, помещенных в новый блок, мне нужно "достучаться" до объектов, но они недоступны в DOMе - т.е. обращаться я к ним не могу...

Я рассчитывал, что спасет livequery, но он помог только с "кнопкой"... а те объекты, что загружались функцией load() - в DOM не попадают...

Как быть? Кто может намекнуть-подсказать?

P.S. Извиняюсь, если слишком много букав... :)

C
На сайте с 04.02.2005
Offline
291
Chukcha
#1

Вы уверены что в дом не попадают?

Если Вы их видите - они в доме.

Может они "глухие"

Как вы пытаетесь достучаться до них?

[Удален]
#2

artalex, http://www.unmedia.ru/paginator.html :)

artalex
На сайте с 08.12.2005
Offline
144
artalex
#3

Chukcha, у меня в <head> подгружается скрипт. В нем используются селекторы по css-классам, например: jQuery('.anonce')

Вывод записей в цикле такой:

<div class="anonce">Здесь анонс</div>

Так вот, "подгружаемым" функцией load() блокам <div class="anonce"> события не отлавливаются.

Оптимизация плавающих фреймов для В MyTracker появилась возможность Новый SiteAnalyzer проверит контент
C
На сайте с 04.02.2005
Offline
291
Chukcha
#4
функцией load() блокам <div class="anonce">

А должны? А с какого "препугу"

После лоад вы должны назначить загруженным блокам события

[Удален]
#5
Chukcha:
После лоад вы должны назначить загруженным блокам события

либо до загрузки и плагин livequery это позволяет сделать :)

artalex
На сайте с 08.12.2005
Offline
144
artalex
#6

Ну я рассчитывал, что если я использую livequery, то все элементы, загруженные через load() будут доступны. Но этого не происходит. И я не могу понять, почему... :(

[Удален]
#7

artalex, они доступны, вы не правильно к ним обращаетесь

$('.....').livequery(function(){что делать при нахождении соответствия},function(){что делать при прекращении соответствия});

любая функция может быть пустой, вместо первой очень часто используют события

artalex
На сайте с 08.12.2005
Offline
144
artalex
#8

Проблема была вот в чем: (инфа тут: http://api.jquery.com/load/ )

Если в load() запрашивать часть документа (использовать селектор), как в моем случае:

jQuery(newdiv).load(link + ' .to_navigation', function() {

то скрипты "are stripped out and not executed".

Если просто: jQuery(newdiv).load(link, function() { - то все было бы сразу ОК.

Проблему решил вот такой дополнительной строкой в callback функции load() 

jQuery(newdiv).load(link + ' .to_navigation', function() { 													   

	jQuery.getScript('http://site.com/my_script.js');

        и так далее...

	});

То есть подгрузил нужный скрипт после выполнения load().

Таким образом, проблема решена, спасибо всем за внимание...

WordPress 5.5 может нарушать Настройка событий Google Analytics 10 лучших практических решений
[Удален]
#9

artalex, а зачем вы вообще скрипты подгружаете, у вас задача подгрузить данные, а скрипты уже у вас есть!

я приводил вам ссылки выше на работающие примеры, и там более сложная модель работы с dom и всё прекрасно работает

Я.Метрика запустила Logs API В Pr.Sape подгрузили более Вышла обновленная версия Яндекс.Браузера
artalex
На сайте с 08.12.2005
Offline
144
artalex
#10

burunduk, спасибо за ссылочку, - скачал, разбираюсь... - там сложнее несколько

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий