Technote Details :: JavaScript OnLoad events do not work with AJAX panels
Issue
I have applied some OnLoad JavaScript events on the <body> tag of a page created with AJAX panels. However, these events are not fired anymore when the AJAX panels change their state.
Reason
This happens because in a page built with AJAX panels, only the AJAX panels change their state, without refreshing the whole page. Consequently, the OnLoad events you applied on the <body> tag are only fired once: the first time your page loads. After that, changing any of the AJAX panels will not trigger these events anymore.
Solution
To make the OnLoad events trigger the desired JavaScript action each time a panel changes, you should:
- Remove the OnLoad event from the body tag.
- Move the JavaScript function used for the OnLoad event inside a <script> tag placed right at the end of the AJAX panel:
<script type="text/javascript">
myFunction();
</script>
Now, each time the panel loads, myFunction() will be triggered. This is the panel equivalent of the OnLoad event for the body tag.
