Question

Sto cercando di integrare l'isotopo ma Iam ha problemi a farlo funzionare con ajax.

Ecco il codice:

<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 è solo ""

Con la linea isotopo commentata in realtà ho capito div visualizzati come previsto, ma dal momento che non posso capire come funzionano nella linea isotopica non riesco a farlo funzionare.

Sto cercando di integrare l'isotopo con il metodo "insert" che ho potuto lavorare senza ajax.

Estratto da: http://isotope.metafizzy.co/docs/adding-items.html

---

"metodo di inserimento

Più probabilmente, si desidera utilizzare il metodo di inserimento, che fa tutto quello che addItems manca inserire aggiungerà il contenuto al contenitore, filtro. i nuovi contenuti, ordinare tutto il contenuto, poi innescare un Ridefinisci layout in modo che tutti gli elementi voce siano correttamente disposti.

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

---

L'ultima riga è ciò che ho bisogno di integrare con la linea ajax, ma semplicemente non vedo dove potrei posizionarlo. Ho provato alcuni metodi uno dei quali è mostrato nella riga commentata.

Qualcuno può vedere il problema?

Answer 1

preso a lavorare in questo modo:

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

    });