How one can reload the custom JavaScript file after an Ajax call is pleted?
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 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.
How one can reload the custom JavaScript file after an Ajax call is pleted?
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 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.
Share Improve this question edited Mar 22, 2016 at 17:51 gariepy 3,6846 gold badges23 silver badges34 bronze badges asked Jul 28, 2010 at 20:15 jainchetanjainchetan 961 silver badge9 bronze badges3 Answers
Reset to default 3You 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.
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',
'#mands' => array(
// this mand is to reload a form element
ajax_mand_replace("#agc_map", render($form['map'])),
// this mand does the business and calls my custom function,
// with a parameter object supplied
array('mand' => 'afterAjaxCallbackExample',
'selectedValue' => 'i am not a fish',
)
));
}
this is my js function
(function($, Drupal) {
// put function into drupal mands:
Drupal.ajax.prototype.mands.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
To add a script you need to use document.createElement("script") you can't just set innerHTML. see http://www.phpied./javascript-include-ready-onload/ for a good example that deals with seperate browsers.