7 Replies Latest reply on Jul 3, 2009 6:25 PM by eligriv

    Double Click Prevention

    jimjxr.jimjxr.gmail.com
      Hi

      Are there mechanisms for double click prevention in Seam or RichFaces? There're some server side solutions for JSF (for example http://jroller.com/page/mert?entry=jsf_preventing_double_form_submit) and Shale seems to have a Token mechanism built-in, but it seems to be a common enough function that should be handled by framework.

      Thanks
        • 1. Re: Double Click Prevention

          Is this a problem related to clicking a commandLink twice and having conversations go haywire because of it?  If so, I'm interested in some responses to this as well.

          • 2. Re: Double Click Prevention
            dro_k

            You can disable the button/link after clicking on it. I know this is not 100% foolproof but it should do the trick.

            • 3. Re: Double Click Prevention

              If you are using RichFaces you could add the following to your page.


              <rich:jQuery selector="form" query="submit(function(){disableButtons();disableSubmits(this);})" timing="onload"/>
                    <rich:jQuery name="disableButtons" selector=":button" query="attr('disabled','disabled');" timing="onJScall" />
                    <rich:jQuery name="disableSubmits" selector=":submit" query="attr('disabled','disabled');" timing="onJScall" />



              This will disable all buttons on the page when the form is submitted.

              • 4. Re: Double Click Prevention
                mrossix

                It's strange that Seam doesn't support a native solution for the double click problem.

                • 5. Re: Double Click Prevention
                  asookazian

                  If you use a4j:commandButton and a4j:commandLink instead of the h: equivalents, you can use this that I got from Max Katz's Practical RF book:


                  <rich:modalPanel id="mpWait" 
                                            style="text-align:center"
                                            height="100"
                                            width="150">
                            <h:form>
                                 <h:panelGrid>
                                      <h:outputText value="Please wait..."
                                                       style="font-weight:bold;font-size:large"/>
                                      <rich:spacer height="20"/>
                                      <h:graphicImage value="/img/spinner.gif"/>
                                 </h:panelGrid>
                            </h:form>
                       </rich:modalPanel>
                        
                       <a4j:status id="actionStatus"
                               onstart="Richfaces.showModalPanel('mpWait')"
                               onstop="Richfaces.hideModalPanel('mpWait')"/>



                  add this to each of your facelets by doing this:


                  <ui:include src="/pleaseWaitModalPanel.xhtml"/>



                  It will work for a4j:support submissions, like when an action is fired when the user selects a different value in HtmlSelectOneMenu, for example.


                  This works very well and is an elegant solution that is used by many prominent external-facing web sites.  Our users like it a lot...

                  • 6. Re: Double Click Prevention
                    asookazian
                    • 7. Re: Double Click Prevention

                      i use rich:componentControl :




                      <h:commandLink id="id" action="#{action}">
                           <r:componentControl for="popup" operation="show" event="onclick" />
                           <r:componentControl for="popup" operation="hide" event="oncomplete" />
                      </h:commandLink>





                      <r:modalPanel id="popup">
                           //msg or img
                      </r:modalPanel>