我正在使用同位素插件 ( http://isotope.metafizzy.co/ ) 和无限 ajax 滚动插件 ( https://github.com/webcreate/infinite-ajax-scroll )。无限滚动非常适契约(Contract)位素过滤，但是，我想在应用过滤器后将更多项目加载到容器中，以便始终显示 50 个项目。
我有以下代码，但卡在用 ajax 加载新项目的时候。
因此，每次选择过滤器时，我都会计算当前显示的项目数量(共 50 个)。然后我需要一种方法来使用 ajax 并调用同一页面 (index.php) 来获取更多项目。我想我需要做一些类似于无限 ajax 滚动插件的事情才能获得下一页结果。我对 JQuery 没有那么多经验，所以我很难弄清楚他们的代码到底在做什么，以及如何为我的过滤实现类似的东西。
我尝试过使用 $.get，但这会在容器中加载整个 index.php 页面，而不仅仅是获取结果。
如有任何帮助，我将不胜感激。
<?php
require_once('config/config.php');
$cat = (isset($_GET['cat']) ? urldecode($_GET['cat']) : '');
$type = (isset($_GET['type']) ? urldecode($_GET['type']) : '');
//get filter lists
$categories = StoreDiscounts::getCategories();
$types = StoreDiscounts::getDiscountTypes();
//get total number of discounts for search
$total_items = StoreDiscounts::countitems($cat, $type);
//pagination - infinate scrolling
$pagelimit = 50; //items per page
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
$start = ($page * $pagelimit) - $pagelimit;
$limit = $pagelimit * $page;
if ($total_discounts > ($page * $limit)) {
$next = ++$page;
}
//get items
$items = StoreDiscounts::getitems($cat, $type, $start, $limit);
?>
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="public/css/normalize.css">
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="public/css/style.css">
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="public/css/ie.css">
<![endif]-->
<script type="text/javascript" src="public/js/modernizr.js"></script>
<title>E-Store Offers.</title>
</head>
<body>
<!--#outer-wrap-->
<div id="outer-wrap">
<!--#inner-wrap-->
<div id="inner-wrap">
<!--#header-->
<header id="top" role="banner">
<div class="block">
<a class="nav-btn" id="nav-open-btn" href="#nav">Filters</a>
</div>
</header>
<!--/#header-->
<!--#filters-->
<nav id="nav" role="navigation">
<div class="block">
<section id="options" class="clearfix combo-filters">
<h3>Filters</h3>
<p><a href="#" data-filter-value="*">[ Clear filters ]</a></p>
<div class="option-combo categories">
<h4>Categories</h4>
<ul class="filter option-set clearfix" data-filter-group="cat" data-option-key="filter">
<?
echo '<li><a href="#filter-category-all" data-filter-value="" class="selected">All</a></li>';
foreach ($categories as $category) {
$category_class = functions::sanitize($category);
echo '<li><a href="#filter-category-'. $category_class . '" data-filter-value=".' . $category_class . '">' . $category . '</a></li>';
}
?>
</ul>
</div>
<div class="option-combo types">
<h4>Type</h4>
<ul class="filter option-set clearfix" data-filter-group="type" data-option-key="filter">
<?
echo '<li><a href="#filter-type-all" data-filter-value="" class="selected">All</a></li>';
foreach ($types as $type) {
$type_class = str_replace(' off', '', strtolower($discount_type));
echo '<li><a href="#filter-type-' . $type_class . '" data-filter-value=".' . $type_class . '">' . $discount_type . '</a></li>';
}
?>
</ul>
</div>
</section>
<a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
</div>
</nav>
<!--/#filters-->
<!--#main content area-->
<div id="main" role="main">
<!--#container for tiles-->
<div id="container">
<?php
foreach ($items as $id => $item) {
echo "<div class=\"element $typ $categoryisotope-item\" data-type=\"$typ\" data-category=\"$category\" >";
<h4>$item[name]</h4>
<p class=\"category\">$item[cat]</p>
<img src=\"$item[url]\" width=\"230\" height=\"175\" alt=\"$item[name]\">";
echo " <p>$item[description]</p>";
echo "</div>\n";
}
?>
</div>
<!-- /#container for tiles -->
<!--#pagination-->
<?php if (isset($next)): ?>
<div class="paginate">
<?php
echo "<a href=\"index.php?p=$next";
if($cat !=''){
echo "&cat=$cat";
}
if($type !=''){
echo "&type=$type";
}
echo "\">Next</a>";
?>
</div>
<?php endif?>
<!--/#pagination-->
</div>
<!--/#main content area-->
</div>
<!--/#inner-wrap-->
</div>
<!--/#outer-wrap-->
<!--/#footer-->
<footer>
FOOTER
</footer>
<!--/#footer-->
<script src="public/js/main.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="public/js/jquery.isotope.min"></script>
<script type="text/javascript" src="public/js/jquery-ias.min.js"></script>
<script type="text/javascript" src="public/js/MetroJs.js"></script>
<script>
var displayItemsNo = 50;
$(document).ready(function() {
//isotope
var $container = $('#container'),
filters = {};
$container.isotope({
itemSelector: '.element',
});
// filter buttons
$('.filter a').click(function(e) {
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for (var prop in filters) {
isoFilters.push(filters[ prop ])
}
//show filters
var selector = isoFilters.join('');
//count how many results after filter
$container.isotope({filter: selector}, function($changedItems, instance) {
instance.$allAtoms.removeClass('is-filtered');
var itemsno = (instance.$filteredAtoms).length;
instance.$filteredAtoms.addClass('is-filtered');
if(itemsno < displayItemsNo){
//get more items to make up 50
var moreno = displayItemsNo - itemsno;
/******WHAT DO I DO HERE? SOMETHING LIKE THE BELOW?
var getQuery = 'index.php?cat=??&type=??';
$.get(getQuery, null, function (data) {
$container.isotope('insert', data)
});
********/
}
});
//pass filter to next link for infinate scroll
//var filter_qry = $this.attr('href');
var filter_qry = $(e.target).text();
var paginate_url = $( '.paginate a ').attr('href');
if(filter_qry == 'All'){
filter_qry = '';
}
var next_url = UpdateQueryString(paginate_url, group, encodeURIComponent(filter_qry));
$(".paginate a").attr("href", next_url);
return false;
});
//end isotope
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '#main', // main container where data goes to append
item: '.element', // single items
pagination: '.paginate', // page navigation
next: '.paginate a', // next page selector
loader: '<img src="public/img/ajax-loader.gif"/>', // loading gif
loaderDelay: 200,
thresholdMargin: -600,
noneleft: 'No more items', //Contains the message to be displayed when there are no more pages left to load
triggerPageThreshold: '10', // show "load more" if scroll more than this to stop
trigger: "",
onLoadItems: function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to isotope layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.isotope( 'insert', $newElems, true );
});
return true;
}
});
//end infinate
});
</script>
</body>
</html>
非常感谢，利亚
最佳答案
function loadMoreItems(getQuery) {
$.get(getQuery, null, function(data) {
container = $('#container', data).eq(0);
if (container) {
var newItemsHTML = "";
newItemsHTML = $( container ).html();
var $newItems = $(newItemsHTML);
$('#container').isotope('insert', $newItems, true);
}
}, 'html');
}
关于php - ajax 过滤和无限滚动(php 和同位素)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20047678/
我脑子里浮现出一些关于一种新编程语言的想法，所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少，我以前从未做过这种事情。我的解析器表现得好像有一个无限循环，但没有堆栈跟踪；事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗？我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上，以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
我有一个名为Post的类，我需要能够适应以下场景:如果用户选择了一个类别，则只显示该类别的帖子如果用户选择了一种类型，则只显示该类型的帖子如果用户选择了一个类别和类型，则只显示该类别中该类型的帖子如果用户没有选择任何内容，则显示所有帖子我想知道我的Controller是否不可避免地会因大量条件语句而显得粗糙...这是我解决此问题的错误方法-有谁知道我如何才能做到这一点？classPostsController 最佳答案 您最好遵循“胖模型，瘦Controller”的惯例，这意味着您应该将这种逻辑放在模型本身中。Post类应该能够报告
我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？
我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我仍然收到标题中的“错误”消息，但不知道如何解决。在ApplicationController中，classApplicationController在routes.rb#match'set_activity_account/:id/:value'=>'users#account_activity',:as=>:set_activity_account--thisdoesn'tworkaswell..resources:usersdomemberdoget:action_a,:action_bendcollectiondoget'account_activity'endend和User
对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？ 最佳答案 假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking
当我写下面的代码时:x=[1,2,3]x我得到这个输出:[1,2,3,[...]][1,2,3,[...]][1,2,3,[...]]我不应该只得到[1,2,3,[1,2,3]]吗？解释是什么？ 最佳答案 这没什么奇怪的。数组的第四个元素就是数组本身，所以当你求第四个元素时，你得到的是数组，当你求第四个元素的第四个元素时，你得到的是数组，当你求第四个元素时，你得到的是数组。第四个元素的第四个元素的第四个元素的元素......你得到了数组。就这么简单。唯一有点不寻常的是Array#to_s检测到这样的递归，而不是进入无限循环，而是返回