3 Replies Latest reply on Apr 4, 2007 11:08 AM by Julien Martin

    Scriptaculous effect not working after a form submit [FF]

    Julien Martin Expert

      Hello,
      I have the following page:

      <%@page contentType="text/html"%>
      <%@page pageEncoding="UTF-8"%>
      
      <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
      <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
      <%@taglib prefix="a4j" uri="https://ajax4jsf.dev.java.net/ajax"%>
      
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      
      <html>
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>JSP Page</title>
      
       <script src="js/prototype.js" type="text/javascript"></script>
       <script src="js/scriptaculous.js" type="text/javascript"></script>
      
       </head>
       <body>
      
       <div id="myDiv">
       Hello I should pulsate..
       </div>
      
       <f:view>
       <a4j:status startText="in progress" stopText="done"/>
       <br>
       <a4j:outputPanel id="monpanel" layout="block">
      
       <h:form id="myform">
       <h:panelGrid id="mygrid" columns="3">
       <h:outputText id="name-label" value="Fill in your name"/>
       <h:inputText id="name" value="#{MyBean.name}" required="true">
       <a4j:support ajaxSingle="true" event="onblur" reRender="name,name-message"/>
       <f:validateLength minimum="3"/>
       </h:inputText>
       <a4j:outputPanel id="name-message" ajaxRendered="true">
       <h:message for="name"/>
       </a4j:outputPanel>
       <h:outputText id="age-label" value="Fill in your age"/>
       <h:inputText id="age" value="#{MyBean.age}" required="true">
       <a4j:support ajaxSingle="true" event="onblur" reRender="age,age-message"/>
       <f:validateLongRange minimum="5"/>
       </h:inputText>
       <a4j:outputPanel id="age-message" ajaxRendered="true">
       <h:message for="age"/>
       </a4j:outputPanel>
       <a4j:commandButton value="Go!" reRender="monpanel" onmouseover="new Effect.Pulsate('myDiv')"/>
       <h:panelGroup/>
       <h:panelGroup/>
       </h:panelGrid>
       </h:form>
      
       </a4j:outputPanel>
       </f:view>
       </body>
      </html>
      
      


      and I noticed that my scriptaculous effect (pulsate) no longer works after I have submitted the form. This problem is only present on FF and not on IE.

      Any suggestion?

      Thanks in advance,

      Julien.