I'm not much of a front-end guy, and many areas of the "magically created" code remains a mystery to me as it just "happens" and I'm satisfied with it, so this is likely going to be one of the "duh" moments for me.

In this case I find two very different ways to create the HTML of the Front-End list view Search Tools. I don't understand where the fork in the road is that the two generate different output within <div class="js-stools-container-filters">...</div>.

The form.xml is virtually identical, and n both cases, view.html.php essentially begins as show below, yet display($tpl) renders different HTML. I've tried using different site templates, compared common files between the two, and am at a loss as to where to look next.

What code, or at least what factors, determine this difference in output to achieve the use of control-group/control-label classes in the Search Tools?

class ExampleViewXyzs extends JViewLegacy
    public function display($tpl = null)
        $app = JFactory::getApplication();

        $this->items         = $this->get('Items');
        $this->state         = $this->get('State');
        $this->pagination    = $this->get('Pagination');
        $this->user          = JFactory::getUser();
        $this->filterForm    = $this->get('FilterForm');
        $this->activeFilters = $this->get('ActiveFilters');

The Desired generated HTML looks like this (Use of control-group/control-label classes):

<div class="control-group">
    <div class="control-label">
        <label id="filter_meeting_year-lbl" for="filter_meeting_year" class="">Meeting Year</label>
    <div class="controls">
        <select id="filter_meeting_year" name="filter[meeting_year]" class="inputbox chzn-done" onchange="this.form.submit()"
            <option> ................</option>

The current, and UNdesired generated HTML looks like this (NO use of control-group/control-label classes).

<select id="filter_source" name="filter[source]" class="inputbox chzn-done" onchange="this.form.submit();" style="display: none;">
        <option> ................</option>
<div class="chzn-container chzn-container-single" style="width: 220px;" title="" id="filter_source_chzn">
    <a class="chzn-single chzn-default" tabindex="-1"><span>Select an option</span><div><b></b></div></a>
    <div class="chzn-drop"><div class="chzn-search">
            <input autocomplete="off" class="active" type="text">
        <ul class="chzn-results">
            <li class="active-result" data-option-array-index="0">- Select Something -</li>
            <li class="active-result" data-option-array-index="2">An Option</li>

And, on a related note, with the use of the control-group class, the Search Tools remain open when the page is resubmitted, while the other does not. I'm assuming/hoping that is resolved with the answer to my question.

1 Answer 1


Your problem is jQuery's Chosen plugin.

JS scripts are almost always added using the JHTML class and its child classes. I've only had a quick look, but I think the problem script is injected at ln: 32 of /layouts/joomla/searchtools/default.php:

JHtml::_('searchtools.form', $formSelector, $data['options']);

I'm fairly certain this will result in /media/jui/js/jquery.searchtools.js being loaded in the browser, which is what's adding all the Chosen classes.

EDIT - I've had a longer look at the JS code. You should be able to disable Chosen by setting an option before the line I mentioned above:

$data['options']['chosenSupport'] = false;
JHtml::_('searchtools.form', $formSelector, $data['options']);

That should hopefully get you the output you want, but will mean chosenSupport is always disabled.

The options parameters are normally set when JLayoutHelper::render() is called, so that would be the more technically correct way of doing things. You'd need to look through your code to find out which execution of JLayoutHelper::render() is responsible for rendering the output you want to change, and amend it to something like:

JLayoutHelper::render('joomla.searchtools.default', array('view' => $this, 'options' => ['chosenSupport' => false]));

As another guess, the difference in output you've noticed may be due to either different options being sent when JLayoutHelper::render is called, or different layouts being rendered.

  • AS i suspected, it wasn't going to be an easy answer, but you've at least given me some insight in what's going on and where to look....THANKS!
    – GDP
    Nov 19, 2016 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.