5

同位体を統合しようとしていますが、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

"メソッドを挿入

多くの場合、addItems が見逃しているすべての処理を行う insert メソッドを使用することをお勧めします。insert はコンテンツをコンテナーに追加し、新しいコンテンツをフィルター処理し、すべてのコンテンツを並べ替えてから、reLayout をトリガーして、すべての項目要素が適切にレイアウトされるようにします。

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

最後の行は ajax 行と統合するために必要なものですが、どこに配置できるかわかりません。いくつかの方法を試しましたが、そのうちの 1 つがコメントアウトされた行に示されています。

誰でも問題を見ることができますか？

4

1 に答える 1

9

次のように動作するようになりました：

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

    });
于 2012-06-11T01:04:20.163 に答える