Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JSF Ajax updates makes commandLink fails at the first click

Tags:

java

ajax

jsf

jsf-2

In my JSF page I have a combobox that updates a table when an item of the combobox is selected.

The table contains items with an edit link.

The problem is when the table is changed by the combobox you need to click twice on the link to go to the page. The first click just refresh the page.

Here is the xhtml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <body>
        <ui:composition template="/template.xhtml">
            <ui:define name="windowTitle">Comment packages</ui:define>
            <ui:define name="content">
                <h3>Select the package to comment.</h3>
                <h:form prependId="false">
                    Section:
                    <h:selectOneMenu id="selectSection" value="#{platformService.currentSection}">
                        <f:ajax render=":list-packages" />
                        <f:selectItems value="#{platformService.releasePlatform.sections}" />
                    </h:selectOneMenu>
                </h:form>
                <p/>
                <h:panelGroup id="list-packages">
                    <h:dataTable id="packageList" var="package" value="#{packageService.packages}" border="1" >
                        <h:column>
                            <f:facet name="header">Package name</f:facet>
                            #{package.name}
                        </h:column>
                        <h:column>
                            <h:form>
                                <h:commandlink action="#{commentService.commentPackage}" value="Comment">
                                    <f:param name="packageName" value="#{package.name}" />
                                </h:commandLink>
                            </h:form>
                        </h:column>
                    </h:dataTable>
                </h:panelGroup>
            </ui:define>
        </ui:composition>
    </body>
</html>

I've also tried with commandButton but you also need to click twice on the button.

I'm running JSF 2.0.1-FCS in Maven/Jetty.

like image 351
Anthony Avatar asked Sep 07 '10 11:09

Anthony


2 Answers

It works when you put the table inside a single <h:form>. Remove the inner <h:form> from the column and replace <h:panelGroup id="list-packages"> by <h:form id="list-packages">.

I am not sure how/why this problem is caused (requires more time to investigate) but it's probably related to the fact that the table's state is important to know which row was selected.

like image 142
BalusC Avatar answered Nov 13 '22 03:11

BalusC


This problem is very likely to be due to this JSF bug where you can't have an ajax target containing a form that is updated from another form. The problem is being treated as a spec issue and is tracked here. The bug report has a workaround involving an edit to jsf.js if you like living on the edge.

With the use of ajax and the ability to control what gets submitted to the server with execute= I personally feel that there's a good argument for using a single form per page (except in rare circumstances such as some file upload and dialog box implementations), and you don't get caught by easy-to-forget naming container mishaps, and problems such as this one.

like image 41
Oversteer Avatar answered Nov 13 '22 04:11

Oversteer