open new page (navigate to new site) when selecting a dataTable row

Question

There a several related question on this topic on SO and elsewhere, but I couldn't find a definitive answer on this specific question.

I have a p:dataTable and I want the possibility to click on a row and open a detail page (a new page, not a dialogue or window).

I have solved it this way (which I have from the primefaces website, for some reason it is no longer there: http://web.archive.org/web/20101001223235/http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf):

<p:dataTable var="order" value="#{orderBean.orders}" selection="#{orderBean.selectedOrder}" selectionMode="single" rowKey="#{order.number}">
  <p:ajax event="rowSelect" listener="#{orderBean.orderSelect}"/>
  <p:column ... />
</p:dataTable>

The navigation is then executed in the bean:

public void orderSelect(SelectEvent event) {  
  ConfigurableNavigationHandler nh = (ConfigurableNavigationHandler)FacesContext.getCurrentInstance().getApplication().getNavigationHandler();
  nh.performNavigation("orderDetail?faces-redirect=true");
}

My Question: is there a way of doing this just inside JSF without the help of a backing bean?

I am also asking because they removed the code exmaple from the primefaces site, which might be an indication that this is not the right way of doing something like that.

score 8 · Answer 1 · answered Mar 26 '13 at 12:07

8

Wrap the cell(s) of interest in a simple <h:link>.

<p:column>
    <h:link outcome="orderDetail">
        ...
    </h:link>
</p:column>

Use if necessary CSS display:block on the link to let it span the entire cell. You can if necessary pass request parameters using a nested <f:param>.

answered Mar 26 '13 at 12:07

BalusC

1,082,665
372
3,610
3,555

1

Nice, that works. But as I have to wrap the ``s around every cell (column), it's still not the ultimate one-line-solution i was looking for. Maybe I'm just too particular! (Btw, additional thanks for the `display:block` hint.) – Manuel M Mar 26 '13 at 14:23
1

Right, but that's best you can get if you want to keep it SEO friendly. – BalusC Mar 26 '13 at 14:28
SEO - didnt think about that before. Gladly my application is internal only. I guess I found a way to do it that suits my needs and does not need too much coding in backing beans. – Manuel M Mar 26 '13 at 14:47
Alternatively, you could throw in some jQuery to add `onclick="window.location='orderDetail.xhtml'"` to all `` elements. – BalusC Mar 26 '13 at 14:48

score 1 · Answer 2 · answered Mar 26 '13 at 09:08

1

since it is an ajax request, typically the request/response is used to re-render some components in the web page. What you could do is

<p:ajax event="someventofintrest" onsuccess="javascript:myjsmethod();"></p:ajax>

and

<p:remotecommand name="myjsmethod" action="#{mybean.mybeanmethod}" />

and in the backing bean

public String mybeanmethod(){
  return "mynewpage";  // Navigate away to mynewpage.xhtml
}

HTH.

answered Mar 26 '13 at 09:08

maggu

1,201
9
9

true - but it's not really less code. I was thinking of something like ` – Manuel M Mar 26 '13 at 09:21
Yeah but the ajax requests are not really there to navigate away from current page. Only action methods from command controls (command buttons, command links, remote command etc) does the navigation function. See this link: http://stackoverflow.com/questions/5406855/jsf-navigation-with-ajax – maggu Mar 26 '13 at 10:19
You're right. Looks like I am searching for some solution without using ajax - but I guess this won't work when I'm using `p:datatable`. – Manuel M Mar 26 '13 at 11:04

score 1 · Accepted Answer · answered Mar 26 '13 at 14:50

As I didn't find a really perfect solution, this is how I do it now.

I have now a "navigator" class like this

@Component
public class Navigator {
  public void nav(String page) {
    UIHelper.navigateTo(page);
  }
}

And I call this class from my ajax event:

<p:ajax event="rowSelect" listener="#{navigator.nav('orderDetail')}"/>

As I said, not really perfect, but I like the fact that I don't have to write code in my backing bean. (Of course I have to write code for the Navigator, but that I can re-use.)

open new page (navigate to new site) when selecting a dataTable row

3 Answers3