Filter form in list

[startpoint]

I have filter form inserted in list layout with content plugin. How to filter a list without page reload? When I set to popup in redirect plugin the list filtered with ajax, but have a pop-up result too. With set to new page the page with list reloaded and the search form is without selected search conditions.
I want this scenario to have possibility to use in form my custom style for elements data in dropdowns, checkbooks and other element types.

 

[juuser]

So you need the styling which cannot be applied to list's own filters by custom CSS or some jQuery snippets in list-xx.js?

 

[startpoint]

I want to enhance element types in my own way, not only styling.
For example:
- when checkboxes or dropdowns are more than 5 options, hide another with posibility to open/close;
- hide all options, then open it in own window with scroll;
- add search functionality;
- add css classes to each options;
I think i can do with element layout override, but generally i want to filter list with ajax, instead page reload, and save search entries in search form.

 

[juuser]

I still think most (if not all) of your challenges can be solved with jQuery and maybe a few modifications in a custom template. With jQuery you can count checkbox options, hide / show elements add classes to any dom element etc. Break your goal into pieces and start solving step by step. And there's an example for almost anything in Stackoverflow.

 

[startpoint]

I agree that it can be done with jquery, but how to filter the list through search form data, without page reload?

 

[juuser]

If you have a search form embeded in a list and you submit the form, I cannot think of a way of how the page wouldn't refresh.

Maybe you can adapt your need for using list's own filters and not the search form. You can have the filters above the list or in popup. And you can modify the look and feel with jQuery if needed.

Or, I remember I once used my own checkbox filters in the list intro (added with Sourcerer) and had some code in list_xx.js. So when checking the checkbox, a jQuery snippet set the field filter value accordingly and Fabrik.getBlock('list_xx').submit(); refreshed the list without page reload.

 

[startpoint]

Your last example is sounds good, but needed to duplicate list filters.
I don't know if it is practicaly.
Thank you for your suggestions.

 

[juuser]

In the last case original filters can be hidden, e.g. set to modal popup and the button that shows the filters can also be hidden. But yes, there are different options, just some creativity is needed.

 

[startpoint]

Thank you for your suggestions again.