Question

Tôi đang cố gắng tích hợp đồng vị nhưng Iam gặp sự cố khi làm việc với ajax.

Dưới đây là các mã:

<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 chỉ là ""

Với dòng đồng vị nhận xét ra tôi thực sự nhận được divs hiển thị như mong đợi nhưng kể từ khi tôi không thể tìm ra cách để làm việc trong dòng đồng vị tôi không thể làm cho nó hoạt động được.

Tôi đang cố gắng tích hợp đồng vị với phương pháp "chèn" mà tôi phải làm việc mà không cần ajax.

Extract từ: http://isotope.metafizzy.co/docs/adding-items.html

---

"phương pháp chèn

Nhiều khả năng, bạn muốn sử dụng phương pháp chèn, mà làm mọi thứ mà addItems bỏ lỡ chèn sẽ nối các nội dung vào container, lọc. nội dung mới, sắp xếp tất cả nội dung, sau đó kích hoạt reLayout để tất cả các phần tử mục được đặt đúng cách.

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

Dòng cuối cùng là những gì tôi cần để tích hợp với dòng ajax nhưng tôi chỉ không nhìn thấy nơi tôi có thể đặt nó. Ive đã thử một số phương pháp mà một trong số đó được hiển thị trong dòng nhận xét.

Có ai có thể thấy sự cố không?

Answer 1

Got nó hoạt động như thế này:

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

    });