不能得到同位素与AJAX工作（code样品） [英] Cant get Isotope to work with AJAX (code samples)

问题描述

我试图整合同位素，但有荫得到它的问题与阿贾克斯的工作。

I am trying to integrate isotope but Iam having problems getting it to work with ajax.

这里的code：

<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的，但因为我无法弄清楚如何在同位素线工作，我不能让它的工作。

With the isotope line commented out I actually get divs displayed as expected but since I cant figure out how to work in the isotope line I cant get it to work.

我试图整合同位素与插入方法，我没有Ajax工作。

I am trying to integrate isotope with "insert" method which I got to work without ajax.

摘录：<一href="http://isotope.metafizzy.co/docs/adding-items.html">http://isotope.metafizzy.co/docs/adding-items.html

插入法

更有可能的是，你要使用的插入方法，它的一切，为addItems失误。插入将追加内容到容器中，筛选新的内容，排序的所有内容，然后触发重新布局，因此所有的项目元素都正确地布局。

More likely, you want to use the insert method, which does everything that addItems misses. insert will append the content to the container, filter the new content, sort all the content, then trigger a reLayout so all item elements are properly laid out.

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

---

最后一行是什么，我需要与阿贾克斯行整合，但我只是不明白，我可以把它。香港专业教育学院尝试了一些方法，其中一个显示在注释行。

---

Last line is what I need to integrate with the ajax line but I just don't see where I could place it. Ive tried few methods one of which is shown in the commented out line.

任何人都可以看到这个问题？

Can anyone see the problem?

推荐答案

得到它的工作是这样的：

Got it to work like this:

$(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)}
                });
            });

    });

这篇关于不能得到同位素与AJAX工作（code样品）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！