h:selectBooleanCheckbox does not work the first time

Question

I want to make an outputtext that is appearing according to a value of checkbox; here is my code:

<?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:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">

<body>
    <ui:composition template="../WEB-INF/templates/template.xhtml">
        <ui:define name="content">
            <h:form id="formModifClt">
            <h:outputText value="voulez-vous modifier cette image ?"/>
            <h:selectBooleanCheckbox value="#{clientController.modifierImage}" >
            <f:ajax event="click" listener="#{clientController.onChangeCheckBox()}" render="textPanel" />
            </h:selectBooleanCheckbox>
            <p:outputPanel id="textPanel" autoUpdate="true" >
            <h:outputText value="Oui" rendered="#{clientController.modifierImage}" />
            <h:outputText value="Non" rendered="#{!clientController.modifierImage}" />
            </p:outputPanel>
        <p:outputPanel autoUpdate="true" >
        <h:outputText value="Logo" rendered="#{clientController.modifierImage}" id="logo" />
        <p:fileUpload id="up" fileUploadListener="#{fileUploadController.handleFileUpload}"  
                  mode="advanced" 
                  sizeLimit="100000" 
                  required="true"
                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/" rendered="#{clientController.modifierImage}"/>
        </p:outputPanel>
        <p:commandButton action="#{clientController.modifClient()}" value="Modifier" ajax="false"/>
            </h:form>
        </ui:define>

    </ui:composition>
</body>

my problem is that the first time the user click on checkbox the value is not changing and the onChangeCheckBox() is not wroking. Starting with the second time, it works fine. NB: I don't want to do it in javascript because I have other treatments done according to boolean checkbox.

here is my controller:

public void onChangeCheckBox () {
    System.out.println("modifierImage="+modifierImage);
}

 /**
 * @return the modifierImage
 */
public boolean isModifierImage() {
   return modifierImage;
}

/**
 * @param modifierImage the modifierImage to set
 */
public void setModifierImage(boolean modifierImage) {
    this.modifierImage = modifierImage;
}

with the solution of balusC is better (it does not give a chcked checkButton when it is clicked on the first time) but the problem still exists !

Can you post your clientController? – 8bitjunkie Dec 21 '12 at 10:39 — 8bitjunkie, Dec 21 '12 at 10:39
What scope is the controller? – 8bitjunkie Dec 21 '12 at 16:02 — 8bitjunkie, Dec 21 '12 at 16:02

8bitjunkie · Answer 1 · 2012-12-21T16:07:11.907

0

At first glance I can't see any particular event and any component to be re-rendered, so how's this as a starter for 10?

<h:form>
<h:selectBooleanCheckbox value="#{clientController.modifierImage}" >
                 <f:ajax event="click" listener="#{clientController.onChangeCheckBox()}" render="textPanel" />
            </h:selectBooleanCheckbox>
            <p:outputPanel id="textPanel" autoUpdate="true">
                <h:outputText value="Yes" rendered="#{clientController.modifierImage}" />
                <h:outputText value="No" rendered="#{!clientController.modifierImage}" />
            </p:outputPanel>
</h:form>

If further help is required, please post your controller class.

edited Dec 21 '12 at 16:07

answered Dec 21 '12 at 10:45

8bitjunkie

12,793
9
57
70

I found that the event is click and not onclick, but it still does not work the first time !! – ktaria Dec 21 '12 at 15:02
2

`onclick` event doesn't exist. You're confusing with `onclick` attribute of a HTML element which should trigger some JS function handler on `click` event. The real event name is `click`. – BalusC Dec 21 '12 at 15:03
I wonder if this is a postback issue – 8bitjunkie Dec 21 '12 at 16:08

score 0 · Accepted Answer · answered Jul 01 '13 at 07:18

0

I found that, sometimes, it depends on pages called before the current page ! I made them in ajax="false" and it works fine !!

answered Jul 01 '13 at 07:18

ktaria

423
6
16

score 0 · Answer 3 · answered Apr 28 '14 at 08:27

I had the same problem. From me it was the <h:form> element that prevented from updating the first time click. Here how it looked like :

<f:facet name="body">
    <h:form>
      <h:panelGroup id="bodyContainer">
        <h:selectBooleanCheckbox title="#{bundle['some.good.text']}" value="#{bean.checkMe}">
          <f:ajax render="bodyContainer"  />
        </h:selectBooleanCheckbox>
        #{bundle['some.realy.good.text']}  
        <br />
      </h:panelGroup>
    </h:form>
</f:facet>

But as soon as <h:form> was removed every thing went back to normal.

h:selectBooleanCheckbox does not work the first time

3 Answers3