9 Replies Latest reply on Jan 17, 2008 1:09 PM by asookazian

    oncomplete not firing all js functions

    asookazian

      RF3.1.2.GA
      SEAM2.0.0.GA
      JBOSS4.2.1.GA

      in the code snippet below, the oncomplete js functions are not all firing (only closes the modalPanel). Why is this happening? My coworker is having the same problem with a4j:support and oncomplete not firing js functions.

      <a4j:form id="a4jMainForm3">
       <h:panelGrid columns="2" style="vertical-align:middle">
       <h:outputText id="description3" value=""/>
       <BR/>
       <h:inputTextarea id="noteText3" value="#{noteAction.noteText}" rows="6" cols="50">
       <a4j:support event="onkeyup" reRender="submit3PanelGroup" />
       </h:inputTextarea>
       <h:inputHidden id="modalPanelName" value="mpNoteAndEmployeeSubmit"/>
      
      
       <h:panelGroup id="submit3PanelGroup">
       <a4j:commandButton id="submit3" value="submit" actionListener="#{noteAction.submit}"
       oncomplete="alert('test oncomplete');clickDataTableSubmit();Richfaces.hideModalPanel('mpNoteAndEmployeeSubmit');alert('test oncomplete 2')" rendered="#{not empty noteAction.noteText2}">
       </a4j:commandButton>
       </h:panelGroup>
       <BR/>
       <!-- <h:commandButton value="cancel" type="button"
       onclick="Richfaces.hideModalPanel('mpNoteAndEmployeeSubmit');unselectCurrentRadioButton()"/> -->
       <a4j:commandButton value="cancel" type="button"
       onclick="Richfaces.hideModalPanel('mpNoteAndEmployeeSubmit');unselectCurrentRadioButton()"/>
      
       </h:panelGrid>
      </a4j:form>


        • 1. Re: oncomplete not firing all js functions

          It might be a issue how the concrete browser recognize the scope of the function(s) that appear(s) during the DOM update. If you do not mentioned the scope, it usually means it is the global function. I.e. the one that belong to window object.
          For example,

          function foo(bar) {
           // js code
          }

          actually, means:
          function window.foo(bar) {
           // js code
          }


          So, you can invoke it in both way:
          foobar = foo(bar);

          or
          foobar = window.foo(bar);

          or even,
          window.foobar = window.foo(bar);

          if you mean that foobar variable is a global one and want it to be accessible from the other js function on the same page.

          To make a long story short:
          Declare the scope for the function explicitly:
          function window.unselectCurrentRadioButton() {
          }


          and invoke it mentioning a scope explicitly also:
          oncomplete="window.unselectCurrentRadioButton()"









          • 2. Re: oncomplete not firing all js functions
            asookazian

            thanks for the quick reply. the problem is specific to oncomplete event/attribute in the following code. why don't the alert windows popup? only the hideModalPanel fires. Isn't this problem related to http://jira.jboss.com/jira/browse/RF-1487?

            <a4j:commandButton id="submit3" value="submit" actionListener="#{noteAction.submit}"
             oncomplete="alert('test oncomplete');clickDataTableSubmit();Richfaces.hideModalPanel('mpNoteAndEmployeeSubmit');
            alert('test oncomplete 2')"
             rendered="#{not empty noteAction.noteText2}">
             </a4j:commandButton>


            • 3. Re: oncomplete not firing all js functions

              How is clickDataTableSubmit() function declared? Is it located in the re-rendered area ?

              • 4. Re: oncomplete not firing all js functions
                asookazian

                this function resides in a .js file:

                function clickDataTableSubmit() {
                 document.getElementById("mainForm:dataTable1:" + currentRbRowNum + ":submitEmployee").click();
                 }


                that is included as follows in the xhtml:
                <script type="text/javascript"
                 src="js/securityAudit.js">
                 </script>


                My coworker tried the following and the alert did not popup and js function did not fire:
                <a4j:support event="onblur" oncomplete="alert('Hello Prasad'); return window.checkBarCode();" ajaxSingle="true" reRender="bc1, tempcompid,tempmsg, displayMessageLabel, errmsgheader, addnotesbtn, submit"/>


                The following alert did popup however:

                <a4j:support event="onblur" oncomplete="alert('Hello Prasad')" ajaxSingle="true" reRender="bc1, tempcompid,tempmsg, displayMessageLabel, errmsgheader, addnotesbtn, submit"/>



                • 5. Re: oncomplete not firing all js functions

                  coworker case: Does the fireBug say something on console ?

                  • 6. Re: oncomplete not firing all js functions
                    asookazian

                    We're using IE7 (NTLM). My coworker removed the 'return' keyword in the oncomplete text as follows and it works now for him:

                    <a4j:support event="onblur" oncomplete="checkBarCode();" ajaxSingle="true" reRender="bc1, tempcompid,tempmsg, displayMessageLabel, errmsgheader, addnotesbtn, submit"/>


                    Mine, to clarify, is embedded in a rich:modalPanel. Mine still is having the problem, BUT ONLY in the alternate path/use case (click cancel button and then the submit button doesn't work properly). When you enter a new note and submit right away (don't click cancel first) it saves fine (i.e. js function is called).

                    <!-- note and row data submit -->
                    
                     <rich:modalPanel id="mpNoteAndEmployeeSubmit" minHeight="200" minWidth="450"
                     height="500" width="500" zindex="2000">
                    
                    
                     <f:facet name="header">
                     <a4j:outputPanel>
                     <h:outputText id="headerText3" value=""/>
                     </a4j:outputPanel>
                     </f:facet>
                     <a4j:outputPanel ajaxRendered="true">
                     <h:form id="noteLogList2">
                     <rich:datascroller align="left" for="myList" maxPages="20" rendered="#{noteAction.getNoteLogList().size() > 0}"/>
                     <rich:spacer height="30" rendered="#{noteAction.getNoteLogList().size() > 0}"/>
                     <rich:dataTable width="483" id="myList" rows="5"
                     value="#{noteAction.getNoteLogList()}" var="myRow"
                     rendered="#{noteAction.getNoteLogList().size() > 0}">
                     <f:facet name="header">
                     <rich:columnGroup>
                     <h:column>
                     <h:outputText styleClass="headerText" value="NoteText" />
                     </h:column>
                     <h:column>
                     <h:outputText styleClass="headerText" value="TimeStamp" />
                     </h:column>
                     </rich:columnGroup>
                     </f:facet>
                    
                     <h:column>
                     <h:outputText value="#{myRow.noteText}"/>
                     </h:column>
                     <h:column>
                     <h:outputText value="#{myRow.timeStamp}">
                     <s:convertDateTime dateStyle="short" timeStyle="medium" type="both"/>
                     </h:outputText>
                     </h:column>
                     </rich:dataTable>
                     </h:form>
                     </a4j:outputPanel>
                     <a4j:form id="a4jMainForm3">
                     <h:panelGrid columns="2" style="vertical-align:middle">
                     <h:outputText id="description3" value=""/>
                     <BR/>
                    
                     <h:inputTextarea id="noteText3" value="#{noteAction.noteText}" rows="6" cols="50">
                     <a4j:support event="onkeyup"
                     reRender="submit3PanelGroup" />
                     </h:inputTextarea>
                    
                     <h:inputHidden id="modalPanelName" value="mpNoteAndEmployeeSubmit"/>
                    
                     <h:panelGroup id="submit3PanelGroup">
                     <a4j:commandButton id="submit3" value="submit" actionListener="#{noteAction.submit}" oncomplete="alert('test oncomplete');clickDataTableSubmit();Richfaces.hideModalPanel('mpNoteAndEmployeeSubmit');alert('test oncomplete 2')"
                     rendered="#{not empty noteAction.noteText2}">
                     </a4j:commandButton>
                    
                     </h:panelGroup>
                    
                     <BR/>
                     <!-- <h:commandButton value="cancel" type="button" onclick="Richfaces.hideModalPanel('mpNoteAndEmployeeSubmit');unselectCurrentRadioButton()"/> -->
                     <a4j:commandButton value="cancel" type="button" onclick="Richfaces.hideModalPanel('mpNoteAndEmployeeSubmit');unselectCurrentRadioButton()"/>
                     </h:panelGrid>
                     </a4j:form>
                    
                     </rich:modalPanel>


                    • 7. Re: oncomplete not firing all js functions
                      asookazian

                      I tried the following, based on code from http://jira.jboss.com/jira/browse/RF-1487
                      and it works fine with RF3.1.2.GA and Seam2.0.0.GA.
                      I will add a rich:modalPanel to below code to see what happens.

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <html xmlns="http://www.w3.org/1999/xhtml"
                       xmlns:ui="http://java.sun.com/jsf/facelets"
                       xmlns:f="http://java.sun.com/jsf/core"
                       xmlns:rich="http://richfaces.ajax4jsf.org/rich"
                       xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
                       xmlns:h="http://java.sun.com/jsf/html">
                      
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                      <title>Sample 1487</title>
                      </head>
                      
                      <body>
                      <h:form id="form">
                      
                       <a4j:jsFunction name="callfunction" data="#{onCompleteBean.property1}"
                       oncomplete="alert(data);" />
                       <a4j:commandLink value="Test onclick" onclick="callfunction();"/>
                       <br />
                       <a4j:commandLink value="Test oncomplete" oncomplete="callfunction();"/>
                       <br />
                       <a4j:commandLink value="Test onbeforedomupdate" onbeforedomupdate="callfunction();"/>
                       <br />
                       <a4j:commandLink value="Test ondblclick" ondblclick="callfunction();"/>
                      
                       <a4j:log popup="false"></a4j:log>
                      </h:form>
                      
                      <h:form id="form2">
                      
                       <a4j:jsFunction name="callfunction" data="#{onCompleteBean.property1}" oncomplete="alert(data);" />
                       <h:graphicImage value="/img/yellow.jpg" onclick="callfunction();" />
                      
                       <a4j:log popup="false"></a4j:log>
                      </h:form>
                      
                      </body>
                      </html>


                      • 8. Re: oncomplete not firing all js functions

                        It used to be a bug how the parameters are passed to the oncomplete function. The bug was fixed yesterday in 3.2.X (already in the nightly build) and today in 3.1.x (not yet in the nightly build). However, I am not sure that source of the problem is the same in al three cases you mentioned in this post.

                        P.S. Using < a4j:commandLink value="Test ondblclick" ondblclick="callfunction();" /> is not quite correct because doubles Ajax requests.

                        • 9. Re: oncomplete not firing all js functions
                          asookazian

                          What exactly was the bug? And which JIRA are you referring to when you speak of the fix being applied? thx.