[SalesForce] reRendering loses javascript manipilations

I have a snippet of javascript which adds classes elements on the page once loaded, I have noticed that while reRendering the page these js changes are lost.

How can I have them reapplied/intact on rerender?

JS Example:

$( document ).ready(function() {        
          $('[data-filter="open"]').addClass('active');
...

Best Answer

Providing this script is not in the part of the page being re-rendered:

<script>
// Provide a function that can be used in oncomplete
function myInit() {
    $( document ).ready(function() {        
        $('[data-filter="open"]').addClass('active');
        ...
    };
}
// Initialise when the page first loads by calling the function
myInit();
</script>

you can invoke the initialisation code after the Ajax request completes by using the oncomplete attribute like this:

<apex:commandButton value="Do Something"
        reRender="something"
        oncomplete="myInit();"
        />
Related Topic