无法使同位素与AJAX一起使用（代码示例）

Question

我正在尝试整合同位素，但Iam在使其与Ajax一起使用时遇到问题。

这是代码：

<script type="text/javascript">

var currentPage = 1;

$(function(){
    var getUrl = 'loadMovies.php';
    var getQuery = 'genrefilter='+movieSelection.elements["genreFilter"].value;
    getQuery += '&yearfilter='+movieSelection.elements["yearFilter"].value;
    getQuery += '&titlesort='+movieSelection.elements["titleSort"].value;
    getQuery += '&ratingsort='+movieSelection.elements["ratingSort"].value;
    getQuery += '&yearsort='+movieSelection.elements["yearSort"].value;
    getQuery += '&runtimesort='+movieSelection.elements["runtimeSort"].value;
    getQuery += '&currentPage='+currentPage;

    var $container = $('#movieBox');
    //$container.isotope({itemSelector: '.movie'});

    $.ajaxSetup({cache:false});  
    var ajax_load = "<img class='loading' src='images/load.gif' alt="loading..." />";

    //$("#genreFilter").change(function(){$container.isotope('insert', ajax_load).load(getUrl, getQuery);});


    $("#genreFilter").change(function(){$('#movieBox').html(ajax_load).load(getUrl, getQuery);});
});

HTML只是“”

在同位素线被注释掉的情况下，我实际上按预期显示了div，但是由于我无法弄清楚如何在同位素线中工作，因此无法正常工作。

我正在尝试将同位素与“插入”方法集成在一起，而我无需使用ajax即可工作。

摘录自：http :
//isotope.metafizzy.co/docs/adding-
items.html

“插入方法

您更可能希望使用insert方法，该方法可以执行addItems遗漏的所有操作。insert会将内容附加到容器，过滤新内容，对所有内容进行排序，然后触发reLayout，以便正确布置所有项目元素。

var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
$('#container').isotope( 'insert', $newItems );

最后一行是我需要与ajax行集成的内容，但是我看不到可以将其放置在哪里。香港专业教育学院尝试了几种方法，其中之一显示在注释行中。

谁能看到这个问题？

Answer 1

使它像这样工作：

$(function(){

        var $container = $('#movieBox');

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

        $.ajaxSetup({cache:false});  
        var ajax_load = "<img class='loading' src='images/load.gif' alt="loading..." />";

        $('#genreFilter').change(function(){

$('#genreFilter').change(function(){

            var getQuery = 'loadMovies.php?';
            getQuery += 'genrefilter='+movieSelection.elements["genreFilter"].value;
            getQuery += '&yearfilter='+movieSelection.elements["yearFilter"].value;
            getQuery += '&titlesort='+movieSelection.elements["titleSort"].value;
            getQuery += '&ratingsort='+movieSelection.elements["ratingSort"].value;
            getQuery += '&yearsort='+movieSelection.elements["yearSort"].value;
            getQuery += '&runtimesort='+movieSelection.elements["runtimeSort"].value;
            getQuery += '&currentPage='+currentPage;

            return $.ajax({
                cache:false,
                url: getQuery,
                success: function(data){$container.isotope('insert', data)}
                });
            });

    });