How to reload the custom JavaScript file after Drupal makes ajax call?

Question

How one can reload the custom JavaScript file after an Ajax call is completed?

In my case I have a custom JavaScript file to manipulate the views data and filters. It works perfectly the first time a page is loaded.

But once the user sets a filter and hits Apply i.e. after the Ajax call, the JavaScript seems to stop working. It's there but not registering any event.

I read some articles on Drupal.org but that didn't give me a solid solution.

Note - Its not a module .js file but a custom stand alone .js file under the theme folder.

Henrik Opel · Accepted Answer · 2010-07-28 20:40:49Z

3

You should read up on JavaScript in Drupal, especially any part about Drupal.bahaviors.

The main point is that you need to turn your custom JavaScript file into Drupal.behaviors, because those will get reattached to content loaded dynamically via AJAX like calls.

answered Jul 28, 2010 at 20:40

Henrik Opel

19.5k2 gold badges50 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ErichBSchulz · Accepted Answer · 2013-10-16 13:19:10Z

the question could be - "how can I fire a js function with updated on a dupal call back parameters"

this is what I did:

my form like this:

$form['letterdrop_id'] = array(                       
    '#type' => 'select',                              
    '#title' => 'Letterdrops',                        
    '#options' => $letterdrops,                       
    '#prefix' => '<div id="replace_div_ld">',         
    '#suffix' => '</div>',                            
    '#ajax' => array(                                 
      'callback' => 'agc_ems_form_map_change',        
      ),                                              
    );

with this call back function:

function agc_ems_form_map_change($form, &$fstate) {              
   return array(                                                 
    '#type' => 'ajax',                                           
    '#commands' => array(
      // this command is to reload a form element                                        
      ajax_command_replace("#agc_map", render($form['map'])),    
      // this command does the business and calls my custom function, 
      // with a parameter object supplied
      array('command' => 'afterAjaxCallbackExample',             
          'selectedValue' => 'i am not a fish',                  
    )                                                            
  ));                                                            
}

this is my js function

(function($, Drupal) {                                                      
  // put function into drupal commands:   
  Drupal.ajax.prototype.commands.afterAjaxCallbackExample = 
     function(ajax, response, status) {
    // response object as passed in our Ajax callback          
    // do what you want in here
    alert(response.selectedValue);                                          
  };                                                                        
}(jQuery, Drupal));

100% credit to jaypan

Wes · Accepted Answer · 2010-07-28 20:20:21Z

-1

To add a script you need to use document.createElement("script") you can't just set innerHTML. see http://www.phpied.com/javascript-include-ready-onload/ for a good example that deals with seperate browsers.

answered Jul 28, 2010 at 20:20

Wes

7,1277 gold badges36 silver badges60 bronze badges

Collectives™ on Stack Overflow

How to reload the custom JavaScript file after Drupal makes ajax call?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related