2012-06-10 10 views
5

Próbuję zintegrować izotop, ale mam problemy z uzyskaniem go do pracy z ajaxem.Nie mogę pobrać Isotope do pracy z AJAX (próbki kodu)

Oto kod:

<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 jest po prostu „”

Z linii izotopów zakomentowanym I rzeczywiście dostać div wyświetlane zgodnie z oczekiwaniami, ale ponieważ nie mogę dowiedzieć się, jak pracować w linii izotopowej nie mogę go uruchomić.

Próbuję zintegrować izotop z metodą "wstawiania", którą mam do pracy bez ajax.

Wyciąg z: http://isotope.metafizzy.co/docs/adding-items.html


„insert metody

Bardziej prawdopodobne, chcesz użyć metody insert, który robi wszystko, addItems tęskni wstawić doda zawartość do pojemnika filtra. nowa treść, rodzaj całą zawartość, a następnie wywołać reLayout więc wszystkie elementy są odpowiednio pozycja rozplanowany.

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

Ostatnia linia to to, co muszę zintegrować z linią ajax, ale po prostu nie widzę, gdzie mógłbym ją umieścić. Ive próbował kilka metod jeden z nich jest pokazany w komentarzu line.

Czy ktoś może zobaczyć problem?

Odpowiedz

9

Got to działać tak:

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

    }); 
+0

Mam niemal dokładnie ten sam kod, ale nie działa dla mnie :( – leen3o

+0

@ leen3o To stara sprawa, izotop może być zmieniony lub jest to po prostu mały błąd gdzieś, łatwo go przeoczyć, więc spróbuj podwójnie sprawdzić brak jakiejkolwiek składni. – DominicM

Powiązane problemy