首页 文章

产品列表按复选框筛选,未启用Javascript

提问于
浏览
0

我正在使用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调用(在我的情况下,控制器是Product,action是List),参数$ brands被传递给controller / action .

这是我的过滤器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,则使用可以仅按一个品牌过滤产品列表也是可以接受的 .

2 回答

  • 1

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

    如果您正在考虑搜索引擎优化,那么您的表单应该使用get方法提交,然后您可以使用Yii的请求对象:

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

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

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

    至于知道在重新加载页面之前选择了什么复选框,我不完全确定没有javascript就可以 .

  • 0

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

    <noscript>Please enable javascript</noscript>

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

相关问题