Question

Ich versuche, Isotop zu integrieren, aber ich habe Probleme, es mit Ajax zu arbeiten.

Hier ist der 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 ist nur ""

Mit dem Isotop Linie kommentierte I angezeigt tatsächlich divs bekommen wie erwartet, aber da ich kann nicht herausfinden, wie man arbeitet in der Isotoplinie kann ich es nicht zum Laufen bringen.

Ich versuche, Isotop mit "einfügen" -Methode zu integrieren, die ich ohne Ajax arbeiten konnte.

Auszug aus: http://isotope.metafizzy.co/docs/adding-items.html

---

„insert-Methode

Wahrscheinlicher ist, möchten Sie die Insert-Methode verwenden, die alles tut, die Misses AddItems einfügen wird der Inhalt in den Behälter, Filter anhängen. der neue Inhalt, sortiert alle Inhalte, lösen dann ein neu-Layout, so dass alle Artikel Elemente aus richtig verlegt sind.

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

---

Letzte Zeile ist, was ich in die Ajax-Linie integrieren muss, aber ich sehe einfach nicht, wo ich es platzieren könnte. Ich habe einige Methoden ausprobiert, von denen eine in der kommentierten Zeile angezeigt wird.

Kann jemand das Problem sehen?

Answer 1

Verstanden wie dies funktioniert:

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

    });