JSF <trh:script>rendering and running order

Question

what is the order the javascipt function is running. each browser do something else for example I have this code:

  <h:panelGrid id="panel" columns="2" border="1" cellpadding="0" cellspacing="2">
    <f:facet name="header">
        <h:outputText value="#{messages.signInMessage}"/>
    </f:facet>
    <h:outputLabel for="username" value="#{messages.usernameLabel}" />
 </h:panelGrid>
 <trh:script>
       // do some logic
       // alert("end!");
 </trh:script>

I want that the script will run always after the panel is fully rendered so I could take his width for example and do with this something the the javascript function.

this works fine with in all browsers except for IE 8 the script is running before the panel was fully rendered.

any one can help me understand this issue , what is the correct order in more genreal what are the difference between the browsers : IE,Chrome,FF etc..

Answer 1

I would just use jQuery:

<tr:document>
  <trh:script source="jquery.js"></trh:script>
  <trh:script source="your_script.js"></trh:script>
  ...
</tr:document>

You can then just execute your script on page load (.ready):

$(document).ready(function(){
  // Your stuff here
});

If you are using Ajax (Trinidad Partial Page Rendering), you might want to add a state change listener in your Javascript. For example:

TrPage.getInstance().getRequestQueue().addStateChangeListener(function(state){
  if (state == TrRequestQueue.STATE_READY){
    // Your stuff here
  }
});