$(document).ready(function()
{
  $('#climb_type').change(function(key)
  {
    $('#loader').show();
    $.ajax({
      type: "GET",
      url: 'route/filter?climb_type=' + this.value,
      dataType: 'script',
      complete: function(object){
        $('#loader').hide();
      }
    });
  });
 
  $('#zone_id').change(function(key)
  {
    $('#loader').show();
    $.ajax({
      type: "GET",
      url: 'route/filter?zone_id=' + this.value,
      dataType: 'script',
      complete: function(object){
        $('#loader').hide();
      }
    });
  });
  
  var options = { 
        target:        '#route-list',   // target element(s) to be updated with server response 
        beforeSubmit: function(formArray){
          $('#loader').show(); 
          return true;
        },  // pre-submit callback 
        success: function(formArray){
          $('#loader').hide();
          return true;
        }  // post-submit callback 
 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
   };
 
   // bind form using 'ajaxForm' 
   $('#filter-form').ajaxForm(options)
});