I have a problem with my menu. This will get the users, which are in the users database table.
But when I try to type a name in the searchbarfield and click on the SearchButton, nothing was happen. I have figured out, that it will refresh the whole page fourth, then do the button action and refresh the wholepage as a fifth.
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
template="../../templates/default.xhtml">
<ui:define name="title">Any great stuff</ui:define>
<ui:define name="content">
<div class="row container">
<div class="small-12 columns">
<h1>Any great stuff</h1>
<div class="row">
<div class="small-12 large-12 columns">
<section class="class">
<div class="row">
<h:form>
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:selectOneMenu id="actionDropdown" value="#{adminController.action}">
<f:selectItem id="actionItem0" itemValue="0" itemLabel="Choose"/>
<f:selectItem id="actionItem1" itemValue="1" itemLabel="Delete"/>
</h:selectOneMenu>
</div>
<div class="small-4 columns">
<h:commandButton value="Übernehmen" class="button postfix" action="#{adminController.actionUser}" />
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:selectOneMenu id="roleDropbown" value="#{adminController.role}">
<f:selectItem id="roleItem0" itemValue="0" itemLabel="Choose item"/>
<f:selectItem id="roleItem1" itemValue="1" itemLabel="Item2"/>
<f:selectItem id="roleItem2" itemValue="2" itemLabel="Item3"/>
<f:selectItem id="roleItem3" itemValue="3" itemLabel="Item4"/>
<f:selectItem id="roleItem4" itemValue="4" itemLabel="Item5"/>
</h:selectOneMenu>
</div>
<div class="small-4 columns">
<h:commandButton value="Wechseln" class="button postfix" action="#{adminController.changeRole}" />
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<input type="text" id="usersearch" value="#{adminController.searchvalue}" placeholder="Suchen..."/>
</div>
<div class="small-4 columns">
<h:commandButton id="usersearchButton" value="Suchen" class="button postfix" action="#{adminController.searchUser}">
<f:ajax execute="@form" render="@none" />
</h:commandButton>
</div>
</div>
</div>
</h:form>
</div>
<table>
<thead>
<tr>
<th width="5"><input onClick="selectAll(this)" type="checkbox"/></th>
<th></th>
<th>Number</th>
<th width="250">Name</th>
<th width="250">E-Mail</th>
<th width="150">Role</th>
</tr>
</thead>
<tbody>
<ui:repeat value="#{adminController.userList}" var="user">
<tr>
<td><input type="checkbox" name="user[]" value=""/></td>
<td><img src="#{user.picture}" alt="Picture"/></td>
<td>#{user.registerNumber}</td>
<td>#{user.name}</td>
<td><a href="mailto:#{user.email}">#{user.email}</a></td>
<td>#{user.role}</td>
</tr>
</ui:repeat>
</tbody>
</table>
</section>
</div>
</div>
</div>
</div>
<script src="../../js/script.js"></script>
</ui:define>
</ui:composition>
My adminController.java uses
public List<User> getUserList()
to fill the table values. This is working well, when I give the searchvalue a static value, it will work too. What do I have to type in my xhtml above? (Problem is, I do know nothing about x/html and its tags, so please take care about it.) Someone told me,that I ave to use a Panelgroup, but I don't know where. (I have renamed the itemvalues, this is nothing you have to take care about it)
your searchButton contains <f:ajax/> tag. so when you click to button it doesn't submit page. just sends ajax request. but render=@none. this mean that doesn't update form. if you change like this render=@form it should work.
<div class="small-4 columns">
<div class="row collapse">
<div class="small-8 columns">
<h:inputText id="usersearch" value="#{adminController.searchvalue}" />
</div>
<div class="small-4 columns">
<h:commandButton id="usersearchButton" value="Suchen" styleClass="button postfix" action="#{adminController.searchUser}">
<f:ajax execute="@form" render="@form" />
</h:commandButton>
</div>
</div>
</div>
UPDATE:
use <h:dataTable/> instead of <ui:repeat/>
<h:dataTable id="myDataTable" value="#{adminController.userList}" var="user">
<h:column>
<img src="#{user.picture}" alt="Picture"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Number"/>
</f:facet>
<h:outputText value="#{user.registerNumber}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{user.name}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Email"/>
</f:facet>
<h:outputLink value="mailto:#{user.email}">
<h:outputText value="#{user.email}"/>
</h:outputLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Role"/>
</f:facet>
<h:outputText value="#{user.role}"/>
</h:column>
</h:dataTable>
now you can update your table only.
<f:ajax execute="@form" render="myDataTable" />