UI components dont update after backing bean value has changed - jsf

Question

<h:form>
<table>
<tr>
<td><label>First Name:</label></td>
<td><h:outputText value="#{profile.firstName}"
rendered="#{not profile.canEdit}" /></td>
<td><h:inputText value="#{profile.firstName}"
rendered="#{profile.canEdit}" required="true" /></td>
<td><h:commandButton value="Edit"
action="#{profile.editDetail}" /></td>
<td><h:commandButton value="Cancel" type="button"
action="#{profile.cancelBtn}" /></td>
</tr>
<tr>
<td><label>Last Name:</label></td>
<td><h:outputText value="#{profile.lastName}"
rendered="#{not profile.canEdit}" /></td>
<td><h:inputText value="#{profile.lastName}"
rendered="#{profile.canEdit}" required="true" /></td>
<td><h:commandButton value="Edit"
action="#{profile.editDetail}" /></td>
<td><h:commandButton value="Cancel" type="button"
action="#{profile.cancelBtn}" /></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><h:outputText value="#{profile.email}"
rendered="#{not profile.canEdit}" /></td>
<td><h:inputText value="#{profile.email}" id="email"
rendered="#{profile.canEdit}" required="true" /></td>
<td><h:commandButton value="Edit"
action="#{profile.editDetail}" /></td>
<td><h:commandButton value="Cancel" type="button"
action="#{profile.cancelBtn}" /></td>
<td><h:message for="email" value="#{profile.errorMessage}"
rendered="#{profile.errorMessage ne null}" /></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><h:outputText value="#{profile.password}"
rendered="#{not profile.canEdit}" /></td>
<td><h:commandButton value="Edit"
action="#{profile.editDetail}" /></td>
<td><h:commandButton value="Cancel" type="button"
action="#{profile.cancelBtn}" /></td>
</tr>
<h:panelGroup rendered="#{profile.canEdit}">
<tr>
<td><label>Old Password: </label></td>
<td><h:inputText value="#{profile.password}" required="true" /></td>
<td><h:outputText rendered="#{profile.errorMessage != null}"
value="#{profile.errorMessage}"></h:outputText></td>
</tr>
<tr>
<td><label>New Password: </label></td>
<td><h:inputSecret value="#{profile.newPassword}"
required="true" /></td>
</tr>
<tr>
<td><label>Confirm Password: </label></td>
<td><h:inputSecret value="#{profile.confirmPassword}"
required="true" /></td>
<td><h:outputText
rendered="#{profile.confirmPassword != profile.newPassword}"
value="Passwords donot match!!"></h:outputText></td>
</tr>
<tr>
<td><h:commandButton action="#{profile.savePassword}"
value="Save Password"
disabled="#{profile.confirmPassword != profile.newPassword}" /></td>
<td><h:commandButton action="#{profile.cancelBtn}" value="Cancel" type="button"/></td>
</tr>
</h:panelGroup>
<tr>
<td><label>Gender</label></td>
<td>#{profile.gender}</td>
</tr>
<tr>
<td><label>City</label></td>
<td>#{profile.city}</td>
</tr>
<tr>
<td><label>State</label></td>
<td>#{profile.state}</td>
</tr>
<tr>
<td><label>Country</label></td>
<td>#{profile.country}</td>
</tr>
<tr>
<td><label>Zip-Code</label></td>
<td>#{profile.zipCode}</td>
</tr>
<tr>
<td><label>Phone Number</label></td>
<td>#{profile.phoneNumber}</td>
</tr>
<tr>
<td><h:commandButton action="#{profile.saveDetails}"
disabled="#{profile.canEdit eq 'false'}" value="Save" /></td>
<td><h:commandButton action="#{profile.cancelBtn}" type="button"
value="Cancel" /></td>
</tr>
</table>
</h:form>
My code snippet of my backing bean
public String InitializeValues(){
customer = (CustomerVO) sessionManager.getSession("CustomerBean");
System.out.println("inside profilepagecontroller"+"\n"+ customer);
setFirstName(customer.getFirstName());
this.setLastName(customer.getLastName());
this.setEmail(customer.getEmail());
this.setPassword(customer.getPassword());
this.setCity(customer.getCity());
this.setState(customer.getState());
this.setCountry(customer.getCountry());
this.setPhoneNumber(customer.getPhoneNumber());
this.setGender(customer.getGender());
this.setZipCode(customer.getZipCode());
this.setCustomerId(customer.getCustomerId());
return "ProfilePage";
}
public String editDetail(){
setCanEdit(true);
setCanSave(true);
return null;
}
public String cancelBtn(){
setCanEdit(false);
return "ProfilePage";
}
Problems and solutions i need
when i click on cancelbutton, canEdit sets to false, but the
inputText does not get 'un'rendered on the screen. it does not render
outputText.
how do i get only a particular field in edit mode after i click edit?( creating separate boolean values for each field obv not
feasible)
setter methods set the values of fields of backing beans. after i run the code, same are not displayed on the screen. 'this' gets all
the values which i need to display, but not displayed on screen.

Answer 1

when i click on cancelbutton, canEdit sets to false, but the inputText
does not get 'un'rendered on the screen. it does not render outputText
Your commandButton has type="button" that shouldn't be the case.
how do i get only a particular field in edit mode after i click edit?(
creating separate boolean values for each field obv not feasible)
Huh Sure it is feasible. The only scenario I'd see you using that is if validation didn't pass for some component. Then I think you could try #{component.valid} in rendered. The problem is that all the component will be vaalid at the start then the invalid will not be rendered. To solve that check if the request is a postback:
public boolean isPostback(){
return FacesContext.getCurrentInstance().isPostback();
}
rendered="#{component.valid and not mybean.postback}"
setter methods set the values of fields of backing beans. after i run
the code, same are not displayed on the screen. 'this' gets all the
values which i need to display, but not displayed on screen.
I don't understand that question is it your capitalized method Initialize that your are talking about ? you should post the whole bean as well cuz it's never called here.