problem with a4j:commandButtom in rich:popupPanel

[dandii]

hi again,

in my last discussion about the combination of a rich:dataTable and a rich:popupPanel the following solution was working.

After implementing the functionality of the a4j:commandButton I realized, that this is not the case.

In the listed code the h:button in the rich:popupPanel works stable. Also the method entityHome.remove(Long, String) is called by the a4j:commandButton. Both buttons are returning the same Link ("entity/entityList") but the popupPanel disappears only with the h:button.

When I call the remove method with a different link everything works fine. It looks like that link (in this case it is the link where this code is located) is not reloaded.

How can I call the remove method and can be forwarded to the same page again?

<h:form id="listForm">
     <h:panelGroup id="searchResults">
          <rich:panel id="richPanel">
               <f:facet name="header">List</f:facet>
               <a4j:outputPanel id="outPanel">
                    <div class="results" id="entityList">

                         <rich:dataTable id="dataTable" var="entity"
                               value="#{entityList.resultList}" >
 
                              <rich:column>
                                   <f:facet name="header">#{messages.id}</f:facet>
                                   <h:link id="idLink" value="#{entity.id}" outcome="/entity/entity">
                                   <f:param name="entityIdd" value="#{entity.id}" />                                   </h:link>
                              </rich:column>
 
                              <!-- other columns -->
 
                              <rich:column style="width:20px;text-align:center">
                                   <f:facet name="header">&#160;</f:facet>
                                   <h:commandLink id="delete" action="#{fileUploadHome.remove(entity.id)}" render="outPanel">
                                        <h:graphicImage name="img/delete.gif" alt="Delete" style="border:0px" />
                                        <rich:componentControl target="popup" operation="show"  />
 
<rich:componentControl target="popup" operation="show" />
<rich:popupPanel id="popup" height="100" width="300" resizeable="false">
    <f:facet name="header"> <h:outputText value="Some Text" /> </f:facet>
    <h:outputText value="Do you really want to delete this entity?" /> <br />
    <h:outputText value="ID: #{entity.id}" /> <br />
    <div class="actionButtons">
        <h:button id="cancel" value="#{messages.cancel}" outcome="/entity/entityList" />
        <a4j:commandButton id="deleteButton" value="#{messages.delete}" action="#{entityHome.remove(entity.id, '/entity/entityList')}" />
    </div>
</rich:popupPanel>

                                    </h:commandLink>
                                 </rich:column>
                         </rich:dataTable>
                    </div>
               </a4j:outputPanel>
          </rich:panel>
     </h:panelGroup>
</h:form>

Here the remove(Long, String) method of entityHome:

  public String remove(Long id, String origin){
    String remove = remove(id);
    return (origin == null || origin.equalsIgnoreCase("")) ? remove : origin;
  }

[ilya40umov]

1) You can use #{rich:component('')}.hide() in oncomplete method in a4j:commandButton

2) a4j components with Ajax submit were not good for a navigation in RF 3 and I think that if you want to do redirect on the other page you should better use h:commandButton.

3) a4j:commandButton and a4j:commandLink both have render attribute which points at elements which are supposed to be re-rendered on page.

B.T.W Do you have a lot of experience in using RF 3?

[dandii]

Hi Ilya,

I tried 1) and nothing changes.

For 2) the method entityHome.remove(Long, String) is not called anymore....

And also 3) doesn't change something.

I'm using this code:

                <a4:commandButton id="deleteButton" value="#{messages.delete}" action="#{entityHome.remove(entityId, origin)}" oncomplete="#{rich:component('popup')}.hide()}" >
                    <f:ajax event="click" execute="@this" />
                </a4j:commandButton>

To your question: I'm starting with RF now and I didn't use RF3....

[ilya40umov]

1) Hm. I think you are in trouble a little bit because you are trying to learn RF 4.0 but there is no complete documentation for RF 4.0. May be(It's only an option) you can try to learn JSF 1.2 with RF 3 first.

2) a4:commandButton does work of f:ajax. You should not use f:ajax in a4:commandButton

3) a4j:commandButton vs a4:commandButton. Are you sure about the prefix?

4) Don't try everithing. If you don't understand something try to avoid this and read some info on the Internet. Because it's hard to say what's wrong when you have too many problem on your page.

5) oncomplete="#{rich:component('popup')}.hide() is Ok. But I'm not sure that rich:popupPanel is ok inside the column of table. Try to move it outside the table.

6) rich:popupPanel should be outside the form and it can contain form inside

7) Try to play with components and make sure how they work in not such complicated case

[dandii]

hi Ilya,

you're right about the prefix... it's a a4j:commandButton.

And thank you for your hint that the rich:popupPanel should be outside the form!

My solution is that the entityList stores the selected entity and the popupPanel just removes this stored entity:

<h:form id="listForm">
     <h:panelGroup id="searchResults">
          <rich:panel id="richPanel">
               <f:facet name="header">List</f:facet>
               <a4j:outputPanel id="outPanel">
                    <div class="results" id="entityList">

                         <rich:dataTable id="dataTable" var="entity"
                               value="#{entityList.resultList}" >
 
                              <rich:column>
                                   <f:facet name="header">#{messages.id}</f:facet>
                                   <h:link id="idLink" value="#{entity.id}" outcome="/entity/entity">
                                   <f:param name="entityIdd" value="#{entity.id}" />                                   </h:link>
                              </rich:column>
 
                              <!-- other columns -->
 

    <rich:column style="width:20px;text-align:center">
        <f:facet name="header">&#160;</f:facet>
        <a4j:commandLink ajaxSingle="true" id="delete" oncomplete="#{rich:component('popup')}.show()">
            <h:graphicImage name="img/delete.gif" alt="Delete" style="border:0px" />
            <f:setPropertyActionListener value="#{entityId}" target="#{entityList.selectedId}" />
        </a4j:commandLink>
    </rich:column>

                         </rich:dataTable>
                    </div>

    <rich:popupPanel id="popup" height="100" width="300" resizeable="false" onmaskclick="#{rich:component('popup')}.hide()">
        <f:facet name="header"> <h:outputText value="#{headerText}" /> </f:facet>
        <h:form>
            <!-- other content -->
            <div class="actionButtons">
                <a4j:commandButton ajaxSingle="true" id="cancelButton" value="#{messages.cancel}" oncomplete="#{rich:component('popup')}.hide()" />
                <a4j:commandButton id="delete" value="#{messages.delete}" action="#{entityHome.remove(entityList.selectedId)}" oncomplete="#{rich:component('popup')}.hide();"/>            </div>        </h:form>
    </rich:popupPanel>
 
                </a4j:outputPanel>
          </rich:panel>
     </h:panelGroup>
</h:form>