Search code examples
popupeditorrichfaces

Richfaces 4 popup editor woes

Richfaces 4.2.2

I have added a button within a rich:datatable that causes a rich:popup panel to appear. The popup panel contains a <rich:editor/> and 2 <h:commandButton/>s

The button in the datatable calls a method in the backing bean to set the String to be edited, and the editor is mapped to this attribute - I know that the button is setting the String in the backing bean.

I have also added an <h:outputText/> to the popup panel to show the value of the String to be edited

The problems are:

  1. When the editor displays, the edit panel cannot be used until the source button has been pressed a couple of time to put it into and out of source mode
  2. The value of the backing bean attribute is not displayed in the editor
  3. The commandButton mapped to a method in the backing bean does not call the method
  4. The outputText shows the correct value the first time but it does not change on subsequent uses of the popup panel when different rows in the datatable are used

I have tried with the popup and datatable in the same for and in separate forms and have tried the separate form both inside and outside the popup panel

Here is the page

    <h:html xmlns="http://www.w3c.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

 .
 .
 .
    <h:form id="blogForm" prependId="false">

      <rich:popupPanel  id="mp" minHeight="600" minWidth="450"  height="600" width="800" resizeable="true">
        <f:facet name="header">
            <h:outputText value="Modal Panel Title" />
        </f:facet>

        <rich:editor id="editor" toolbar="full" value="#{blogBean.currentEntry}" skin="office2003" viewMode="visual">
          <f:param name="auto_focus" value="editor" />
        </rich:editor>

        <h:outputText escape="false" value=")))#{blogBean.currentEntry}(((" />

        <h:commandButton value="Save" action="#{blogBean.save}">
          <rich:componentControl target="mp" operation="hide" />  
        </h:commandButton>
        <h:commandButton value="Cancel" >
          <rich:componentControl target="mp" operation="hide" />  
        </h:commandButton>
      </rich:popupPanel>


     <a4j:commandButton value="Add new post" rendered="true" >
       <rich:componentControl target="mp" operation="show" />
     </a4j:commandButton>

     <h:panelGrid columns="1">
       <a4j:outputPanel id="panel" layout="block">                
         <rich:dataTable value="#{blogBean.entries}" columns="1" var="entry" rows="20" id="repeat" >
                 <rich:column width="800">
                     <rich:panel>
                       <f:facet name="header">
                          <a4j:commandButton value="Edit" rendered="true" oncomplete="#{rich:component('mp')}.show()">
                            <f:setPropertyActionListener value="#{entry}" target="#{blogBean.currentEntry}" />
                          </a4j:commandButton>
                       </f:facet>
                       <h:outputText escape="false" value="#{entry}" />
                     </rich:panel>
             </rich:column>
         </rich:dataTable>            
       </a4j:outputPanel>            
    </h:panelGrid>   
    </h:form>
  </h:body>

</h:html>
Solution

  • (2) and (4) are most likely because you're not actually updating their values via ajax.

    1. Add an id attribute to your <h:outputText/> and <rich:editor/> and include those ids in the render attribute for the commandbutton like so :

        <a4j:commandButton value="Edit" render="editorId,outputTextId" rendered="true" oncomplete="#{rich:component('mp')}.show()">
    <f:setPropertyActionListener value="#{entry}" target="#{blogBean.currentEntry}" />
  </a4j:commandButton>

      Also get rid of that markup you have in the <h:outputText/> and remove the escape attribute to be sure that is not causing the editor to choke.

    2. Set your managed bean to @ViewScoped for peace of mind.

    3. You're using a <h:commandButton/> in your popup. Unless this is by design, your choice here is counter-productive as this command button will trigger a full lifecycle request/postback and all that javascript you have nested in there is moot. Change those to <a4j:commandButton/>s. I'd suggest you remove your popup from that form and place a form within the popup by itself in the long run. If that doesn't change things, post your edits here to let us see exactly how you're doing it.