Tags

, , ,

how-to-manage-post-AJAX-call-activities-using-Drupal-behaviorsAre you tired of thinking that how to execute JavaScript behaviors after your AJAX callback in Drupal?

Then, Drupal.behaviors makes it easier than you can think. But first question we found that what is Drupal.behaviors. Lets have a look.

So what’s Drupal.behaviors:

Drupal.behaviors is an object, defined in Drupal Core. It is declared and initialized at the very beginning of JavaScript code in Drupal core along with 4 properties, among which ‘behaviors’ is one of them( like Drupal.settings ). This object contains all the Drupal core properties which can be used and extended by other modules.

Why to use Drupal.behaviors ?

When we started our journey with jQuery, we learnt to put all our code inside the $(document).ready() function as below :

// Get the DOM ready.
$(document).ready(function(){

  // Do your favi coding here.

});

All we know the meaning of the above code. Still let us recall again, it assures us that our code will run after the DOM( Document Object Model ) has been loaded. This only happens once our web page gets refreshed/reloaded. But we want our js code to be executed after our AJAX requests. Will it help us a lot? Obviously NOT! So here, Drupal.behaviors saves us 🙂

How Drupal.behaviors works ?

Drupal.behaviors are generally called after any new DOM element has been added or removed to/from your web page during AJAX requests. Thus it becomes easier to execute your js code. So without wasting any time, lets have look to it’s structure:

For Drupal 6:

Drupal.behaviors.yourModuleName = function(context) {};

  // Do your js stuffs you want to do after your AJAX call.

}

For Drupal 7:

Drupal.behaviors.yourModuleName = {

  // This behavior function is called when new element is being added.
  attach: function (context, settings) {
    // Do your js stuffs you want to do after your AJAX call.
  },

  // This behavior function is called when elements are removed.
  detach: function (context, settings) {
    // Do your js stuffs you want to do after your AJAX call.
  }

}

Now, lets take a look to an example :

Suppose, we want to put some new html after our AJAX call in a div. So the code will be look like:

// JavaScript Closure to map your jQuery to '$'.
( function($) {
  Drupal.behaviors.yourModuleName = {
    attach: function (context, settings) {
    // Weare going to do a ajax call, using a
    //  menuu call back.
      $.post( 'yourCallBackMenuPath', {

        // Your passsed parameters to the server side
        //  code for your desired functionality.

      }, function(data){

      // 'data' is the defined variable to collect the returned value
      //   from server side code which contains some html code which
      //   we are going replace.
      $('elementSelecter').html(data);

      }
    );
  }
}
}(jQuery));

Now, you are ready to access your code after your ajax call which is safe inside the Drupal.behaviors.

WARNING :

There are some problems we might face. Never use any event call inside the Drupal.behaviors or any unnecessary js code which we can use in $(document).ready() function or we don’t want to execute after our AJAX call back.
Now the question is, why we are talking abut this. Lets take an example – if we use any click event in behaviors( which we don’t need to be executed after AJAX call ) then it will be executed( without any reason ) and will be registered into the DOM. So now, while we will be doing our actually js stuff, those registered click events would also be called and executed, which will provide a mess. So, please be sure about that.

Thanks a Lot. HAPPY DRUPALIZING 🙂

Advertisements