Зыбучие пески, как сделать так, чтобы динамически с AJAX загружать больше элементов, а затем фильтровать?

Question

Зыбучие пески, как сделать так, чтобы динамически с AJAX загружать больше элементов, а затем фильтровать?

0

Я взял сценарий по этой ссылке: http://mode87.com/untame/demo/filteredgallery/

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

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

жду ваших ответов

мой код здесь

index.php

<ul class="filter nav nav-pills">
    <li data-value="all">All</li>
    <li data-value="1">OPENING CEREMONIES</li>
    <li data-value="2">PRODUCT LAUNCHES</li>
    <li data-value="3"> MALL SHOWS </li>


    <li data-value="4">FAMILY FESTIVALS</li>
    <li data-value="5">CULTURAL FESTIVALS</li>
    <li data-value="6">WORLD CLASS SHOWS</li>
    <li data-value="7">SPORTS EVENTS</li>
    <li data-value="8">GALA DINNERS</li>


  </ul>


  <ul class="thumbnails" id="loading_more">
   <?php
   $_SESSION["page_load"]   =   1;
   portfolioItems($_SESSION["page_load"]);
   ?>
  </ul>



    <div class="row-fluid">
        <div class="span12 portfolio-load-more-wrapper">
            <h1><span class="caption_heading">WANT TO</span> SEE MORE?</h1>
            <h2><span class="icon-down-open-2 gray" onClick="javascript:showMore();"></span></h2>
        </div>
  </div>

При нажатии кнопки showMore():

function showMore()
    {

        var data    =       'load_more='+'load_more';
        $.ajax({

                url:'process.php',
                type:'post',
                data:data,
                success:function(html)
                {
                    $('.thumbnails').html(html);
                }
            });
    }

process.php

function portfolioItems($page_load)
    {
        if( $page_load      ==          1 )
        {
            global $con;
            $item_list          =           "";

            //Query to get the items
            $sql_item_details   =           mysqli_query($con , "SELECT * FROM portfolio_items LIMIT 4");
            $count              =           mysqli_num_rows($sql_item_details);

            //If records found
            if( $count          >           0 )
            {
                    while($row      =           mysqli_fetch_array($sql_item_details))
                    {

                        $id             =           $row["id"];
                        $title          =           $row["title"];
                        $category       =           $row["category_id"];
                        $date           =           $row["date"];
                        $detail         =           $row["detail"];
                        $thumbnail      =           $row["thumbnail"];

                        $item_list  .=          '<li data-type="'.$category.'" data-id="id-1" class="span3 fancybox fancybox.iframe portfolio-iframe" 
                                                onClick="javascript:showPortfolioDetail('.$id.');">
                                                    <img src="images/portfolios/portfolio_thumbs/'.$thumbnail.'"  width="295" height="295" border="0">

                                                    <div class="img_hover_box">
                                                        <div class="portfolio_title">
                                                            <div class="portfolio-cpation">
                                                                <h2>
                                                                    <div class="arrow_icon">
                                                                        <i class="icon-right-circled-1"></i>
                                                                    </div> 
                                                                    <span>'.$title.'</span>
                                                                </h2>
                                                            </div>
                                                        </div>
                                                    </div>

                                                   <div class="clock_year">
                                                    <span class="icon-clock-alt"></span><span class="year">'.$date.'</span>
                                                   </div>
                                                </li>';



                    }
                    echo                    $item_list;
            }
        }
        else
        {

            //Get the pagination value.
            $page_no            =           $page_load;
            $one_page           =           $page_no * 4;
            $start_from         =           $one_page - 4;
            $limit              =           4;


            global $con;
            $item_list          =           "";

            //Query to get the items
            $sql_item_details   =           mysqli_query($con , "SELECT * FROM portfolio_items LIMIT 0,".$one_page);
            $count              =           mysqli_num_rows($sql_item_details);

            //If records found
            if( $count          >           0 )
            {
                    while($row      =           mysqli_fetch_array($sql_item_details))
                    {

                        $id             =           $row["id"];
                        $title          =           $row["title"];
                        $category       =           $row["category_id"];
                        $date           =           $row["date"];
                        $detail         =           $row["detail"];
                        $thumbnail      =           $row["thumbnail"];

                        $item_list  .=          '<li data-type="'.$category.'" data-id="id-1" class="span3 fancybox fancybox.iframe portfolio-iframe" 
                                                onClick="javascript:showPortfolioDetail('.$id.');">
                                                    <img src="images/portfolios/portfolio_thumbs/'.$thumbnail.'"  width="295" height="295" border="0">

                                                    <div class="img_hover_box">
                                                        <div class="portfolio_title">
                                                            <div class="portfolio-cpation">
                                                                <h2>
                                                                    <div class="arrow_icon">
                                                                        <i class="icon-right-circled-1"></i>
                                                                    </div> 
                                                                    <span>'.$title.'</span>
                                                                </h2>
                                                            </div>
                                                        </div>
                                                    </div>

                                                   <div class="clock_year">
                                                    <span class="icon-clock-alt"></span><span class="year">'.$date.'</span>
                                                   </div>
                                                </li>';



                    }
                    echo                    $item_list;
            }

        }


    }

