CODEWITHSUNDEEP
javascriptjsfpopuprichfaces
Eric
Eric

Reputation: 1973

Richfaces componentControl toggle popup

I'd like for a single control to show a rich:popupPanel if it isn't visible, and hide it if it's already visible.

Following through the tutorials and code examples, I've come up with: 

<h:outputLink value="#" id="loginLink">Login
    <rich:componentControl event="click"  operation="show" target="loginPane" >
        <a4j:param name="event" value="event" noEscape="true" />
        ... more params for positioning ...
    </rich:componentControl>
</h:outputLink>

<rich:popupPanel id="loginPane" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" onshow="#{rich:element('userName')}.focus()" >
    <h:form>
   ...
    </h:form>
</rich:popupPanel>

Which shows my popupPanel and subsequent form well. I just can't recognize a way to overload that outputLink's componentControl to hide as well as show. Naturally "toggle" isn't a keyword - that would be too easy :) I'm pretty new with JSF and javascript, and have been trying various things for the better part of today. Can anyone recommend something to get me in the right direction?

Upvotes: 0

Views: 2491

Answers (3)

Markus N.
Markus N.

Reputation: 243

I've just stumbled on this. Hopefully, someone will find my relatively simple solution useful after such a long time:

<h:form id="myForm">

  <h:outputScript>
    var popupVisible = false;

    function toggleComponent(component, currentVisibility) {
      if (!currentVisibility) {
        component.show();
      } else {
        component.hide();
      }
    }
  </h:outputScript>

  <rich:popupPanel id="myPopup" domElementAttachment="form" modal="false"
                   onshow="popupVisible = true;"
                   onhide="popupVisible = false;">
    <!-- popup content here -->
  </rich:popupPanel>

  <a4j:commandLink onclick="toggleComponent( #{rich:component('myPopup')}, popupVisible );">
    <h:graphicImage value="/images/some_fancy_icon.jpg" />
  </a4j:commandLink>

</h:form>

Please note: it only works with a non-modal panel.

You can even have multiple popups, and on onshow() of one popup, you can close all the others. Of course, you need a separate ...Visible variable for each of them.

Upvotes: 0

Eric
Eric

Reputation: 1973

In the end, I ended up just choosing the lazy route:

I edited the css of the page inline to take the rf-p-shade style not effect alpha and made an onmaskclick event to close the popup. I could not get it to replicate a "Toggle" like behavior with javascript or jsf notations.

Upvotes: 0

Carl
Carl

Reputation: 11

For me the following solution worked, while confirmPanel is the panel in the popup containing the updated data.

<rich:column>
    <a4j:commandButton value="Delete" render="confirmPanel"
        oncomplete="#{rich:component('confirmPane')}.show()"
        ajaxSingle="true">
        <a4j:param value="#{record.id}" assignTo="#{showActivitiesAsTableView.selectedActivityId}" />
    </a4j:commandButton>
</rich:column>

Upvotes: 1

Related Questions