function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
KMForceKMForce 

Document Ready and Re-rendering

Hi I need a clarification about when does the jQuery document ready event gets fired. I had a thought that when the document is completely loaded then it gets fired. YES IT IS. But it is also getting fired when you reRender the script which registers document ready event. (Ideally it should not because we are just reRendering not loading the page.) It would be very helpful if someone has any views on it.

Here is the code which gives above stated behaviour.
<apex:page showHeader="true" sidebar="true">
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>
<apex:form>
<apex:pageBlock>
  <apex:pageBlockButtons>
   <apex:commandButton  value="ReRenderPanel" action="{!null}" reRender="scriptPanel"/>
  </apex:pageBlockButtons>
  <apex:pageBlockSection id="scriptPanel">
   <script>
    jQuery(function(){ //document ready
     alert('Document is ready');
    });
   </script>
  </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Vamsi KrishnaVamsi Krishna
since the script with the document ready function is placed inside the pageBlockSection which is reloaded everytime you click the button,
the script inside it is also getting executed everytime you hit the button..
if you just want it to run only once when the initial document load move the script out of the pageBlockSection.. something like this..

<apex:page showHeader="true" sidebar="true">
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>
<script>
    jQuery(function(){ //document ready
     alert('Document is ready');
    });
   </script>
<apex:form>
<apex:pageBlock>
  <apex:pageBlockButtons>
   <apex:commandButton  value="ReRenderPanel" action="{!null}" reRender="scriptPanel"/>
  </apex:pageBlockButtons>
  <apex:pageBlockSection id="scriptPanel">

  </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
KMForceKMForce
Thanks Vamsi, for telling me the working solution. But I was more interested in how does it work. I had aa idea that jQuery ready event gets fired when the document is ready but in my case page was already loaded and I was just reRendering the script so my thought was that it is registering the event but its trigger action (document ready) will never happen and it will not get called again. But I guess my concept are wrong jQuery ready is getting fired even if the DOM is changed.

With your solution I am good with page, but when I write script inside a component then the component's user has right to reRender the whole component and there I will have no way to stop script from executing again. Let me know if you have any views on it.