This discussion is archived
5 Replies Latest reply: May 8, 2012 2:26 AM by 935636 RSS

How to click on h:datatable and open a new page

935636 Newbie
Currently Being Moderated
Hi,
I'm new to JSF. I have a basic example with JSF h:datatable which displays data. When I click on the table row new page is opened and an argument s passed via the http header:

Datatable:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <head>
        <title>test</title>
        <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.onclick = new Function("rowOnclick(this)");
}
}

function rowOnclick(tr) {
// var childNodes = tr.childNodes;
// for(var i = 0; childNodes.length > i; i++) {
//
// }

var elements = tr.cells[0].childNodes;
for(var i = 0; elements.length > i; i++) {
if ((typeof elements[i].id !== "undefined") &amp;&amp;
(elements[i].id.indexOf("lnkHidden") > -1)) {
//opne in a new window// window.open(elements[i].href);
location.href=elements[i].href
break;
}
}
return false;
}
</script>
</head>
<body onload="addOnclickToDatatableRows();">
<h:form id="myForm">
<h1>Click on table row example</h1>
<h:dataTable id="dataTable" var="data" value="#{datatableBean.lstData}" border="1">
<h:column>
<f:facet name="header">
<h:outputText value="ID" />
</f:facet>
<h:outputText value="#{data.id}" />
<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="Value1" />
</f:facet>
<h:outputText value="#{data.value}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Value2" />
</f:facet>
<h:outputText value="#{data.value}" />
</h:column>
</h:dataTable>
</h:form>
</body>
</html>
Managed bean:
package edu.home;

import edu.home.model.Data;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@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 123"));
lstData.add(new Data(3, "Hello abv"));
lstData.add(new Data(4, "Hello qaz"));
}

/**
* @return the lstData
*/
public List<Data> getLstData() {
return lstData;
}

/**
* @param lstData the lstData to set
*/
public void setLstData(List<Data> lstData) {
this.lstData = lstData;
}
}
The Java object:
package edu.home.model;

public class Data {

private int id;
private String value;

public Data(int id, String value) {
this.id = id;
this.value = value;
}
/**
* @return the id
*/
public int getId() {
return id;
}

/**
* @param id the id to set
*/
public void setId(int id) {
this.id = id;
}

/**
* @return the value
*/
public String getValue() {
return value;
}

/**
* @param value the value to set
*/
public void setValue(String value) {
this.value = value;
}
}
The page which is opened after the row is clicked:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<head>
<title>TODO supply a title</title>
</head>
<body>
<h1>This is another page</h1>
<h:panelGrid columns="2">
<h:outputText value="Selected ID" />
<h:outputText value="#{anotherPageBean.id}" />
</h:panelGrid>
</body>
</html>
The managed bean of the opened page:
package edu.home;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;

@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"));
}
catch (Exception e) {
this.id = 0;
}
}

/**
* @return the id
*/
public int getId() {
return id;
}

/**
* @param id the id to set
*/
public void setId(int id) {
this.id = id;
}
}
My question is how I can pass the argument into the background, without using the http header? Can you help me to implement this example?

Best Wishes
Peter

Edited by: 932633 on May 7, 2012 3:18 PM

Edited by: 932633 on May 7, 2012 3:18 PM                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
  • 1. Re: How to click on h:datatable and open a new page
    EJP Guru
    Currently Being Moderated
    how I can pass the argument into the background, without using the http header?
    What do you mean by 'pass the argument into the background?'

    And why all the futzing around in Javascript? Why not just use &lt;a&gt; or <h:outputLink> in the normal way? What value are you trying to add here?
  • 2. Re: How to click on h:datatable and open a new page
    gimbal2 Guru
    Currently Being Moderated
    EJP wrote:
    And why all the futzing around in Javascript? Why not just use &lt;a&gt; or <h:outputLink> in the normal way? What value are you trying to add here?
    I'm new to JSF.
    OP answered that already. I guess the OP really wants to turn a table row into something clickable, a link won't suffice then. Basic JSF tags don't support tagging event handlers to individual rows/columns as far as I know.

    @OP: you should really check out extension frameworks like Primefaces which have more advanced datatable implementations. Check out this for example:

    http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf

    There is also Richfaces, Icefaces, Tomahawk. Probably using any of these extension frameworks you hardly ever have to write manual javascript.
  • 3. Re: How to click on h:datatable and open a new page
    EJP Guru
    Currently Being Moderated
    Putting an &lt;a&gt; or <h:outputLink> into the cell works for me ;-)
  • 4. Re: How to click on h:datatable and open a new page
    935636 Newbie
    Currently Being Moderated
    @EJP I'm not sure but if I place just <a> or <h:outputLink> it's not going to do it because I want to open a new page when I click on entire <h:datatable> row. I need JavaScritpt for this.

    @gimbal2 I need to use pure JSF as much as I need because I need customized <h:datatable>. Using other frameworks won't help.


    Can you help me to modify the code that I posted, please?

    Best Wishes
  • 5. Re: How to click on h:datatable and open a new page
    gimbal2 Guru
    Currently Being Moderated
    932633 wrote:
    Can you help me to modify the code that I posted, please?
    Nope, I can't. I didn't mention the extension frameworks for nothing. It seems like you want to enter the territory of custom/composite components; you're best off buying a good book (like the JSF 2 reference guide) to get that done.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points