I work on a java web application using jsf and Primefaces, with Glassfish 4.1.1 as my application server and PostgreSQL as my database.
I have a form containing a selectOneMenu which value is sent to the ManagedBean with a commandButton.
The ManagedBean then try to connect to the database using the DriverManager and execute a query which results are displayed in a panelGrid.
This is the java code in the ManagedBean Pays.java :
public void save() throws NamingException, SQLException{
String url = "jdbc:postgresql://localhost:5432/zones_franches?user=postgres&password=jihane";
Connection conn = DriverManager.getConnection(url);
Statement st = conn.createStatement();
ResultSet rs = st.executeQuery ("SELECT * FROM pays WHERE id_geom = "+ idGeom +";");
System.out.println("Query executed....");
if(rs.next()) {
idPays = rs.getString("id_pays");
nom = rs.getString("nom");
superficie = rs.getString("superficie");
pib2014 = rs.getString("pib_2014");
population2014 = rs.getString("population_2014");
inflation = rs.getString("inflation");
investissements = rs.getString("investissements");
indDoingBus = rs.getInt("ind_doing_business");
rs.close();
st.close();
conn.close();
}else{
System.out.print("try again !");
rs.close();
st.close();
conn.close();
}
}
And this is the xhtml page code :
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="pays" value="Pays sélectionné : " />
<h:selectOneMenu id="pays" value="#{pays.idGeom}" required="true" label="ID Pays">
<f:selectItem itemLabel="Egypte" itemValue="1" />
</h:selectOneMenu>
</h:panelGrid>
<h:panelGrid>
<p:commandButton process="#parent:#parent" update="#form" value="Détails" action="#{pays.save()}"/>
<br/>
<p:panelGrid columns="2">
<f:facet name="header">
<p:graphicImage name="demo/images/misc/kobe.png" />
</f:facet>
<h:outputText value="Code Pays :" />
<h:outputText value="#{pays.idGeom}" />
<h:outputText value="Id Pays :" />
<h:outputText value="#{pays.idPays}" />
<h:outputText value="Nom Pays :" />
<h:outputText value="#{pays.nom}" />
</p:panelGrid>
</h:panelGrid>
</h:form>
The problem is that the results are not displayed in the panelGrid, even if the save() method is executed when I click on the commandButton.
Related
The short version of my problem is that the inputtext will not change the value in bean after I modified the value from the bean.
The longer version:
There is a form in which is a dataTable with user information; some inputTexts, and two buttons. If you fill the inputTexts, a new user will be created with the given data, and appears in dataTable - this works fine, I can create as many users as I can.
The tricky part is if you select a row from the dataGrid, the user information has to appear in the inputText fields - this works fine - so the admin can modify them. But after changing the inputText values in the bean, if the admin changes someting in the inputText, the value "will not follow" tha changes, the value remains the same. What could I do wrong?
The JSF page looks like this:
<html>
<h:body>
<h:form style="font-size:14px;" id="setupform">
...
<p:panel header="Edit users" id="userAddingPanel" rendered="#{settingsbean.validLogin}">
<p:panelGrid columns="2" id="userAddingGrid">
<p:outputLabel value="User Name: " />
<p:inputText id="userName" value="#{settingsbean.userName}" />
<p:outputLabel value="User Password: " />
<p:password id="userPass" value="#{settingsbean.userPassword}" />
<p:outputLabel value="E-mail address: " />
<p:inputText id="userMailAddress" value="#{settingsbean.mailAddress}" />
<p:outputLabel id="userDelete" value="Inactivate User: " />
<p:selectBooleanCheckbox id="isUserDeleted" value="#{settingsbean.deletedUser}" />
<p:commandButton id="addUser" value="Create User" update="userAddingGrid" icon="ui-icon-disk" action="#{settingsbean.addNewUser}" />
<p:commandButton id="modifyUser" value="Modify User" icon="ui-icon-wrench" update="userAddingGrid" action="#{settingsbean.updateUser}" process="setupform"/>
</p:panelGrid>
<br/>
<p:dataTable id="usersTable" var="users" value="#{settingsbean.userList}" tableStyle="overflow: auto;" stickyHeader="true" selectionMode="single" rowKey="#{users.id}" selection="#{settingsbean.selectedUser}">
<p:ajax event="rowSelect" update=":setupform:userName, :setupform:userName,
:setupform:userPass, :setupform:userMailAddress, :setupform:isUserDeleted" />
<p:column headerText="#ID">
<h:outputText value="#{users.id}" />
</p:column>
<p:column headerText="Name">
<h:outputText value="#{users.loginName}" />
</p:column>
...
</p:dataTable>
</p:panel>
</h:form>
</h:body>
</html>
And my bean looks like this:
#ManagedBean(name ="settingsbean")
#ViewScoped
public class SettingsBean {
private String userName;
private String userPassword;
private boolean deletedUser;
private List<UserDTO> userList;
private UserDTO selectedUser;
/*with getters and setters, what is uncenventional is this setter*/
public void setSelectedUser(UserDTO selectedUser) {
/*if admin selects/unselects a user from dataTable*/
this.selectedUser = selectedUser;
/*if unselect user*/
if(selectedUser == null){
userName = "";
mailAddress = "";
deletedUser = false;
/*if selects user*/
}else {
userName = selectedUser.getLoginName();
mailAddress = selectedUser.getMailAddress();
deletedUser = selectedUser.getDeleted();
}
}
...
public void addNewUser(){
//creates a new user in DB
}
public void updateUser(){
//will update user in DB
}
}
You have to process the components that you want to be updated
<p:commandButton id="modifyUser" value="Modify User" icon="ui-icon-wrench" update="userAddingGrid" action="#{settingsbean.updateUser}" process="userAddingGrid"/>
i need to pass a value(studentId) from a jsf view(list.xhtml) to another jsf page (editor.xhtml) via managed bean (bean.java). I can get the values in bean page but i could not access those in editor . Can you please tell me what went wrong ?
Hope to hear some suggestions
list.xhtml
<h:dataTable value="#{student.createList()}" var="student" styleClass="studentTable"
columnClasses=",,,fixedWidth" border="1" cellspacing="2" cellpadding="2">
<h:column>
<f:facet name="header">Student ID</f:facet>
<h:outputText value="#{student.studentId}"></h:outputText>
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{student.fname}"></h:outputText>
</h:column>
<h:column>
<f:facet name="header">Surname</f:facet>
<h:outputText value="#{student.lname}"></h:outputText>
</h:column>
<h:commandLink actionListener="#{student.edit()}" value ="Editt">
<f:param name="id" value="#{student.studentId}"/>
</h:commandLink>
editor.xhtml
<h:panelGrid border="" cellpadding="20" cellspacing="20" columns="3">
<h:outputLabel value="Student Id" />
<h:inputText value="#{student.studentId}" readonly="true" required="true" requiredMessage="Id is Required" id="Eid">
</h:inputText> <h:message for="Eid"/>
<h:outputLabel value="Student Name" />
<h:inputText value="#{student.fname}" required="true" requiredMessage="Name is Required" id="Ename">
</h:inputText> <h:message for="Ename"/>
<h:outputLabel value="Student Age" />
<h:inputText value="#{student.lname}" required="true" requiredMessage="age is Required" id="Eage">
<h:commandLink value="Update" action="userRecords" actionListener="#{student.update()}">
</h:commandLink>
student.java
public void edit(){
System.out.println("called from edit()"+ this.StudentId);
List<Student> arrList = createList();
FacesContext fc = FacesContext.getCurrentInstance();
mapParam=fc.getExternalContext().getInitParameterMap();
String idStudent;
HttpServletRequest request = (HttpServletRequest) fc.getExternalContext().getRequest();
for (Student studentManagedBean : arrList) {
if (studentManagedBean.getStudentId() == idStudent) {
this.setStudentId(studentManagedBean.getStudentId());//Error
this.setFname(studentManagedBean.getFname());
this.setLname(studentManagedBean.getLname());
}
System.out.println(" we have "+ this.getStudentId() + this.getFname() );
}
}
public void update() {
Connection conn=null;
try{
Class.forName("org.apache.derby.jdbc.ClientDriver");
conn = DriverManager.getConnection("jdbc:derby://localhost:1527/XX","XX","XXX");
}catch(Exception e){
}
String str = "Update student set FNAME=?,LNAME=? where STUDENTID=?";
FacesContext fc = FacesContext.getCurrentInstance();
HttpServletRequest request = (HttpServletRequest) fc.getExternalContext().getRequest();
int idStudent = Integer.parseInt(request.getParameter("id"));
try {
PreparedStatement pstmt = conn.prepareStatement(str);
pstmt.setString(1, this.getFname());
pstmt.setString(2, this.getLname());
pstmt.setInt(3, idStudent);
// System.out.println("Id Student Update :" + idStudent);//Error
int executeUpdate = pstmt.executeUpdate();
if (executeUpdate > 0) {
System.out.println("Update SuccessFully");
}
} catch (SQLException ex) {
Logger.getLogger(Student.class.getName()).log(Level.SEVERE, null, ex);
} finally {
}
I am using Primefaces 3.5, Jsf 2 and I have a datatable, now I implemented a dialog like the primefaces showcase(singlerowselection), it works fine, but I want to edit the row IN the dialog. Furthermore I want that the inputtext is filled with the data from the cell of the datatable, so that you can easily edit it!(like the row editor does it, just in a dialog)
Not like this: http://i.stack.imgur.com/J55j0.jpg
Watermark works, but it is no option because the text disappears if you want to edit it.
It should be like that: http://i.stack.imgur.com/cAFLo.jpg
So, can someone tell me how the cell data can be displayed and edited?
Here is the xhtml (dialog is not in the datatable):
<p:dialog id="dialog" header="Server Detail" widgetVar="serDialog"
resizable="false" showEffect="clip" hideEffect="fold" dynamic="true">
<h:panelGrid id="display" columns="3" cellpadding="4">
<h:outputText value="Data Center Location " />
<p:inputText id="datacenter" value="#{server.dataCenterLocation}"></p:inputText>
<h:outputText value="Identification " />
<h:inputText id="identification" value="#{server.identification}"></h:inputText>
<p:watermark for="identification"
value="#{serverBean.selectedServer.identification}"></p:watermark>
</h:panelGrid>
<p:growl id="growl" showDetail="true" sticky="false" />
<p:commandButton value="Edit Server" action="#{server.onEdit}" update="#form, growl" />
</p:dialog>
the method in the bean(name= server)
(without the selectedServer(name =serverBean) with the getter and setter):
public void onEdit() throws Exception {
PreparedStatement ps = null;
Connection con = null;
int i = 0;
try {
Server ser = new Server();
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver")
.newInstance();
con = DriverManager
.getConnection("jdbc:sqlserver://...");
String sql = "UPDATE VAI_Serverlist SET [Data Center Location]= ?,... WHERE Identification='"
+ ser.identification + "'";
ps = con.prepareStatement(sql);
ps.setString(1, ser.dataCenterLocation);
...
i = ps.executeUpdate();
} catch (SQLException e) {
System.out.println(i);
e.printStackTrace();
} finally {
try {
con.close();
ps.close();
} catch (Exception e) {
e.printStackTrace();
}
}
Thanks in advance!
<h:form id="form">
<p:dataTable id="table" var="item" value="#{ManagedBean.list()}"
<f:facet name="footer">
<p:commandButton id="showUpdateButton" value="#{msgForms['actions.Edit']}"
update=":update_form"
icon="ui-icon-pencil"
style="margin: 0%"
ajax="true"
immediate="true"
oncomplete="PF('DialogUpdate').show()"
/>
</f:facet>
</p:dataTable>
<h:form id="form">
<p:dialog id="dialog_update"
modal="true"
header="${msgForms['titles.update']}"
widgetVar="DialogUpdate" resizable="false"
showEffect="clip" hideEffect="fold"
>
<h:form id="update_form">
<h:panelGrid columns="3" id="panel">
<!--FIELDS-->
<h:outputLabel for="nombre" value="#{msgForms['fields.nombre']}:" />
<p:inputText id="nombre"
value="#{ManagedBean.selectedItem.nombre}"
required="true"
requiredMessage="#{msgForms['field.required']}"
>
<p:ajax event="keyup" update="nombreMsg" global="false"/>
</p:inputText>
</h:panelGrid>
<!--/FIELDS-->
<!-- BUTTONS ACTIONS-->
<p:commandButton id="updateButtonDg"
value="#{msgForms['actions.update']}"
icon="ui-icon-pencil"
actionListener="#{ManagedBean.update()}"
update=":form:"
style="margin: 0%"
ajax="true"
onclick="DialogUpdate.hide();"
>
</p:commandButton>
<!-- /BUTTONS ACTIONS-->
</h:form>
</p:dialog>
the MANAGED BEAN..
#Named("ManagedBean")
#RequestScoped
public class ManagedBean {
//Spring Item Service is injected...
#Inject
IItemService itemService; //if not required because if you use dependencies injection to connect with de database
private List<Item> filteredItems; //only if you use the attribute: filteredValue="#{ManagedBean.filteredItems}" in the dataTable
private List<Item> items;
public void update() {
//here you save the changes in the data base
this.itemService().updateItem(this.selectedItem);
}
this is more or less what I use, I can not put the literal code, but I think I have not left anything important, so i hope it could to help you.
I recommend that you take a look at the tutorial
http://www.javacodegeeks.com/2012/04/jsf-2-primefaces-3-spring-3-hibernate-4.html
it shows how to integrate jsf2 Spring3 hibernate in your project and also how to inject dependencies using annotations, i recomend you the use of hibernate framework to interact with your database
I have a form that user should enter some values to get some info from a web service. Firstly user fulfills the form and then as he clicks the request button webservice is called. Until here everything works nicely. But as the webservice returns the info, I have to re-render the datatable with the new data. Here is my page:
<h:body>
<h:form id="formCus">
<h:outputLabel value="Müşteri Tipi: *"/>
<p:selectOneMenu id="customerType" value="#{customerService.musteriTipi}" style="width: 39%">
<f:selectItem itemLabel="" itemValue=" " />
<f:selectItem itemLabel="Bireysel" itemValue="BIREYSEL" />
<f:selectItem itemLabel="Tüzel" itemValue="TUZEL" />
<f:selectItem itemLabel="Yabancı" itemValue="YABANCI" />
<p:ajax event="change" update="#{customerService.musteriTipi}"/>
</p:selectOneMenu>
<h:outputLabel value="Ad/Firma Adı: *" for="customerName" />
<p:inputText id="customerName" value="#{customerService.adFirmaAdi}" title="Müşteri adı." >
<p:ajax event="change" update="#{customerService.adFirmaAdi}" />
</p:inputText>
<h:outputLabel value="Soyad/Ünvan: *" for="customerSurname" />
<p:inputText id="customerSurname" value="#{customerService.soyadUnvan}" title="Müşteriye ait soyad/ünvan." >
<p:ajax event="change" update="#{customerService.soyadUnvan}" />
</p:inputText>
<h:outputLabel value="TC Kimlik No: *" />
<p:inputText id="customerTC" value="#{customerService.tcKimlikNo}" title="TC Kimlik numarasını buraya girin.TC numarası sadece sayılardan oluşmalıdır." >
<p:ajax event="change" update="#{customerService.tcKimlikNo}" partialSubmit="true" process="#this"/>
</p:inputText>
<h:outputLabel value="Vergi No:" />
<p:inputText id="customerVergi" value="#{customerService.vergiNo}" title="TC Kimlik numarasını buraya girin.TC numarası sadece sayılardan oluşmalıdır." >
<p:ajax event="change" update="#{customerService.vergiNo}" partialSubmit="true"/>
</p:inputText>
<h:outputLabel value="Müdürlük Kodu: *" />
<p:inputText id="departmantId" value="#{customerService.mudurlukKodu}" title="Müdürlük kodunu buraya girin.Müdürlük kodu sadece sayılardan oluşmalıdır." >
<p:ajax event="change" update="#{customerService.mudurlukKodu}" partialSubmit="true"/>
</p:inputText>
<h:outputLabel value="Müşteri Kodu: " />
<p:inputText id="customerId" value="#{customerService.musteriKodu}" title="Müdürlük kodunu buraya girin.Müdürlük kodu sadece sayılardan oluşmalıdır." >
<p:ajax event="change" update="#{customerService.musteriKodu}" />
</p:inputText>
<h:outputLabel value="E-Posta Adresi: " />
<p:inputText id="customerMail" value="#{customerService.mail}" title="Müşteriye ait e-mail adresini buraya girin." >
<p:ajax event="change" update="#{customerService.mail}" partialSubmit="true"/>
</p:inputText>
<h:outputText value=" "/>
<p:commandButton id="query" value="Müşteri Sorgula" actionListener="#{customerService.request}" async="true" onsuccess="panelwv.show()">
<f:ajax execute="#form" render=":personList" ></f:ajax>
</p:commandButton>
</h:form>
<h:panelGrid columns="5">
<h:outputText value=""/>
<h:outputText value=""/>
<p:panel widgetVar="panelwv" visible="false" closable="true" header="Sorgu Yapılıyor...">
<p:graphicImage value="/resources/images/ajaxloadingbar.gif" />
</p:panel>
<h:outputText value=""/>
<h:outputText value=""/>
</h:panelGrid>
<h:outputText value="Bulunan Müşterilere Ait Bilgiler:" />
<h:form id="personList" rendered="#{not empty customerService.musteriKodu}">
<p:dataTable value="#{customerService.customer}" var="item" id="persontable" emptyMessage="Henüz müşteri eklemediniz.">
<p:column headerText="Müşteri/Firma ID">
#{item.customerId}
</p:column>
<p:column headerText="Ad/Firma Adı">
#{item.customerName}
</p:column>
<p:column headerText="Soyad/Ünvan" >
#{item.customerSurname}
</p:column>
<p:column headerText="Müşteri Tipi" >
#{item.customerType}
</p:column>
<p:column headerText="Telefon" >
#{item.customerTel}
</p:column>
<p:column headerText="Adres">
#{item.customerAddress}
</p:column>
<p:column headerText="E-Posta">
#{item.customerMail}
</p:column>
</p:dataTable>
</h:form>
</h:body>
And here is my back bean:
//some getter and setters
List<Customers> customer = new ArrayList<Customers>();
public List<Customers> getCustomer() {
return customer;
}
public void setCustomer(List<Customers> customer) {
this.customer = customer;
}
public String request() {
final RequestContext context = RequestContext.getCurrentInstance();
//System.out.println("Progress...");
//musteriSorgula(musteriSorgulaKriter());
new Thread(new Runnable() {
public void run() {
try {
musteriKodu = String.valueOf(musteriSorgula(musteriSorgulaKriter()).getMusteriBilgisi().getMusteriKodu());
List<TelefonBilgisi> tel_result = telefonSorgula(telefonSorgulaKriter(musteriKodu)).getMusteriTelefonListesi();
//telefon = tel_result.getMusteriTelefonListesi().get(0).getTelefonNo();
if (tel_result.size() > 0) {
for (TelefonBilgisi t : tel_result) {
telefon = t.getTelefonNo();
}
} else {
telefon = "No telephone.";
}
List<UavtAdresBilgisi> uavt_result = uavtAdresSorgula(uavtAdresSorgulaKriter(musteriKodu)).getMusteriUavtAdresListesi();
if (uavt_result.size() > 0) {
for (UavtAdresBilgisi u : uavt_result) {
adres = String.valueOf(u.getSehir()) + ", " + String.valueOf(u.getBucak()) + ", " + String.valueOf(u.getKasaba());
}
} else {
adres = "No address.";
}
Customers cust = new Customers(musteriTipi, BigInteger.valueOf(Long.valueOf(musteriKodu)), adFirmaAdi, soyadUnvan, telefon, adres, mail, projectId);
if (!customer.contains(cust)) {
customer.add(cust);
System.out.println("Customer has been added.");
} else {
System.out.println("Customer is still in the list.");
}
} catch (Exception ex) {
Logger.getLogger(CustomerService.class.getName()).log(Level.SEVERE, null, ex);
context.execute("alert('Try again.')");
}
}
}).start();
context.execute("panelwv.close()");
return "";
}
The back bean could connect to webservice and gether the info, I can see that in the logs. In the beginning my datatable is empty. What I want is to show the new data as the webservice responses. context.update("personList") doesn't work when I place it below:
customer.add(cust);
If someone could help me I would be greatly appriciated.
<f:ajax execute="#form" render=":personList" ></f:ajax>
Make a change as
<f:ajax execute="#form" update="persontable" render=":personList" ></f:ajax>
Ok so what you want to do is to force the client to update the data table from your server. Take a look at comet and push technology and also (if you don't need to support older browsers) WebSocket.
If you google around you'll find tutorials on how to do it using JSF. And as you are using Primefaces, not that this library has comet support: checkout p:push and atmosphere support.
This problem is easy to solve if you use RichFaces
I would prefer using RemoteCommand component as #Ömer said.
Try use it at the end of the thread(inside the thread braces) with context.execute("updater();");
I want to create h:datatable with list of data:
<h:dataTable id="dataTable" value="#{SessionsController.dataList}" binding="#{table}" var="item">
<!-- Check box -->
<h:column>
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
<h:selectBooleanCheckbox onclick="highlight(this)"
value="#{item.selected}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="№"
actionListener="#{SessionsController.sort}">
<f:attribute name="№" value="№" />
</h:commandLink>
</f:facet>
<h:outputText
value="#{table.rowIndex + SessionsController.firstRow + 1}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Account Session ID"
actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Account Session ID" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.aSessionID}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="User ID"
actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="User ID" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.userID}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity Start Time"
actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity Start Time" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activityStart}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity End Time"
actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity End Time" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activityEnd}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity"
actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activity}" />
</h:column>
</h:dataTable>
I want when I click on a table row to open a new page which displays more details. I want to use the table key aSessionID which will be used for SQL query to get a data from the database. I know that I can use h:commandLink to pass the key but I don't want ugly html link. Is there other way to click on the JSF table row, pass a key and open a new window?
Best Wishes
EDIT
I found one possible solution here
Using this JavaScript code it's possible to open a new window when the user clicks on a row:
<table id="row_link">
<tbody>
<tr>
<td>link</td>
<td>info 1</td>
</tr>
<tr>
<td>link</td>
<td>info 2</td>
</tr>
</tbody>
</table>
$("table#row_link tbody tr").click(function () {
window.location = $(this).find("a:first").attr("href");
});
The question is how I can pass this key aSessionID to the new window.
In the above example href is used to pass the link to the new window. What attribute can be used in JSF table?
#BalusC (JSF expert) has a post about managing Datatable in JSF 1.2 but it works for JSF 2.x too. You're interested in the select row on click section.
UPDATE:
Let me explain the example. First, every JSF component ID will have this form: :, example:
<h:form id="myForm">
<h:inputText id="myInputText" value="#{myBean.textValue}" />
</h:form>
This will generate the HTML:
<form id="myForm">
<input type="text" id="myForm:myInputText" />
</form>
Second, you have to update the generated DOM for the datatable. He's doing that by javascript and also gives you the js code:
function addOnclickToDatatableRows() {
//gets all the generated rows in the html table
var trs = document.getElementById('form:dataTable').getElementsByTagName('tbody')[0]
.getElementsByTagName('tr');
//on every row, add onclick function (this is what you're looking for)
for (var i = 0; i < trs.length; i++) {
trs[i].onclick = new Function("highlightAndSelectRow(this)");
}
}
Third, define the highlightAndSelectRow js function (you can change the name to whatever you want).
function highlightAndSelectRow(tr) {
//get all the datatable rows
var trs = document.getElementById('form:dataTable').getElementsByTagName('tbody')[0]
.getElementsByTagName('tr');
//find the selected rowby using the tr parameter
for (var i = 0; i < trs.length; i++) {
if (trs[i] == tr) {
//once found it, change the color (maybe you don't need this part)
trs[i].bgColor = '#ff0000';
//update a hidden value in the form (maybe you need this code)
document.form.rowIndex.value = trs[i].rowIndex;
//here, you can add js code to open a new window
//or simulate a button/link click or something else you need.
} else {
trs[i].bgColor = '#ffffff';
}
}
}
UPDATE 2:
I've made a test for this case. I'll show you the code to get it done using facelets.
DataTable.xhtml
<script type="text/javascript">
function addOnclickToDatatableRows() {
//gets all the generated rows in the html table
var trs = document.getElementById('myForm:dataTable').getElementsByTagName('tbody')[0]
.getElementsByTagName('tr');
//on every row, add onclick function (this is what you're looking for)
for (var i = 0; trs.length > i; i++) {
trs[i].onclick = new Function("rowOnclick(this)");
}
}
function rowOnclick(tr) {
var elements = tr.cells[0].childNodes;
for(var i = 0; elements.length > i; i++) {
//get the link
if ((typeof elements[i].id !== "undefined") &&
(elements[i].id.indexOf("lnkHidden") > -1)) {
//open a new window/tab using the href generated in link
window.open(elements[i].href);
break;
}
}
return false;
}
</script>
<h:form id="myForm">
<h1>Show data</h1>
<h:dataTable id="dataTable" var="data" value="#{datatableBean.lstData}">
<h:column>
<f:facet name="header">
<h:outputText value="ID" />
</f:facet>
<h:outputText value="#{data.id}" />
<!-- define a hidden link for every row of the datatable
the value attribute contains the page to redirect. -->
<h:outputLink id="lnkHidden" value="AnotherPage.xhtml"
style="display:none">
<f:param name="id" value="#{data.id}" />
</h:outputLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Value" />
</f:facet>
<h:outputText value="#{data.value}" />
</h:column>
</h:dataTable>
</h:form>
DataTableBean class
#ManagedBean
#ViewScoped
public class DatatableBean {
private List<Data> lstData;
/**
* Creates a new instance of datatableBean
*/
public DatatableBean() {
lstData = new ArrayList<Data>();
lstData.add(new Data(1, "Hello World"));
lstData.add(new Data(2, "Hello StackOverflow"));
lstData.add(new Data(3, "Hello Luiggi"));
System.out.println("LOL");
}
//define getters and setters...
}
AnotherPage.xhtml
<h1>This is another page</h1>
<h:panelGrid columns="2">
<h:outputText value="Selected ID" />
<h:outputText value="#{anotherPageBean.id}" />
</h:panelGrid>
AnotherPageBean class
#ManagedBean
#RequestScoped
public class AnotherPageBean {
private int id;
/**
* Creates a new instance of AnotherPageBean
*/
public AnotherPageBean() {
try {
this.id = Integer.parseInt((String)FacesContext
.getCurrentInstance().getExternalContext()
.getRequestParameterMap().get("id"));
//by getting the id you can get more data
}
catch (Exception e) {
this.id = 0;
}
}