Как фильтровать элемент isotop созданный через ajax?

Question

[alekZi]

Делаю фильтрацию элементов на сайте с isotop + ajax. Остановился на том, что через ajax подгружается нужный элемент в контейнер. Проблема заключается в том, что элемент внутри контейрена изотопов находится всё время на одном месте и не фильтруется. Подскажите как указать изотопу, что добавленный элемент тоже надо фильтровать и принять как свой?
Спасибо

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js"></script>

<script>
$(document).ready(function() {
        var $container = $('.works');

        $container.isotope({
            itemSelector: '.work'
        });

        $('#filter a').click(function(){
  
            $('#filter a').removeClass('current');
            $(this).addClass('current');
            var selector = $(this).attr('data-filter');

            var getQuery = 'test2.php?';
            getQuery += 'filter='+selector;

            $.ajax({
                cache:false,
                url: getQuery,
                success: function($data){$('.works').append($data).isotope( 'appended',$data); console.log(data)}
                });

            $('.works').isotope({
                filter: selector,
                animationOptions: {
                    duration: 1000,
                    easing: 'easeOutQuart',
                    queue: false
                }
            });
            return false;
        });

    });

</script>
<ul id="filter" class="clearfix">
    <li><a href="" class="current btn" data-filter="*">Все</a></li>
    <li><a href="" class="btn" data-filter=".portfolio">Портфолио</a></li>
    <li><a href="" class="btn" data-filter=".cutaway">Визитки</a></li>
    <li><a href="" class="btn" data-filter=".corporative">Корпоративные</a></li>
</ul>

<div><a id="append-button" href="#" class="btn">Портфолио</a></div>

<div class="works clearfix" id="movieBox">
    <article class="work portfolio">
     <p class="number">519</p>
        <div>
            <img src="images/portfolio/1.jpg" width="300" height="220" />
            <h3>1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </article>
    <article class="work cutaway">
     <p class="number">592</p>
        <div>
            <img src="images/cutaway/1.jpg" width="300" height="225" />
            <h3>2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </article>
    <article class="work corporative">
     <p class="number">593</p>
        <div>
            <img src="images/corporative/1.jpg" width="300" height="260" />
            <h3>3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </article>
 
</div>

Answer 1

[heartdevil]

Привет.

Проверьте вот этот параметр.

filter: selector,

у вас в selector точно данные попадают?

Вообще говоря, попробуйте вот этот код

$('.works').isotope({
                filter: "тут сразу задайте класс для фильтра изотопа",
            });

поместить в success метод аякс фукнции. Оставьте там все по минимуму (закомментируйте), что не влияло ничего при тестировании. Если все сработает, то постепенно добавляйте необходимый функционал. Если вы сразу всю логику будете тестировать, то не сможете сразу определить, где баг. Внедряйте функционал постепенно.

Немного доработал ваш код.

Попробуйте так

$(document).ready(function() {
        var $container = $('#movieBox');
		var cache = $container.html();
		
        $container.isotope({
            itemSelector: '.work'
        });

        $('#filter a').click(function() {
  
            $('#filter a').removeClass('current');
            $(this).addClass('current');
            var selector = $(this).attr('data-filter');

            $.ajax({
                cache: false,
                url: 'test2.php?filter=' + selector,
                success: function(data) {
					
					// HERE YOU CAN DO SOMETHING WITH YOUR DATA
					
					
					
					//Collecting every new isotope in cache
					cache += data;

					//Making our container clean by destroying the isotope functionality
					$container.isotope('destroy');

					//Rewriting our new collection of isotopes to our container
					$container.html(cache);

					//Set new instance of the isotope functionaly in our container using last clicked filter
					$container.isotope({
						itemSelector: '.work',
						filter: selector
					});					
				}
                });

			$container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 1000,
                    easing: 'easeOutQuart',
                    queue: false
                }
            });
            return false;
        });

    });
</script>

Comments

[alekZi]

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

В действии можно увидеть тут - beta.fireplacestudio.ru/test.php

Можете помочь?

[heartdevil]

alekZi: У вас там все работает, только надо вот эту строчку удалить. console.log(data)

[alekZi]

heartdevil: если посмотреть ниже, то все вновь созданные изотопы просто добавлены вниз и не фильтруются - joxi.ru/Ra2X1OJhYBEBAg

[heartdevil]

alekZi: Вы удалили console.log? Я сделал копию вашей тестовой страницы и у меня все фильтруется.

[heartdevil]

heartdevil: Я понял в чем проблема. Вернее проблема в нескольких местах была. У вас по умолчанию показываютс все изотопы. То есть это ВСЕ в меню. Когда вы нажимаете на Портфолио, у вас должно отобразиться только портфолио. Делается аякс запрос, который вам возвращает портфолио и просто добавляет к контейнеру изотопов. Так как там стоит метод append. Если вы хотите все это аяксом делать, то вам надо не append делать, а заного записывать полученные данные из аякс. Либо, если изотопов не так много, то можете их все сразу подгрузить и распределить между фильтрами.

[alekZi]

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

[heartdevil]

alekZi: Посмотрите мой первый ответ. Я кинул код туда. По такому принципу у вас будет направление, как можно доработать ваш код.

[alekZi]

heartdevil: решением оказалось использовать в качестве datatype: json и всё.

[Lord_Dantes]

heartdevil, .isotope('destroy')
Помог, благодарочка.