Saj 15 апр. 2014, в 09:48

Источник

1

Какой код вы используете для добавления элементов после загрузки ajax?
Batu.Khan 15 апр. 2014, в 07:53
0

У меня есть функция здесь: функция showMore () {var data = 'load_more =' + 'load_more'; $ .ajax ({url: 'process.php', тип: 'post', data: data, success: function (html) {$ ('. thumbnails'). html (html);}}); }
Saj 15 апр. 2014, в 07:56
0

эта функция возвращается с некоторым HTML
Saj 15 апр. 2014, в 07:58
0

Таким образом, вы не добавляете элементы, а меняете всю коллекцию миниатюр. $('.thumbnails').html(html) означает изменение $('.thumbnails').html() на html . Для добавления вам нужно использовать $('.thumbnails').append(html)
Batu.Khan 15 апр. 2014, в 08:08
0

Да, братан, я тоже это проверил, но у меня не получилось ..
Saj 15 апр. 2014, в 08:16
0

Я не знаю об этом скрипте, но когда я посмотрел на исходный код страницы, которую вы дали, я увидел function gallery(){} и там я увидел $('#....').click(function(){}) для каждого элемента в галерее. Вы добавляете эти функции для новых добавленных элементов? Я думаю, будет лучше, если вы отредактируете свой вопрос и опубликуете весь код javascript, а также значение html вы получите в ajax success.
Batu.Khan 15 апр. 2014, в 08:22
0

хорошо, конечно, я делаю это
Saj 15 апр. 2014, в 08:25
0

Код ajax работает нормально, но после того, как ответ ajax сделан, и когда я нажимаю «ALL», чтобы отфильтровать элементы, он показывает только 4 элемента, поскольку страница загружается с 4 элементами в первый раз.
Saj 15 апр. 2014, в 08:32

Показать ещё 6 комментариев

Теги:

jquery

quicksand

1 ответ

Ещё вопросы

Какой код вы используете для добавления элементов после загрузки ajax?
У меня есть функция здесь: функция showMore () {var data = 'load_more =' + 'load_more'; $ .ajax ({url: 'process.php', тип: 'post', data: data, success: function (html) {$ ('. thumbnails'). html (html);}}); }
эта функция возвращается с некоторым HTML
Таким образом, вы не добавляете элементы, а меняете всю коллекцию миниатюр. $('.thumbnails').html(html) означает изменение $('.thumbnails').html() на html . Для добавления вам нужно использовать $('.thumbnails').append(html)
Да, братан, я тоже это проверил, но у меня не получилось ..
Я не знаю об этом скрипте, но когда я посмотрел на исходный код страницы, которую вы дали, я увидел function gallery(){} и там я увидел $('#....').click(function(){}) для каждого элемента в галерее. Вы добавляете эти функции для новых добавленных элементов? Я думаю, будет лучше, если вы отредактируете свой вопрос и опубликуете весь код javascript, а также значение html вы получите в ajax success.
Код ajax работает нормально, но после того, как ответ ajax сделан, и когда я нажимаю «ALL», чтобы отфильтровать элементы, он показывает только 4 элемента, поскольку страница загружается с 4 элементами в первый раз.

Ryan.Hunt · Accepted Answer · 2014-04-15T06-40-00.000Z

Ок, я думаю, я понял. Если вы посмотрите на js-код, после function gallery(){} вы увидите коды для таких операций фильтрации:

var $itemsHolder = $('ul.thumbnails');
var $itemsClone = $itemsHolder.clone(); 
var $filterClass = "";
$('ul.filter li').click(function(e) {
e.preventDefault();
$filterClass = $(this).attr('data-value');
    if($filterClass == 'all'){ var $filters = $itemsClone.find('li'); }
    else { var $filters = $itemsClone.find('li[data-type='+ $filterClass +']'); }
    $itemsHolder.quicksand(
      $filters,
      { duration: 1000 },
      gallery
      );
});

Теперь это настройка фильтров, когда страница была первой загрузкой, так как новые добавленные элементы arent будут в списке $itemsHolder, дальнейшая фильтрация не будет включать новые добавленные элементы. Что вам нужно сделать, это обернуть этот код в функцию, например:

function gallery_filter() {
  var $itemsHolder = $('ul.thumbnails');
  .....
}

А затем вызовите эту функцию после успешного выполнения ajax:

success:function(html)
{
  $('.thumbnails').html(html);
  gallery_filter(); // here
}

Спасибо, брат, ты гений, ты только что все решил .. :)