Как я могу использовать бесконечную прокрутку на веб-странице, где я хочу? - PullRequest
Новая
       13

Как я могу использовать бесконечную прокрутку на веб-странице, где я хочу?

1 голос
/ 12 апреля 2011

Я использую плагин jQuery с бесконечной прокруткой для реализации функции подкачки в Twitter. Теперь, когда я нажимаю на ссылку more , запрос отправляется на сервер и дает ответ в виде HTML. Сначала я пытался использовать шаблоны jQuery, а потом я все изменил, потому что я ничего не нашел в Интернете, чтобы сделать это с помощью JSON.

Ну, теперь у меня проблема в том, что только код не добавляет ответ к существующему контенту на странице. Он просто отправляет запрос и никогда не добавляет к существующему макету документа.

Демонстрация плагина: http://www.infinite-scroll.com/trigger.html

Я хочу иметь такой код 

<div id="result">
    <ul>
        <li>
        </li>
        <li>
        </li>
        <li>
        </li>
        <li>
        </li>
    </ul>
</div>

Мне нужно, чтобы, когда пользователь нажимал на ссылку more , тогда больше 'li приходило из ответа и добавлялось к' li 'внутри результата' ul '. 

 $('#result ul').infinitescroll({
        navSelector: "a#next:last",
        // selector for the paged navigation (it will be hidden)
        nextSelector: "a#next:last",
        // selector for the NEXT link (to page 2)
        itemSelector: "#result ul"
        // selector for all items you'll retrieve
    });

    // kill scroll binding
    $(window).unbind('.infscr');

    // hook up the manual click guy.
    $('a#next').click(function () {
        $(document).trigger('retrieve.infscr');
        return false;
    });

    // remove the paginator when we're done.
    $(document).ajaxError(function (e, xhr, opt) {
    });

1 Ответ

1 голос
/ 12 апреля 2011

Вам даже не нужен плагин для этого.Это делается с помощью нескольких простых строк jQuery:

Пример: http://jsfiddle.net/6fnTT/9/

$("a").live("click", function(){
    var data = "<li style='display:none'>Text3</li>";

    $("ul").append(data);
    $("li:hidden").fadeIn('slow');
});

data может быть чем угодно (просто убедитесь, что невидимо иметьэффект затухания и вам нужно отредактировать li: hidden).Например, это может быть результатом запроса AJAX.В зависимости от типа результата (например, html или json) вам нужно будет подготовить его, чтобы он вписался в ваш html.

Если у вас возникли проблемы с ответом ajax, отправьте код.

...