7 Replies Latest reply on Apr 27, 2011 9:48 AM by David Wagner

    popupPanel controls javascript syntax?

    David Wagner Newbie

      Documentation says that you can hide/show a popupPanel using onclick handler like this:

           onclick="#{rich:component('popup')}.hide()" 

       

       

      I'm unfamiliar with the use of #{} here.  I tried using this code in a larger javascript function, but got syntax error on the '#' symbol.

      Is this another one of those symbols jQuery redefines as a function/operator?  Couldn't find it in the jQuery docs either.

       

      I guess the real question here is how do I call this from an ordinary javascript function I've defined in a separate js file?

       

      Thanks.

        • 1. popupPanel controls javascript syntax?
          iabughosh Master

          Hi David,

          i think you can use it i a regular js function, i have this sample working :

          <script type="text/javascript">

           

                              function closePopup() {

                                        window.alert("closing dialog ....");

           

                                        #{rich:component('panel')}.hide();

                                        return false;

                              }

                    </script>

           

          regards.

          • 2. popupPanel controls javascript syntax?
            David Wagner Newbie

            I'm sure you're right, but I must still be missing something.  My javascript code is in a separate .js file that I'm pulling into the .html file using this:

                 <h:outputScript library="js" name="schedEvents.js" />

             

            That worked fine until I added the new line with the popup control.

            Now, when the page loads I get a javascript error complaining about "illegal character" on the line with the #.

             

            I'm assuming that the # character must be some magic operator defined by jQuery or RichFaces, and that I need to somehow get that library imported first, but I can't find it documented anywhere...

             

            Thanks for the help!

            • 3. popupPanel controls javascript syntax?
              David Wagner Newbie

              Ok, DOH! You're using an expression language call here, and I'm guessing some richfaces bean returns a reference to the client-side element that .hide() can be called on.  That only works if you use an inline script -- not if the script is in a separate js file.  I think that's my problem.

               

              So I guess my question is whether there is a PURE javascript way to close the popup.

              • 4. popupPanel controls javascript syntax?
                David Wagner Newbie

                If I move the function into an inline script the code to hide/show the popup works. However, now there's a different problem.

                I want this function to do two things: show the popup, and ajax render its form content.  It looks like I can successfully do one or the other, but not both.  If I just render the popup form's contents and use a separate button to show() it afterward I can see that it was correctly rendered.  And if I comment out the code that causes the ajax call the show() works fine.  If I do them together the popup is shown, but the form is empty, and it usually locks up the page in the browser too (firebug produces a <System> error).

                 

                I had originally tried attaching a componentControl to the component/event that causes the popup to render and that didn't work either. So, the following code causes the "details" popup to show, but the ajax rendering doesn't happen.  It does seem to submit the request, but the form ends up empty.

                 

                <h:commandButton id="tocoursedetailsviewsubmit"

                                        style="display:none">

                                        <rich:componentControl event="click" target="details" operation="show" />

                                        <a4j:ajax render="details" execute="tocoursedetailsviewinput" />

                                    </h:commandButton>

                • 5. popupPanel controls javascript syntax?
                  iabughosh Master

                  try using a4j:commandButton to show popup and use oncomplete event :

                  <a4j:commandButton value="show"

                                                                                           execute="myInputTxt"

                                                                                           render="outputMsg"

                                                                                           oncomplete="#{rich:component('panel')}.show()">

                  </a4j:commandButton>

                   

                  where myInputTxt is an inpuText outside the popup and outputMsg is an outputTxt inside the popup.

                  • 6. popupPanel controls javascript syntax?
                    Ilya Shaikovsky Master

                    at first Ibrahim Abu Ghosh is right and in order to perform both activities you should just send ajax request perform an update and call the hide() or show() in oncomplete.

                     

                    And in case you need to call js from the exterrnal js file and want to add plain JS here please check the http://community.jboss.org/wiki/RichFacesMigrationGuide33x-4xMigration-CommonComponentsChanges#client_api page. There is the result of rich:component evaluation shown,

                    1 of 1 people found this helpful
                    • 7. popupPanel controls javascript syntax?
                      David Wagner Newbie

                      That works!! Thanks!