9 Replies Latest reply on Dec 31, 2011 2:50 PM by robert walker

    how to call jQuery fadeIn() and fadeOut() on a rich:popupPanel

    robert walker Newbie

      Hi all, i was hoping there was a way to call jQuery's fadeIn() instead of the javascript api show()

       

      I am currently using this code, but would like to replace javascript show() with a jquery fadeIn()

       

      I am stumbling around trying to get this to work , reading Ilya's PR4 book and wonder if anyone had some suggestions

       

      here is my code that works but without the jQuery fadeIn()

      (would like to use fadeOut() also to close the rich:popupPanel)

       

       

      <a4j:commandLink id="deleteBtnId" onclick="#{rich:component('confirmationDlg')}.show();return false" >
      

       

       

      <rich:dataTable id="table" value="#{controller.list}" var="ithData">
      .
      .
      <rich:column>
      ..
      <a4j:commandLink id="deleteBtnId" onclick="#{rich:component('confirmationDlg')}.show();return false" />
      
      <a4j:jsFunction name="deleteDataById"
                 actionListener="#{controller.deleteById(ithData.id)}" />
      
      <rich:popupPanel    id="confirmationDlg" modal="true">
                                                                                <h:outputText value="Are you sure you want to delete the data?" />
                                                                              
                <!-- delete data if 'Delete' is clicked, and remove rich:popupPanel,  want to use jQuery fadeOut()-->
                <h:commandButton value="Delete"
                     onclick="#{rich:component('confirmationDlg')}.hide(); deleteDataById(); return false" />
                                              
                <!-- no delete, remove rich:popupPanel   want to use jQuery fadeOut() -->
                <h:commandButton value="Cancel"
                     onclick="#{rich:component('confirmationDlg')}.hide();return false" />
                                          
      </rich:popupPanel>
      

       

       

      I was thinking something like this might work for the showing/fadeIn of the rich:popupPanel

       

      <a4j:commandLink id="deleteBtnId" />
      
      <rich:jQuery selector="#deleteBtnId" 
                         query="click(function(){
                              jQuery('#confirmationDlg').fadeIn();return false;
                         })"
      />
      

       

      I also tried

       

      <a4j:commandLink id="deleteBtnId" />
      
      <rich:jQuery selector="#deleteBtnId" 
                          event="click"
                         query="jQuery('#confirmationDlg').fadeIn();return false;" />
      

       

       

      can someone point me to an exampe or point me in the right direction

       

      thanks

        • 1. Re: how to call jQuery fadeIn() and fadeOut() on a rich:popupPanel
          Vitaliy Pavlov Novice

          Hi, Robert

           


          Try this solution:

           

          <h:form>

                  <rich:popupPanel id="confirmationDlg" domElementAttachment="form" modal="true"

                                   onmaskclick="#{rich:component('confirmationDlg')}.hide()">

                      <f:facet name="header">

                          <h:outputText value="***********"/>

                          <f:facet name="controls">

                              <h:outputLink value="#"

                                            onclick="#{rich:component('confirmationDlg')}.hide(); return false;">

                                  X

                              </h:outputLink>

                          </f:facet>

           

                          <br/>

                          <h:outputText value="????????" escape="false"/>

           

                          <br/>

                          <br/>

                          <br/>

                          <br/>

           

           

                          <h:panelGrid columns="2">

                              <a4j:commandButton

                                      onclick="jQuery(#{rich:clientId('confirmationDlg')}).fadeOut(); return true;"

                                      value="OK">

                              </a4j:commandButton>

           

                              <h:commandButton

                                      onclick="jQuery(#{rich:clientId('confirmationDlg')}).fadeOut(); return false;"

                                      value="Cancel"/>

                          </h:panelGrid>

                      </f:facet>

                  </rich:popupPanel>

              </h:form>

           

          Regards, Vitaliy

          • 2. Re: how to call jQuery fadeIn() and fadeOut() on a rich:popupPanel
            robert walker Newbie

            thanks for the reply Vitaliy, it got me to investigating and experimenting some more, but i am still having problems even with your

            snippet.

             

             

            if I kick off the <rich:popupPanel ..> with a commandLink like so

             

             

             

            <a4j:commandLink id="deleteBtnId" onclick="#{rich:component('confirmationDlg')}.show();return false">
            

             

            the dlg opens, but my jQuery('#..').fadeOut() is not working when closing, it does go away, but fast, as if javascript api hide() was being called.

             

            I tried a few flavors of the onclick attribute of h:commandButton to try to get jQuery() to resolve properly because i assume

            it is not actually calling fadeOut()

             

            here are some of the versions i tried

             

            <h:commandButton value="Cancel" onclick="jQuery(#{rich:clientId('confirmationDlg')}).fadeOut();return false;" />

             

            <h:commandButton value="Cancel" onclick="jQuery('#{rich:clientId('confirmationDlg')}).fadeOut();return false;" />

            <h:commandButton value="Cancel" onclick="jQuery('##{rich:clientId('confirmationDlg')}').fadeOut();return false;" />

             

            any ideas on getting this to work?

             

            also, i did add domElementAttachment="form"  and i tried to find out exactly what the attribute

            onmaskclick="#{rich:component('confirmationDlg')}.hide()">

            does in the <rich:popupPanel ...> does but am not clear on it

             

            thanks for your help, it got me closer i am sure :-)


             

            • 3. Re: how to call jQuery fadeIn() and fadeOut() on a rich:popupPanel
              robert walker Newbie

              hi all, i even broke this out into smaller bits to see what is wrong, and just can't get rich:jQuery to work correctly in RF 4.1.0

               

               

              <html   xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:rich="http://richfaces.org/rich">
              <h:head></h:head>
              <h:body> 
              <h:form id="myForm">
                 <rich:panel id="panelId" header="original header">text to change to red</rich:panel>
                 <input type="button" value="update panel" id="changeButton" />
                 <rich:jQuery selector="#changeButton" event="click" 
                        query="$('#panelId').css('color','red');
                               $('#panelId .rf-p-hdr').text('new header');"/> 
              </h:form>
              </h:body>
              </html>
              
              

               

              The click of the button totally ignores me, giving me the impression that query="${'#panelId'}.... is not be resolved correctly. if I use

              query="alert('test');" then indeed it does show the javascript popup, so it is being

              called, but i assume jQuery's selector is not finding the client id(s). I also tried jQuery instead of the $

               

              any ideas on how to fix this?

              • 4. Re: how to call jQuery fadeIn() and fadeOut() on a rich:popupPanel
                Vitaliy Pavlov Novice

                Hi, Robert

                 

                In such a way to use rich:jQuery is impossible.

                In attribute 'query' possible to change only that selected in attribute 'selector', like next example:

                http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=jquery&skin=blueSky

                 

                For your case will approach the following solution:

                 

                   <h:form id="myForm">

                        <rich:panel id="panelId" header="original header">text to change to red</rich:panel>

                        <a4j:commandButton value="update panel" id="changeButton" oncomplete="jQuery('#myForm .rf-p-b').css('color','red')"/>

                    </h:form>

                 

                Regards, Vitaliy

                 

                p.s. sorry for my bad English

                • 5. Re: how to call jQuery fadeIn() and fadeOut() on a rich:popupPanel
                  robert walker Newbie

                  i was able to get it working based in Ilya's and Max's book practical richfaces 4 second edition, the chapter 12 example does not use the fully qualified client id, and so i was not either, but i had to to get the example to work, here is a complete working example

                   

                  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:rich="http://richfaces.org/rich">
                  <h:head></h:head>
                  <h:body> 
                  <h:form id="myForm">
                     <rich:panel id="panelId" header="original header">
                                  <h:outputText id="panelTextId" value="text to change to red via jQuery" />
                     </rich:panel>
                     <input type="button" value="update panel" id="changeButton" />
                     <!-- or use <a4j:commandButton id="changeButton" value="update panel" /> -->
                     <rich:jQuery selector="#changeButton" event="click" 
                            query="jQuery('#myForm\\:panelTextId').text('new text').css('color','red');
                                   jQuery('#myForm\\:panelId .rf-p-hdr').text('new header');" /> 
                  
                  </h:form>
                  </h:body>
                  </html>
                   
                  
                  
                  
                  • 6. Re: how to call jQuery fadeIn() and fadeOut() on a rich:popupPanel
                    Vitaliy Pavlov Novice

                    Hi, Robert

                     

                    Yes, you are right

                    So, it is possible too

                     

                     

                    <h:form id="myForm">

                      <rich:panel id="panelId" header="original header">text to change to red</rich:panel>

                      <a4j:commandButton value="update panel" id="changeButton"/>

                      <rich:jQuery selector="#changeButton" query="click(function(){$('#myForm .rf-p-b').css('color','red');})"/>

                    </h:form>

                     

                    Regards, Vitaliy

                    • 7. Re: how to call jQuery fadeIn() and fadeOut() on a rich:popupPanel
                      robert walker Newbie

                      Getting closer Vitaliy, now back to the original issue, which i thought would be simple now that i got the selection correct via jQuery

                       

                      i want to use jQuery's fadeIn() instead of the javascript api show() provided for rich:popupPanel

                       

                      here is a simple example that i think should work based on our discoveries of using rich:jQuery, but the button just ignores me, probably because jQuery is not resolving to the rich:popupPanel

                       

                      any thoughts Vitaliy?

                       

                       

                      <h:form id="myForm">

                           <a4j:commandButton id="deleteButton" value="Delete Item" />

                          

                           <rich:jQuery selector="#deleteButton" event="click"
                                query="jQuery('#myForm\\:confirmationDlg').fadeIn();" />
                          
                           <!-- would pass in an id to deleteItem() if actually implemented -->
                           <a4j:jsFunction name="deleteDataViaAjaxAndJavaScript"
                                actionListener="#{backingBean.deleteItem()}" />

                       

                           <rich:popupPanel id="confirmationDlg"  modal="true"width="250" height="110"
                                domElementAttachment="form"> <!-- do i need this? -->
                          
                                <h:outputText value="Are you sure you want to delete?" /><br />

                                <h:commandButton value="Delete"
                                    onclick="#{rich:component('confirmationDlg')}.hide();deleteDataViaAjaxAndJavaScript();return false" />
                                <h:commandButton value="Cancel"
                                    onclick="#{rich:component('confirmationDlg')}.hide();return false;"/>
                           </rich:popupPanel>

                      </h:form>

                      • 8. Re: how to call jQuery fadeIn() and fadeOut() on a rich:popupPanel
                        Vitaliy Pavlov Novice

                        I made example, which work with rich:panel, to make sure code

                         

                        $('#myForm .rf-p').fadeOut();

                         

                        is working

                         

                        <h:form id="myForm">

                         

                                <a4j:commandButton id="show" value="show"/>

                                <a4j:commandButton id="hide" value="hide"/>

                         

                         

                                <rich:jQuery selector="#show"

                                             query="click(function(){

                                           $('#myForm .rf-p').fadeIn();

                                           })"/>

                                <rich:jQuery selector="#hide"

                                             query="click(function(){

                                           $('#myForm .rf-p').fadeOut();

                                           })"/>

                         

                                <rich:panel id="confirmationDlg" modal="true" width="250" height="110"> <!-- do i need this? -->

                         

                                    <h:outputText value="Are you sure you want to delete?"/><br/>

                         

                                    <h:commandButton value="Delete"

                                                      onclick="#{rich:component('confirmationDlg')}.hide();deleteDataViaAjaxAndJavaScript();return false"/>

                                    <h:commandButton value="Cancel"

                                                     onclick="#{rich:component('confirmationDlg')}.hide();return false;"/>

                                </rich:panel>

                         

                            </h:form>

                         

                        But, I think, this solution is not work with rich:popupPanel, because  rich:popupPanel have style attribute visibility:hidden (see screen in attached file).

                         

                        popup.jpg

                        popup.pngpopup.png

                        • 9. Re: how to call jQuery fadeIn() and fadeOut() on a rich:popupPanel
                          robert walker Newbie

                          very interesting vitaliy!!!, i looked at this also in IE developer tools and noticed someting else which may be blocking this from working

                          The HTML view in IE8  Developer Tools shows this for the <rich:popupPanel id="confirmationDlg" .. />

                           

                          <div id="myForm:confirmationDlg" style="visibility: hidden;" rf="[object Object]">

                           

                          notice the rf="[object Object]"  I am wondering what that is, and maybe accessing the rich:popupPanel's <div>

                          has something to do with that, or like you mention, maybe because the initial style is  visibility: hidden

                          has something to do with it.

                           

                          I asked Ilya (co author of Practical Richfaces 4 second edition) to take a look at it if he has a chance, so i think it

                          can't be done unless one of the jboss wiz guys helps out. thanks so much for taking a peek at this with me, we learned a little through

                          this whole coding drill.