产品列表按未启用 Javascript 的复选框过滤

Question

我正在使用YII，我有一个复选框过滤器，可以按品牌过滤产品。

这是我的过滤器 HTML：

<dl class="brand-filter"> 
    <dd class="cat-text">  
        <input value="1" id="chb_1" class="brand-filter-chb" type="checkbox" name="brands[]">            
        <label for="chb_1" class="brand-filter-text" style=" display: inline-block;">Brand Name 1</label>      
    </dd>
    <dd class="cat-text">          
        <input value="2" id="chb_2" class="brand-filter-chb" type="checkbox" name="brands[]">            
        <label for="chb_2" class="brand-filter-text" style=" display: inline-block;">BRAND Name 2 </label>
    </dd>
    etc.
</dl>

当用户单击复选框时，jquery 执行 YII fn.yiiListView.update。这类似于 ajax 调用，用于更新我正在过滤的数据。Ajax 调用是控制器/操作（在我的例子中，控制器是产品，操作是列表），参数$brands传递给控制器/操作。

这是我的过滤器javascript（Jquery）：

$('.brand-filter-chb').live('click', function(){        
    brands = $('#filter-form').serialize();     //brand names are serialized 
    $.fn.yiiListView.update(  //this updates product list by brand names
        'product-list',   //id of product list table
        {data: brands}   //serialized data send to controller/action by ajax call
    );    
});    

这允许按品牌过滤产品列表。使用选中"品牌名称"复选框并筛选列表。此外，用户可以检查多个品牌名称，一切正常。但是，如果没有Javascript，它就不起作用。

我想知道在没有javascript的情况下允许相同或非常相似的用户体验的最佳解决方案是什么。例如，如果未启用 javascript，则使用只能按一个品牌过滤产品列表，这也是可以接受的。

Answer 1

我的建议是将过滤器 HTML 包含在表单中，并将表单的操作设置为用于 AJAX 过滤器的相同操作。

如果你正在考虑 SEO，那么你的表单应该使用 get 方法提交，然后你可以使用 Yii 的请求对象：

Yii::app()->request->isPostRequest

以确定正在处理的是 AJAX 请求还是非脚本版本。

您可以将表单过滤器的提交按钮括在几个标签中。

至于知道在重新加载页面之前选择了哪些复选框，我不完全确定没有javascript是否可能。

Answer 2

如果你不想使用javascript，你可以做的是创建一个

<noscript>Please enable javascript</noscript>

或者在选中复选框后刷新页面，并使用 PHP 显示/隐藏元素。