D7 Execute javascript on views exposed filters AJAX submit (Dropkick)

Question

I need a tutorial on how to run a piece of javascript after the AJAX form of a views exposed filter group submits.

The problem is with using the Dropkick javascript plugin to style some dropdowns. The Drupal Dropkick seems to do a half-decent job of implementing this on the initial form, but after AJAX submit the dropdowns lose their styling.

If it helps, here's a copy of the Drupal Dropkick module js:

(function($) {
  Drupal.behaviors.dropkick = {
    attach: function(context) {
      $(Drupal.settings.dropkick.selector, context)
        .not('#field-ui-field-overview-form select, #field-ui-display-overview-form select') //disable dropkick on field ui
        .each(function() {
          $(this).addClass('dk-active').dropkick({
            change: function(value, label){
                $(this).change();   
            }
          });
      });

      //add clearfix to parent .form-item to fix floats
      $('.dk_container').parents('.form-item').addClass('clearfix');
    }
  }
})(jQuery);

Any thoughts?

Answer 1

You need to use ajaxcomplete function of jquery to perform any script after the ajax call. I have not worked on "Dropkick" module, but I have implemented "Selectbox" jquery plugin in my site to format the dropdown.

May be it will help you.

$(document).ajaxComplete(function(e, xhr, settings) {

  if (settings.url == Drupal.settings.basePath + "?q=views/ajax" || settings.url == Drupal.settings.basePath + "views/ajax" || settings.url == Drupal.settings.basePath + "?q=system/ajax" ||  settings.url == Drupal.settings.basePath + "system/ajax") {       
 // enable selectBox jQuery plugin for all <select> elements
    $("SELECT").selectBox();
    //Drupal.attachbehaviours();   

  }       
}); 

Answer 2

I run in the same issue and this solution works for me.

function($) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      $('select').selectBox({
        mobile: true,
        menuSpeed: 'fast'
      });
    }
  };     
})(jQuery);