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?

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

  }       
}); 
  • 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 '14 at 14:24
  • @user10051, I have added this code in js file. – Jayendra Kainthola Apr 21 '14 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, privacy policy and cookie policy

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