如何在drupal视图上隐藏和显示自定义过滤器表单

时间:2015-02-03 10:52:16

标签: javascript jquery ajax drupal-7 drupal-views

我是Drupal的新手,我试图创建一个包含许多过滤器选项的视图, 因为它有很多过滤字段我希望它们被隐藏,只显示用户决定在给定时间看到的过滤字段。

我无法找到一个模块来获得所述影响因此我尝试使用面板并添加我自己的html和jQuery自定义代码:

HTML

<input type="button" id="filter-selection-toggle-button" value="show filters"/>
<div id="my-filter-selection">
    <input type="checkbox"  value="edit-field-1">field 1</input><br/>
    <input type="checkbox"  value="edit-field-2">field 2</input><br/>
    <input type="checkbox"  value="edit-field-3">field 3</input><br/>
    <input type="checkbox"  value="edit-field-4">field 4</input><br/>
    <input type="checkbox"  value="edit-field-5">Dimention</input><br/>
    <input type="button" id="filter-button" value="filters button"/>
</div>

jQuery的:

<script type="text/javascript">
        // We define a function that takes one parameter named $.
        (function ($) {
            $(document).ready(function()
            {
                var showCheckedFilters=function(event)
                {
                    var x=$("input:checkbox:checked");
                    var y=$("input:checkbox:not(:checked)");
                    var checkedFilters="";//array of checked filters
                    var unCheckedFilters="";//array of checked filters
                    var toggleSpeed=event.data.toggleSpeed;

                    for (var i=0;i<x.length;i++)
                    {
                        checkedFilters=checkedFilters+"#"+$(x).eq(i).val()+","; 
                    }

                    for (var i=0;i<y.length;i++)
                    {
                        unCheckedFilters=unCheckedFilters+"#"+$(y).eq(i).val()+","; 
                    }


                    if (checkedFilters!="") 
                    {
                            // remove comma

checkedFilters = checkedFilters.substring(0,checkedFilters.length-1);                                 $(checkedFilters +&#34;,视图过滤器&#34;。)显示(toggleSpeed)。                         }                         否则//都是未选中的                         {                                 $(&#34; .view滤波器&#34)。兽皮(toggleSpeed);                         }

                    if (unCheckedFilters!="") 
                    {
                            // remove comma
                            unCheckedFilters=unCheckedFilters.substring(0,unCheckedFilters.length-1);
                            $(unCheckedFilters).hide(toggleSpeed);
                    }
                };

            // Now use jQuery with the $ shortcut again like you normally would

            $("#my-filter-selection,.view-filters").hide();
            //showCheckedFilters();//hide nondefault filters
            $("#filter-selection-toggle-button").click(function(){$("#my-filter-selection").toggle(500);});
            $("#filter-button").click({toggleSpeed:500},showCheckedFilters);
            //$("#edit-submit-items-in-market").click({toggleSpeed:0},showCheckedFilters);

           //to do on every reload of the filters
           $(document).ajaxComplete({toggleSpeed:0},showCheckedFilters);
        });
        // Here we immediately call the function with jQuery as the parameter.
        }(jQuery));
    </script>

在实际使用drupal过滤器之前,所有似乎都工作正常,显然drupal使用ajax重新加载过滤器字段,而不仅仅是内容,此时所有过滤器都会再次出现。

为了避免这种情况,我尝试使用

捕获ajax调用
$(document).ajaxComplete({toggleSpeed:0},showCheckedFilters);

或将我自己的调用添加到drupal提交按钮:

$("#edit-submit-items-in-market").click({toggleSpeed:0},showCheckedFilters);

两者都无济于事。

所以:

  1. 有没有办法确保未经检查的过滤器保持隐藏?

  2. 有没有比将上面的html片段加在一起更好的解决方案?

  3. (注意我并不熟悉drupal api所以让我更改tpl文件或创建自定义模块不是一个很好的选择。)

    示例:

    过滤

    enter image description here

    未经过滤(按下申请后):

    enter image description here

1 个答案:

答案 0 :(得分:0)

您能更具体地了解您想要过滤的内容吗?

无论如何,我认为你应该检查这个模块 - https://www.drupal.org/project/webform_conditional

您也可以在Drupal视图中的高级设置上取消ajax