Search module auto populate on type change

Hello darkhoros,

darkhoros Current behavior is the change dose happen but after you click the search button.

You want to "submit" the form after a change in "types" selectbox/checkboxes?

You might modify the respective select/checkboxes in the Filter module templates. The two default templates default and collapse can be found here:

YourJoomla/modules/mod_cobalt_filters/tmpl/

You might copy and rename the default.php. Remember to select your copy in the Filter module parameters.

See yourDefault.php template around line 51 ++
You will find a form input with style checkbox ...:

<input id="type-<?php echo $type->id?>" type="checkbox" name="filters[type][]" value="<?php echo $type->id?>"<?php

and there is also an input of style select (Joomla method):

<?php echo JHtml::_('select.genericlist', $f_types, 'filters[type]', null, 'id', 'name', $state->get('records.type'));?>

You would have to add the following attribute to your preferred style:

onchange='this.form.submit()'

Hence, this would reload the whole page...

That is another reason why I suggested single type in another topic for your site.

Hi Sergey, I have managed to get it done via ajax and it looks and acts cool :D Here is the code for any one how may need it, I have done simple testing, I think it works just fine.

<script>
      jQuery.noConflict();
    jQuery(document).ready(function(){
      jQuery('#filter-form .form-actions .btn').live('click' , function(){
        //alert( "button clicked." );
        jQuery('#filter-form')[0].submit();
        });
      jQuery('#filterstype').live('change' , function() {
        jQuery('#filter-form').submit();
        //alert( "Handler for .change() called." );
        });
      jQuery('#filter-form').submit(function(event){
        //  event.preventDefault();
        //alert( "Handler for .submit() called." );
        jQuery.ajax({
          url: '/en/real-estate',
          type: 'post',
          dataType:'html',   //expect return data as html from server
          data: jQuery('#filter-form').serialize(),
          success: function(response, textStatus, jqXHR){
            jQuery('#filter-form').html(jQuery(response).find('#filter-form').html());   //select the id and put the response in the html
            },
          error: function(jqXHR, textStatus, errorThrown){
            console.log('error(s):'+textStatus, errorThrown);
            }
          });
        return false;
        });
      });
  </script>

Look good!