1

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?

2 Answers 2

4

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();   

  }       
}); 
2
  • Where do you add this code? I have created a JS file and added this in but if never runs. Even if all I do is have it log to the console as a test
    – nexus_6
    Apr 21, 2014 at 14:24
  • @user10051, I have added this code in js file. Apr 21, 2014 at 18:13
1

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);

Your Answer

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

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