Changing Views Ajax response in Drupal 6

Usually calling Drupal.attachBehaviors makes the new elements added to the DOM reflect changes that happened to the old elements as desired. This, however, is not always enough. Sometimes, we need more control, it is easy to alter the response if you created the AJAX call yourself (using jQuery $.ajax() for example), but what if you are building on others' work..

Here is our case here :
You have installed the Views module on Drupal 6.
You have a view using AJAX.
You need to change some properties in the response of the AJAX call before it is displayed.

The Idea is to use the hook_drupal_alter() that is used by Views module to make other modules able to change AJAX request/response options and parameters.

So .. We will use it to add a Javascript callback to be executed on the response before it is displayed.

  1. First, we will need to add the hook implementation to a module file :-
    <?php
    /**
    ** Implementation of hook_ajax_data_alter().
    */
    function modulename_ajax_data_alter(&$object, $module, $view) {
      global
    $views_ajax_form_js_settings;
      if (!empty(
    $views_ajax_form_js_settings)) {
       
    $object->__callbacks = array_merge(array('Drupal.themeOrModuleName.functionName'), $object->__callbacks);
      }
    }
    ?>
    • modulename is replaced by the machine name of the module where we put this code.
    • themeOrModuleName is replaced by theme name if you choose the option of script.js file in the next step or module name if you put the Javascript code below in a module file.
    • functionName is replaced by any name you want that describes what the Javascript function will do.
  2. Then, we add the Javascript code
    Drupal.themeOrModuleName = {};
    Drupal.themeOrModuleName.functionName = function(target,response) {
      // we use $().html which gets the inner HTML and so
      //.. the top div tag is not encluded, so we save it here
      var firstDiv=response.display.slice(0,response.display.indexOf('>')+1);
      // do all changes that we need to the loaded context then
      //.. add the first div tag so the new context = firstDiv+$().html+'</div>'
      response.display = firstDiv+$(response.display).each(function() {

      }).html()+'</div>';
    }

    Replace themeOrModuleName and functionName as described in the above step.
    This code can be added to :

    • your theme's script.js file (in Drupal 6 it is automatically included in the page header)
    • using drupal_add_js($code,'inline'); where $code contains the code above
    • Or

    • a Javascript file and then using drupal_add_js($file);

I needed this technique with jQuery animations on dynamic elements (elements being replaced/changed with AJAX) calls. Please, tell me if you find this helpful or if it didn't work for you.

Reply

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.