5 Replies Latest reply on Jun 3, 2012 5:45 PM by kwutzke

RF4: AJAXed h:selectBooleanCheckbox used inside rich:popupPanel only sets bean property to false (outside popup works)

kwutzke May 30, 2012 3:05 AM

Hello,

I have yet another popupPanel issue that I can't explain:

{code:xml}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
  
  <h:head>
  </h:head>
  
  <h:body>
    <h:form>
      <h:commandLink value="Edit">
        <rich:componentControl target="company-update-popup" operation="show" />
      </h:commandLink>
      
      <rich:popupPanel modal="true"
                       width="250"
                       height="100"
                       resizeable="false"
                       onmaskclick="#{rich:component('company-update-popup')}.hide(); return false;"
                       id="company-update-popup">
        <f:facet name="header">
          <h:outputText value="Edit Company" />
        </f:facet>
        <f:facet name="controls">
          <h:outputLink value="#" onclick="#{rich:component('company-update-popup')}.hide(); return false;">
            <h:outputText value="X" />
          </h:outputLink>
        </f:facet>
        <h:selectBooleanCheckbox value="#{testBean.withCompanyPostAddress}" id="company-update-postaddress-checkbox">
          <f:ajax />
        </h:selectBooleanCheckbox>
        <h:outputLabel value="Post address" for="company-update-postaddress-checkbox"/>
        <h:panelGrid columns="2" style="margin: 0 auto;">
          <h:commandButton value="Close" onclick="#{rich:component('company-update-popup')}.hide(); return false;" immediate="true" />
        </h:panelGrid>
        
      </rich:popupPanel>
        
      <h:selectBooleanCheckbox value="#{testBean.withCompanyPostAddress}" id="company-update-postaddress-checkbox2">
        <f:ajax />
      </h:selectBooleanCheckbox>
      <h:outputLabel value="Post address (outside popup)" for="company-update-postaddress-checkbox2"/>
        
    </h:form>
  </h:body>
  
</html>
{code}

Test bean:

{code}
@Named
@SessionScoped
public class TestBean implements Serializable
{
    private static final Logger log = LoggerFactory.getLogger(TestBean.class);
 
    private Boolean withCompanyPostAddress = true;
 
    public Boolean getWithCompanyPostAddress()
    {
        return withCompanyPostAddress;
    }
    
    public void setWithCompanyPostAddress(Boolean withCompanyPostAddress)
    {
        log.info("Setting company postaddress flag to {}", withCompanyPostAddress);
        
        this.withCompanyPostAddress = withCompanyPostAddress;
    }    
 
}
{code}

This just displays a link that pops up a dialog with a single check box on it:

When clicking the check box outside the popup the following is logged:

{code}
08:51:07,455 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to false
08:51:08,893 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to true
08:52:17,887 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to false
08:52:18,129 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to true
08:52:18,887 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to false
08:52:19,627 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to true
08:52:20,706 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to false
{code}

Using the one inside the popup yields only false:

{code}
08:52:28,439 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to false
08:52:29,001 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to false
08:52:29,944 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to false
08:52:31,173 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to false
08:52:31,424 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to false
08:52:32,430 INFO  [de.repo.TestBean] (http-localhost-127.0.0.1-8080-5) Setting company postaddress flag to false
{code}

What's wrong? Is it my code? I have no idea what should be wrong about it...

Does anyone know what's going on here?

Karsten

1. Re: RF4: AJAXed h:selectBooleanCheckbox used inside rich:popupPanel only sets bean property to false (outside popup works)

kwutzke Jun 2, 2012 9:37 AM (in response to kwutzke)
Could anyone please try the small example posted? It's strange what the popupPanel does to such a simple example.

I've tried using
{code}<f:ajax render="@this" />{code}
in the popup checkbox, making the popup checkbox delete it's new state, that is clicking it will uncheck to false shortly after clicking it.

I'd be glad if anybody could test this.

Karsten
Actions
2. Re: RF4: AJAXed h:selectBooleanCheckbox used inside rich:popupPanel only sets bean property to false (outside popup works)

ivan_ra Jun 3, 2012 2:58 AM (in response to kwutzke)

Your problem is because of every time all form values submitted.
And because company-update-postaddress-checkbox2 is last, its already "win". If you put company-update-postaddress-checkbox2 higher than company-update-postaddress-checkbox, company-update-postaddress-checkbox will win.
You have to substitute <f:ajax /> by <a4j:ajax execute="@this"/>, and after this only 1 value will be sended to server side.
Actions
3. Re: RF4: AJAXed h:selectBooleanCheckbox used inside rich:popupPanel only sets bean property to false (outside popup works)

kwutzke Jun 3, 2012 1:12 PM (in response to ivan_ra)

Did you actually try it?

Full @form submit isn't the case here: the default for <f:ajax> and <a4j:ajax> execute is @this, so it is implicit for both.

You can just delete the second check box and see for yourself.

Karsten
Actions
4. Re: RF4: AJAXed h:selectBooleanCheckbox used inside rich:popupPanel only sets bean property to false (outside popup works)

ivan_ra Jun 3, 2012 3:04 PM (in response to kwutzke)

Yes, you right, <f:ajax /> and <a4j:ajax execute="@this"/> are the same.
But I found you miss 1 attribute in rich:popupPanel declaration. You have to add domElementAttachment="form". Without this attribute popup panel displays outside form and its elements will not be submitted to server on post request.
Actions
5. Re: RF4: AJAXed h:selectBooleanCheckbox used inside rich:popupPanel only sets bean property to false (outside popup works)

kwutzke Jun 3, 2012 5:45 PM (in response to ivan_ra)

Bull's eye. This seems to work.

Hmmm........ Strange attribute. Reading the docs, looking at the showcase, and reading the book "Practical Richfaces" it doesn't become clear AT ALL what this thing does. When you read
Defines the DOM element, which stacking context will assimilate the popupPanel. Possible values: "body", "form", "parent". Default value is "body".
in the docs, what's this supposed to tell me? No explanation really. Strange.

Glad it works now. Thanks.

Karsten
Actions

Go to original post