我正在尝试整合同位素,但Iam在使其与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 += '¤tPage='+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
“插入方法
您更可能希望使用insert方法,该方法可以执行addItems遗漏的所有操作。insert会将内容附加到容器,过滤新内容,对所有内容进行排序,然后触发reLayout,以便正确布置所有项目元素。
var $newItems = $('<div class="item" /><div class="item" /><div class="item" />'); $('#container').isotope( 'insert', $newItems );
最后一行是我需要与ajax行集成的内容,但是我看不到可以将其放置在哪里。香港专业教育学院尝试了几种方法,其中之一显示在注释行中。
谁能看到这个问题?
使它像这样工作:
$(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 += '¤tPage='+currentPage; return $.ajax({ cache:false, url: getQuery, success: function(data){$container.isotope('insert', data)} }); }); });