I have an inputText and an inputTextArea in JSF (shown below) that I carry out an ajax action on. However, after my ajax event, the values remain in the input boxes. Is there a simple way to refresh these text boxes after the commandButton is involked? Thanks.
<table>
<tr>
<td><div class="white"><H2>Comments</H2></div>
<h:inputText class="inputboxes" id="username"
value="#{commentBean.comment.commentname}" size="20">
</h:inputText><br/><br/>
<h:inputTextarea rows="5" cols="55" id="comment" class="inputbox" value="#{commentBean.comment.commentText}"
size="20" /></td>
</tr>
<tr>
<td></td>
<td><h:commandButton id="update"
action="#{commentBean.addComment(searchBean.companyId)}" class="myButton2" value="Add Comment" >
<f:ajax execute="#form" render=":results"/>
</h:commandButton></td>
</tr>
</table>
</h:form>
<h:form id="results">
<table>
<tr>
<td>
<h:dataTable value="#{commentBean.viewComments(searchBean.companyId)}" var="c">
<h:column>
<div class="commentsbox">#{c.commentText}</div>
</h:column>
<h:column>
<div class="boldfont">#{c.commentdate}</div>
</h:column>
<td><h:column>
<div class="commentname">#{c.commentname}</div>
</h:column>
</td>
</h:dataTable>
</td>
</tr>
</table>
In your view :
<f:ajax execute="#this" render=":results, username, comment"/>
In your backing bean, in the addComment() method :
comment.setCommentname(null);
comment.setCommentText(null);
or simply (I guess only)
comment = null;
Related
I am working with JSF 2.2 and Primefaces 6.0. I have a p:dataTable with different p:columns, and each column has many rows. I would like that, whenever column1 input changes, column2 input, in the same row, updates, however, it is not working; it doesn't render.
This is my xhtml code:
<p:dataTable value="#{myBean.objectsList}" var="object">
<p:column headerText="column1">
<table>
<tbody>
<ui:repeat value="#{object.subObjects}" var="object2">
<tr>
<td>
<c:set var="object3" value="#{object2.subObjects}"/>
<h:inputText id="value1#{myBean.toString(object3)}" value="#{object3.value1}">
<f:ajax event="change" listener="#{myBean.doSomething}"
execute="#this" render="#this"/>
</h:inputText>
</td>
</tr>
</ui:repeat>
</tbody>
</table>
</p:column>
<p:column headerText="column2">
<table>
<tbody>
<ui:repeat value="#{object.subObjects}" var="object2">
<tr>
<td>
<c:set var="object3" value="#{object2.subObjects}"/>
<h:inputText value="#{object3.value2}" disabled="disabled">
<f:ajax event="change" listener="#{myBean.doSomething2}"
execute="#this" render="value1#{myBean.toString(object3)}"/>
</h:inputText>
</td>
</tr>
</ui:repeat>
</tbody>
</table>
</p:column>
</p:dataTable>
Each object has many objects as a List.
In f:ajax tag of the first column (column1), you have given #this as value for the attribute render.
Instead, please try giving id of the component column2 or id of the p:dataTableitself.
I am developing a complex table with nodes and many rows by node. I would like add f:facets to f:facet for my table.
I have this.
I would like this.
<h:form id="formPartes">
<h:panelGroup id="pgPartes">
<p:treeTable id="tablaPartes" class=" validate tablaNormal" style="border:none;" value="#{estrategiaBean.nodoProyecto}" var="parte">
<p:column headerText="Nombre">
<h:outputText value="#{parte.nombre}" />
<h:panelGroup id="agregarParteHija#{generalBean.unir(parte.nombre)}">
<h:commandLink action="#{estrategiaBean.cargarNuevaParte(parte)}">
<f:ajax render=":formNuevaParte:pgNuevaParte" execute="agregarParteHija#{generalBean.unir(parte.nombre)}"/>
<i class="material-icons small">add</i>
</h:commandLink>
</h:panelGroup>
</p:column>
<p:column headerText="Ts...">
<ui:repeat value="#{estrategiaBean.funcionesDeParte(parte)}" var="atributo">
<table>
<thead>
<tr>
<ui:repeat value="#{atributo.obtLista('TAM_Ciclo')}" var="atributo3">
<th class="ui-state-default">
#{atributo3.atributo}
</th>
</ui:repeat>
</tr>
</thead>
<tbody>
<tr>
<ui:repeat value="#{atributo.obtLista('TAM_Ciclo')}" var="atributo3">
<td>
<h:inputText value="#{atributo3.valor}"/>
</td>
</ui:repeat>
</tr>
</tbody>
</table>
</ui:repeat>
</p:column>
</p:treeTable>
<h:panelGroup>
</h:form>
Please, help me with xhtml code.
I am using Primefaces 5.2 on an internal network that uses IE11 in compatibility mode. I have a button and a table. When I press the button I get a new row in the table just fine but I also get an empty table <table></table> inserted between the button and the table. This happened each and every time I press the button - three presses three unwanted empty tables.
Sanitized JSF source follows:
<tr>
<td>
<h:outputText value="#{enr['birth.date']}"/>*:
</td>
<td>
<p:calendar id="birthDate" value="#{II.birthdate}" mode="popup" showOn="button" popupIconOnly="true" pattern="yyyy-MM-dd" mask="9999-99-99" maxdate="#{UserBean.currentDate}" yearrange="c-120" navigator="true" showButtonPanel="true" required="true" requiredMessage="#{enr['missing.required.field']}: #{enr['birth.date']}" tabindex="4"/>
<p:tooltip for="birthDate" value="yyyy-MM-dd" showEffect="fade" hideEffect="fade" />
</td>
</tr>
<tr>
<td>
<h:outputText value="#{enr['other.last.names']}"/> / <h:outputText value="#{enr['maiden.name']}"/>
</td>
<td>
<p:commandButton icon="ui-icon-plus" title="Icon Only" tabindex="5" immediate="true">
<f:ajax listener="#{II.addOtherName()}" immediate="true" render="otherNameFields"/>
</p:commandButton>
<h:dataTable id="otherNameFields" value="#{II.otherNames}" var="otherNameField">
<h:column size="30" maxlength="50">
<h:inputText value="#{otherNameField.otherName}" tabindex="6">
<f:ajax event="change" listener="#{II.populateName()}" immediate="true" render="otherNameFields" />
</h:inputText>
</h:column>
<h:column>
<p:commandButton icon="ui-icon-trash" title="Icon Only" immediate="true" tabindex="6">
<f:ajax listener="#{II.deleteOtherName(otherNameField)}" immediate="true" render="otherNameFields" />
</p:commandButton>
</h:column>
</h:dataTable>
</td>
</tr>
Here is the generated output I see in the DOM Explorer:
<tr>
<td>
<button name="dataForm:j_id605621413_2_2c601363" tabindex="5" title="Icon Only" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" id="dataForm:j_id605621413_2_2c601363" role="button" aria-disabled="false" onclick="PrimeFaces.bcn(this,event,[function(event){jsf.ajax.request('dataForm:j_id605621413_2_2c601363',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'click'})},function(event){PrimeFaces.ab({s:"dataForm:j_id605621413_2_2c601363"});return false;}]);" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-plus"></span><span class="ui-button-text ui-c">ui-button</span></button>
<table></table> <!-- the unwanted table element -->
<table id="dataForm:otherNameFields">
<tbody id="dataForm:otherNameFields:tbody_element">
<tr><td><input name="dataForm:otherNameFields:0:j_id605621413_2_2c6013ca" tabindex="6" id="dataForm:otherNameFields:0:j_id605621413_2_2c6013ca" onchange="jsf.ajax.request('dataForm:otherNameFields:0:j_id605621413_2_2c6013ca',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'change'})" type="text" value=""></td><td><button name="dataForm:otherNameFields:0:j_id605621413_2_2c601007" tabindex="6" title="Icon Only" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" id="dataForm:otherNameFields:0:j_id605621413_2_2c601007" role="button" aria-disabled="false" onclick="PrimeFaces.bcn(this,event,[function(event){jsf.ajax.request('dataForm:otherNameFields:0:j_id605621413_2_2c601007',event,{render:'dataForm:otherNameFields','javax.faces.behavior.event':'click'})},function(event){PrimeFaces.ab({s:"dataForm:otherNameFields:0:j_id605621413_2_2c601007"});return false;}]);" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-trash"></span><span class="ui-button-text ui-c">ui-button</span></button></td></tr>
</tbody></table>
</td>
</tr>
Any
I have a datatable and form. Both are wrapped by html5 section tag. The table rendered correctly for edit, delete and cancel edit options, but doesn't work with save (save edits) and add new record(f:ajax execute).
I'm so new in JSF, so i can't understand very well how works ajax here.
I'm using JSF 2.2 (Mojarra) and GlassFish 4.1
Facelet:
<h:form id="toDoForm">
<!-- todo table -->
<section class="todo-table">
<h:dataTable id="toDoTable" value="#{toDoBean.toDoList}" var="toDo" styleClass="table">
<h:column>
<f:facet name="header"><h:outputText value="ToDo name"/></f:facet>
<h:inputText value="#{toDo.name}" rendered="#{toDo.editable}"/>
<h:outputText value="#{toDo.name}" rendered="#{not toDo.editable}"/>
</h:column>
<!-- action command links -->
<h:column>
<f:facet name="header"><h:outputText value="Actions"/></f:facet>
<h:commandLink value="Edit" action="#{toDoBean.edit(toDo)}" rendered="#{not toDo.editable}">
<f:ajax render="toDoForm:toDoTable"/>
</h:commandLink>
<h:commandLink value="Save" action="#{toDoBean.save(toDo)}" rendered="#{toDo.editable}">
<f:ajax execute="toDoForm" render="toDoForm:toDoTable"/>
</h:commandLink>
<h:commandLink value="Cancel" action="#{toDoBean.cancelEdit(toDo)}" rendered="#{toDo.editable}">
<f:ajax render="toDoForm:toDoTable"/>
</h:commandLink>
<h:commandLink value="Delete" action="#{toDoBean.delete(toDo)}" rendered="#{not toDo.editable}">
<f:ajax render="toDoForm:toDoTable"/>
</h:commandLink>
</h:column>
</h:dataTable>
</section>
<!-- new toDo -->
<section class="new-todo">
<section class="frm-group">
<h:outputLabel for="todo-name" value="ToDo name"/>
<h:inputText id="todo-name" p:placeholder="Some task here..." value="#{toDoBean.toDo.name}"/>
</section>
<section class="frm-group">
<h:outputLabel for="todo-date" value="Limit date"/>
<h:inputText id="todo-date" p:placeholder="dd-MM-yyyy" value="#{toDoBean.toDo.expDate}"/>
</section>
<!-- just for add a fontawesome icon to button -->
<button type="submit" jsf:action="toDoBean.add()">
<i class="fa fa-check"></i>
Add record
<f:ajax execute="toDoForm" render="toDoForm:toDoTable"/>
</button>
</section>
</h:form>
UPDATE
The developer tools shows the ajax request:
Request headers
The response of ajax request is this:
<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1"><changes><update id="toDoForm:toDoTable"><![CDATA[<table id="toDoForm:toDoTable" class="table">
<thead>
<tr>
<th scope="col">ToDo name</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Learn JSF 2.2</td>
<td><a id="toDoForm:toDoTable:0:j_idt17" href="#" onclick="mojarra.ab(this,event,'action',0,'toDoForm:toDoTable');return false">Edit</a><a id="toDoForm:toDoTable:0:j_idt20" href="#" onclick="mojarra.ab(this,event,'action',0,'toDoForm:toDoTable');return false">Delete</a></td>
</tr>
<tr>
<td>Learn CDI</td>
<td><a id="toDoForm:toDoTable:1:j_idt17" href="#" onclick="mojarra.ab(this,event,'action',0,'toDoForm:toDoTable');return false">Edit</a><a id="toDoForm:toDoTable:1:j_idt20" href="#" onclick="mojarra.ab(this,event,'action',0,'toDoForm:toDoTable');return false">Delete</a></td>
</tr>
<tr>
<td>Learn JPA 2.1</td>
<td><a id="toDoForm:toDoTable:2:j_idt17" href="#" onclick="mojarra.ab(this,event,'action',0,'toDoForm:toDoTable');return false">Edit</a><a id="toDoForm:toDoTable:2:j_idt20" href="#" onclick="mojarra.ab(this,event,'action',0,'toDoForm:toDoTable');return false">Delete</a></td>
</tr>
<tr>
<td>Learn WebSockets</td>
<td><a id="toDoForm:toDoTable:3:j_idt17" href="#" onclick="mojarra.ab(this,event,'action',0,'toDoForm:toDoTable');return false">Edit</a><a id="toDoForm:toDoTable:3:j_idt20" href="#" onclick="mojarra.ab(this,event,'action',0,'toDoForm:toDoTable');return false">Delete</a></td>
</tr>
<tr>
<td>Learn EJB 3.1</td>
<td><a id="toDoForm:toDoTable:4:j_idt17" href="#" onclick="mojarra.ab(this,event,'action',0,'toDoForm:toDoTable');return false">Edit</a><a id="toDoForm:toDoTable:4:j_idt20" href="#" onclick="mojarra.ab(this,event,'action',0,'toDoForm:toDoTable');return false">Delete</a></td>
</tr>
</tbody>
</table>
]]></update><update id="j_id1:javax.faces.ViewState:0"><![CDATA[758921174082037358:-1177618745060004189]]></update></changes></partial-response>
Thanks.
I need a way to create editable table like this. I interested is it possible to use h:panelGrid to display and edit the data. From my previews post I saw that it's possible to simple JSF table, but is this possible with h:panelGrid?
<table>
<ui:repeat var="elem" value="#{yourMB.yourDataList}">
<tr>
<td>#{elem.userid}</td>
<td>
<h:outputText value="#{elem.name}"
rendered="#{not elem.editable}" />
<h:inputText value="#{elem.name}" rendered="#{elem.editable}" />
</td>
<td>
<h:outputText value="#{elem.telephone}"
rendered="#{not elem.editable}" />
<h:inputText value="#{elem.telephone}"
rendered="#{elem.editable}" />
</td>
<td>
<h:commandLink value="Edit" rendered="#{not elem.editable}"
action="#{yourMB.editAction(elem)}" />
</td>
</tr>
</ui:repeat>
</table>
<h:commandButton value="Save Changes" action="#{yourMB.saveAction}" />
The answer is "NO". Try to use h:dataTable instead of h:panelGrid.