primefaces removing fields when i do an ajax command button - jsf

Question

Im getting my primefaces scaffold ready for my developers and I have a problem. When I do a form submit with validation via AJAX, it displays the message right, but the return deletes all but the first field in the form. Its almost like something screwy in the return ajax call is causing everything after the first text field to fail to render. If I do a standard form submit button, it works just fine, but just with the ajax submit (which of course is the one i want to use) it acts weird. Any ideas?
My index.xhtml page. Just look for header="New Person", pasted it right out of the showcase
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:core="http://highmark.com/dtmcore"
xmlns:inq="http://highmark.com/dtminq"
template="templates/default.xhtml">
<ui:define name="navDisplay">
<ui:include src="navBar/mainNavBar.xhtml" />
</ui:define>
<ui:define name="content">
<script type="text/javascript">
$(document).ready(
function() {
jvers = $.fn.jquery;
$("#testJQueryLoaded").text(
"jQuery Loaded Correctly version " + jvers);
});
</script>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row clearfix">
<div class="col-md-12">
<div class="jumbotron">
<h2>Inquiry App System</h2>
<p>This page right now is used primarily for testing controls
and layout</p>
<p></p>
<span id="testJQueryLoaded"></span> <br />
<h3>Your application can run on:</h3>
<h:graphicImage library="gfx" name="dualbrand_as7eap.png" />
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12">
<div class="well">
<h:form id="form">
<p:panel id="panel" header="New Person" style="margin-bottom:10px;">
<p:messages id="messages" />
<h:panelGrid columns="3">
<h:outputLabel for="firstname" value="Firstname: *" />
<p:inputText id="firstname"
value="#{pprBean.firstname}" required="true" label="Firstname">
<f:validateLength minimum="2" />
</p:inputText>
<p:message for="firstname" />
<h:outputLabel for="surname" value="Surname: *" />
<p:inputText id="surname"
value="#{pprBean.surname}" required="true" label="Surname"/>
<p:message for="surname" />
</h:panelGrid>
</p:panel>
<p:commandButton value="Ajax Submit" update="panel,display" id="ajax"
actionListener="#{pprBean.savePerson}" styleClass="ui-priority-primary"/>
<p:commandButton value="Non-Ajax Submit" actionListener="#{pprBean.savePerson}"
ajax="false" />
<p:commandButton value="With Icon" actionListener="#{pprBean.savePerson}" id="withIcon"
update="panel,display" icon="ui-icon-disk" />
<p:commandButton actionListener="#{pprBean.savePerson}" update="panel,display" id="iconOnly"
icon="ui-icon-disk" title="Icon Only"/>
<p:commandButton value="Disabled" disabled="true" id="disabled" />
<p:panel id="display" header="Information" style="margin-top:10px;">
<h:panelGrid columns="2">
<h:outputText value="Firstname: " />
<h:outputText value="#{pprBean.firstname}" />
<h:outputText value="Surname: " />
<h:outputText value="#{pprBean.surname}" />
</h:panelGrid>
</p:panel>
</h:form>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-6">
<ui:include src="modules/buttonExample.xhtml" />
</div>
<div class="col-md-6">
<p:outputPanel id="displayHotkey">
<p:outputLabel value="Hotkey Result" />
<br />
<h:outputText value="#{hotkeyController.keyText}"
rendered="#{not empty hotkeyController.keyText}" />
</p:outputPanel>
</div>
</div>
<div class="row clearfix">
<div class="col-md-6">
<ui:include src="modules/datePickerExample.xhtml" />
</div>
<div class="col-md-6"></div>
</div>
<div class="row clearfix">
<div class="col-md-12">
<div class="well">
<h2>Members</h2>
<br />
<h:panelGroup rendered="#{empty members}">
<em>No registered members.</em>
</h:panelGroup>
<p:dataTable id="dataTable" var="_member" value="#{members}"
rendered="#{not empty members}"
styleClass="table table-striped table-bordered">
<p:column>
<f:facet name="header">Id</f:facet>
#{_member.id}
</p:column>
<p:column>
<f:facet name="header">Name</f:facet>
#{_member.name}
</p:column>
<p:column>
<f:facet name="header">Email</f:facet>
#{_member.email}
</p:column>
<p:column>
<f:facet name="header">Phone #</f:facet>
#{_member.phoneNumber}
</p:column>
<p:column>
<f:facet name="header">REST URL</f:facet>
/rest/members/#{_member.id}
</p:column>
<f:facet name="footer">
REST URL for all members: /rest/members
</f:facet>
</p:dataTable>
</div>
</div>
</div>
</div>
</div>
</ui:define>
<ui:define name="hotkeyMenu">
<ui:include src="hotkeyBar/hotkeyExample.xhtml" />
</ui:define>
</ui:composition>
And my template file (so far, work in progress)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>#{app.applicationName}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>#{app.applicationName}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<h:outputStylesheet name="css/bootstrap.min.css" />
<h:outputStylesheet name="css/inquiry.css" />
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<h:outputScript library="js" name="respond.min.js" />
<h:outputScript library="js" name="bootstrap.min.js" />
<!-- <h:outputScript library="js" name="bootstrap-dropdown.js"/> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</h:head>
<h:body>
<div class="container">
<div class="row">
<div class="col-md-12 column">
<ui:insert name="navDisplay">[Navigation Display inserted here]</ui:insert>
</div>
<div class="row show-grid">
<div class="col-md-11 column">
<div class="row">
<div class="col-md-12 column">
<ui:insert name="content">[Template content will be inserted here]</ui:insert>
</div>
</div>
</div>
<div class="col-md-1 column">
<ui:insert name="hotkeyMenu">[The Hotkey vertical bar goes here.]</ui:insert>
</div>
</div>
<div class="row">
<div class="col-md-12 column">
<p>United Concordia Rocks!</p>
</div>
</div>
</div>
</div>
<!--/.fluid-container-->
</h:body>
</html>
my backing bean
import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import org.primefaces.context.RequestContext;
#ManagedBean(name = "pprBean")
#SessionScoped
public class PPRBean implements Serializable {
private String firstname;
private String surname;
private String city;
private String suburb;
private Map<String, String> cities = new HashMap<String, String>();
private Map<String, Map<String, String>> suburbsData = new HashMap<String, Map<String, String>>();
private Map<String, String> suburbs = new HashMap<String, String>();
private Map<String, String> rooms = new HashMap<String, String>();
private Map<String, Map<String, String>> itemsData = new HashMap<String, Map<String, String>>();
private Map<String, String> items = new HashMap<String, String>();
private String room;
private String item;
private String[] selectedCities;
public PPRBean() {
cities.put("Istanbul", "Istanbul");
cities.put("Ankara", "Ankara");
cities.put("Izmir", "Izmir");
Map<String, String> suburbsIstanbul = new HashMap<String, String>();
suburbsIstanbul.put("Kadikoy", "Kadikoy");
suburbsIstanbul.put("Levent", "Levent");
suburbsIstanbul.put("Cengelkoy", "Cengelkoy");
Map<String, String> suburbsAnkara = new HashMap<String, String>();
suburbsAnkara.put("Kecioren", "Kecioren");
suburbsAnkara.put("Cankaya", "Cankaya");
suburbsAnkara.put("Yenimahalle", "Yenimahalle");
Map<String, String> suburbsIzmir = new HashMap<String, String>();
suburbsIzmir.put("Cesme", "Cesme");
suburbsIzmir.put("Gumuldur", "Gumuldur");
suburbsIzmir.put("Foca", "Foca");
suburbsData.put("Istanbul", suburbsIstanbul);
suburbsData.put("Ankara", suburbsAnkara);
suburbsData.put("Izmir", suburbsIzmir);
rooms.put("Living Room", "Living Room");
rooms.put("Kitchen", "Kitchen");
rooms.put("Bedroom", "Bedroom");
Map<String, String> livingRoomItems = new HashMap<String, String>();
livingRoomItems.put("Sofa", "Sofa");
livingRoomItems.put("Armchair", "Armchair");
livingRoomItems.put("Coffee Table", "Coffee Table");
Map<String, String> kitchenItems = new HashMap<String, String>();
kitchenItems.put("Refrigirator", "Refrigirator");
kitchenItems.put("Dishwasher", "Dishwasher");
kitchenItems.put("Oven", "Oven");
Map<String, String> bedroomItems = new HashMap<String, String>();
bedroomItems.put("Bed", "Bed");
bedroomItems.put("Wardrobe", "Wardrobe");
bedroomItems.put("Drawer Chest", "Drawer Chest");
itemsData.put("Living Room", livingRoomItems);
itemsData.put("Kitchen", kitchenItems);
itemsData.put("Bedroom", bedroomItems);
}
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getSurname() {
return surname;
}
public void setSurname(String surname) {
this.surname = surname;
}
public void savePerson(ActionEvent actionEvent) {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've registered"));
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public String getSuburb() {
return suburb;
}
public void setSuburb(String suburb) {
this.suburb = suburb;
}
public Map<String, String> getCities() {
return cities;
}
public void setCities(Map<String, String> cities) {
this.cities = cities;
}
public Map<String, Map<String, String>> getSuburbsData() {
return suburbsData;
}
public void setSuburbsData(Map<String, Map<String, String>> suburbsData) {
this.suburbsData = suburbsData;
}
public Map<String, String> getSuburbs() {
return suburbs;
}
public void setSuburbs(Map<String, String> suburbs) {
this.suburbs = suburbs;
}
public void handleCityChange() {
if (city != null && !city.equals(""))
suburbs = suburbsData.get(city);
else
suburbs = new HashMap<String, String>();
}
public void handleRoomChange(ActionEvent actionEvent) {
if (room != null && !room.equals(""))
items = itemsData.get(room);
else
items = new HashMap<String, String>();
}
private boolean checked;
public boolean isChecked() {
return checked;
}
public void setChecked(boolean checked) {
this.checked = checked;
}
public String[] getSelectedCities() {
return selectedCities;
}
public void setSelectedCities(String[] selectedCities) {
this.selectedCities = selectedCities;
}
public String getSelectedCitiesAsString() {
if (selectedCities == null)
return "";
StringBuffer buffer = new StringBuffer();
for (String city : selectedCities) {
buffer.append("(");
buffer.append(city);
buffer.append(")");
}
return buffer.toString();
}
public Map<String, String> getRooms() {
return rooms;
}
public void setRooms(Map<String, String> rooms) {
this.rooms = rooms;
}
public Map<String, Map<String, String>> getItemsData() {
return itemsData;
}
public void setItemsData(Map<String, Map<String, String>> itemsData) {
this.itemsData = itemsData;
}
public Map<String, String> getItems() {
return items;
}
public void setItems(Map<String, String> items) {
this.items = items;
}
public String getRoom() {
return room;
}
public void setRoom(String room) {
this.room = room;
}
public String getItem() {
return item;
}
public void setItem(String item) {
this.item = item;
}
public void displayLocation() {
FacesMessage msg = new FacesMessage("Selected", "City:" + city + ", Suburb: " + suburb);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void reset() {
RequestContext.getCurrentInstance().reset("form:panel");
}
public void resetFail() {
this.firstname = null;
this.surname = null;
FacesMessage msg = new FacesMessage("Model reset, but it won't work.");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
This is the screen as when you first come to it
If you click the ajax button, this is what returns. The normal submit works just fine
And here's what the JSF is returning in the ajax call. You can see, all the fields are included in the response, but its only displaying the first one
<?xml version="1.0" encoding="utf-8"?><partial-response><changes><update id="form:panel"><![CDATA[<div id="form:panel" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="margin-bottom:10px;" data-widget="widget_form_panel"><div id="form:panel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">New Person</span></div><div id="form:panel_content" class="ui-panel-content ui-widget-content"><div id="form:messages" class="ui-messages ui-widget" aria-live="polite"><div class="ui-messages-error ui-corner-all"><span class="ui-messages-error-icon"></span><ul><li><span class="ui-messages-error-summary">Firstname: Validation Error: Value is required.</span></li><li><span class="ui-messages-error-summary">Surname: Validation Error: Value is required.</span></li></ul></div></div><table><tbody>
<tr><td><label for="form:firstname">Firstname: *</label></td><td><input id="form:firstname" name="form:firstname" type="text" value="" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-error" /><script id="form:firstname_s" type="text/javascript">//<![CDATA[
PrimeFaces.cw('InputText','widget_form_firstname',{id:'form:firstname'});
//]]><![CDATA[]]]]><![CDATA[></script></td><td><div id="form:j_id679843775_7ac2197c" aria-live="polite" class="ui-message ui-message-error ui-widget ui-corner-all"><span class="ui-message-error-icon"></span><span class="ui-message-error-detail">Firstname: Validation Error: Value is required.</span></div></td></tr>
<tr><td><label for="form:surname">Surname: *</label></td><td><input id="form:surname" name="form:surname" type="text" value="" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-error" /><script id="form:surname_s" type="text/javascript">//<![CDATA[
PrimeFaces.cw('InputText','widget_form_surname',{id:'form:surname'});
//]]><![CDATA[]]]]><![CDATA[></script></td><td><div id="form:j_id679843775_7ac21953" aria-live="polite" class="ui-message ui-message-error ui-widget ui-corner-all"><span class="ui-message-error-icon"></span><span class="ui-message-error-detail">Surname: Validation Error: Value is required.</span></div></td></tr>
</tbody>
</table></div></div><script id="form:panel_s" type="text/javascript">//<![CDATA[
PrimeFaces.cw('Panel','widget_form_panel',{id:'form:panel'});
//]]><![CDATA[]]]]><![CDATA[></script>]]></update><update id="form:display"><![CDATA[<div id="form:display" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="margin-top:10px;" data-widget="widget_form_display"><div id="form:display_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Information</span></div><div id="form:display_content" class="ui-panel-content ui-widget-content"><table><tbody>
<tr><td>Firstname: </td><td></td></tr>
<tr><td>Surname: </td><td></td></tr>
</tbody>
</table></div></div><script id="form:display_s" type="text/javascript">//<![CDATA[
PrimeFaces.cw('Panel','widget_form_display',{id:'form:display'});
//]]><![CDATA[]]]]><![CDATA[></script>]]></update><update id="javax.faces.ViewState"><![CDATA[zSrt/a8fGazYeKThaR1kLCIZ9H+Byig1+R3m5/RMMwuGDQUZXOPr/aj4D7YpgH6NUcb5jAudj1QUNy6WMLUaVXYQrGkvy6fxpzBhHuvzVejCEMDhFVUj8d7NHCI=]]></update><extension ln="primefaces" type="args">{"validationFailed":true}</extension></changes></partial-response>
EDIT
I found it. Turns out its a bug in PrimeFaces with Websphere.
http://forum.primefaces.org/viewtopic.php?f=3&t=34650

Answer 1

Try
<p:commandButton value="Ajax Submit" update="panel,display" id="ajax"
actionListener="#{pprBean.savePerson}" styleClass="ui-priority-primary"
process="panel,display,#this"/>
And tell me more details about Back Bean to replicate :)