CODEWITHSUNDEEP
ajaxjsfxhtml
liliangarcia
liliangarcia

Reputation: 9

alert box pops up with the error during the selection of a radio button

We are implementing the functionality where the text box is disabled or enabled a jsf input component depending on value of another input component which is a radio button. The functionality works, but the alert box pops up with the error 

malformedXML: During update: new:j_idt335 not found

When I click on the radio select options

Radio Button Male O Radio Button Female O
Input Box Text Field Male [_____] Female [_____]

Upon selection the radio button for Male the Input box for Female is disabled

Upon selection the radio button for Female the Input box for Male is disabled 

 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    template="/src/template.xhtml">
<ui:define name="content">          
    <h:form id="new" enctype="multipart/form-data">
    <h:panelGroup id="id2">
    <p:growl id="growl" sticky="true" showDetail="true" />
    <p:wizard id="newWizard" showNavBar="true" widgetVar="wiz" flowListener="#{SelectMB.handleFlow}">  
            <p:tab id="tab"
                    title="Form">
                <ui:include src="/jsf/formgender.xhtml" />
            </p:tab>
        </p:wizard> 
    </h:panelGroup>
    </h:form>    
</ui:define>


formgender.xhtml 

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
    xmlns:pe="http://primefaces.org/ui/extensions"
>

<p:panel id="type" styleClass="panelNoBorder">  
    <p:fieldset toggleable="true"  toggleSpeed="500" 
legend="Info">

        <div class="ui-g">
            <div class="ui-g-1"><p:outputLabel value="genderType" /></div>
            <div class="ui-g-3">
            <p:row>
                <h:selectOneRadio value="#{SelectMB.genderType}">
                    <f:selectItem itemValue="male" 
  itemLabel="male" />
                    <f:selectItem itemValue="female" 
itemLabel="female" />

                    <f:ajax render="male" />
                    <f:ajax render="female" /> 
                </h:selectOneRadio>
            </p:row>

            </div>
            <div class="ui-g-1"><p:outputLabel value="male" /></div>
            <div class="ui-g-3">
            <p:row>
            <p:inputText id="male" value="#{SelectMB.male}" 
disabled="#{SelectMB.genderType eq 'female'}" />           
            </p:row>
            </div>

        </div>

        <div class="ui-g">

           <div class="ui-g-1"><p:outputLabel value="female" /></div>
            <div class="ui-g-3">
            <p:row>      
                    <p:inputText id="female"  value="# 
 {SelectMB.femaleList}"   disabled="#{SelectMB.genderType eq 'male'}" 
/>          
            </p:row>
            </div>      
        </div>              
       </p:fieldset>
    </p:panel>


SelectMB.java

private String genderType;

    public String getgenderType() {
    return genderType;
}
public void setgenderType(String genderType) {
    this.genderType = genderType;
}

private String male;
private String femaleList;

    public String getMale() {
    return male;
}
public void setMale(String male) {
    this.male = male;
}

    public String getFemaleList() {
    return femaleList;
}
public void setFemaleList(String femaleList) {
    this.femaleList = femaleList;
}

The functionality works as expected.

Error Message:-

When I click on the radio select options the functionality works as expected but an error message is shown in an alert box.

    malformedXML: During update: new:j_idt335 not found

Expected Results:-

If the "one" radio button is selected, the text input field of the other option should be disabled.

minimal reproducible example. jsf.version 2.0 

template.xhtml 
<h:form id="new" enctype="multipart/form-data"> 
<ui:include src="/jsf/formgender.xhtml" /> </h:form>                

formgender.xhtml 

<h:selectOneRadio value="#{SelectMB.genderType}"> 
<f:selectItem itemValue="male" itemLabel="male" /> 
<f:selectItem itemValue="female" itemLabel="female" />  
<f:ajax render="male" /> <f:ajax render="female" /> 
</h:selectOneRadio> 
<p:inputText id="male" value="#{SelectMB.male}" disabled="#{SelectMB.genderType eq 'female'}" /> 
<p:inputText id="female" value="#{SelectMB.femaleList}" disabled="#{SelectMB.genderType eq 'male'}" />

Upvotes: 0

Views: 106

Answers (1)

Exorcismus
Exorcismus

Reputation: 2482

Try add the both inputs to div and render that div like below

<h:selectOneRadio value="#{SelectMB.genderType}"> 
<f:selectItem itemValue="male" itemLabel="male" /> 
<f:selectItem itemValue="female" itemLabel="female" />  
<f:ajax render="input_" /> 
</h:selectOneRadio> 
<h:panelGrid layout="block" id="input_">
<p:inputText id="male" value="#{SelectMB.male}" disabled="#{SelectMB.genderType eq 'female'}" /> 
<p:inputText id="female" value="#{SelectMB.femaleList}" disabled="#{SelectMB.genderType eq 'male'}" />  
</h:panelGrid>

Upvotes: 0

Related Questions