Question

我有一个问题，我的AJAX请求没有在JSF中触发，原因不明。

admin.xhtml代码段

<h:form id="adminPanel">
...
<f:subview id="editCustomer#{customer.id}">
    <p class="#{adminService.getEditCustomerClass(customer.id)}">
        <h:inputText id="email#{customer.id}" value="#{adminService.customerEmail}"/><br/>
        <h:inputText id="firstName#{customer.id}" value="#{adminService.customerFirstName}"/>
        <h:inputText id="lastName#{customer.id}" value="#{adminService.customerLastName}"/><br/>
        <h:commandButton id="saveEdit#{customer.id}" type="button" value="Save">
            <f:ajax render="@form" event="click" listener="#{adminService.saveCustomer()}"/>
        </h:commandButton>
        <h:commandButton id="cancelEdit#{customer.id}" type="button" value="Cancel">
            <f:ajax render="@form" event="click" listener="#{adminService.cancelEdit()}"/>
        </h:commandButton>
    </p>
</f:subview>
...
</h:form>

AdminService.java代码段

@Named
@Stateless
@LocalBean
public class AdminService {

    public String getEditCustomerClass(int id) {
        return id != customerId ? "hidden" : "";
    }

    public void saveCustomer() {
        cancelEdit();
    }

    public void cancelEdit() {
        movieId = -1;
        customerId = -1;
        orderId = -1;
        actorId = -1;
        employeeId = -1; //if none of the id's match, p should return 'hidden' class and not be seen.
    }

}

最初我遇到了问题，因为我没有使用CSS隐藏和显示，而是使用了“rendered =”属性。但是，我听说部分渲染视图可以打破AJAX，所以我将其逐步淘汰，希望不会部分渲染视图（只隐藏和显示它）将解决问题。

然而，这个ajax仍然没有调用我在listener属性中指定的方法（整个页面要大得多，并且使用了更多的AJAX，尽管其余部分工作直到按下这些按钮，然后其他ajax按钮停止响应。）

如果我将按钮类型更改为提交，如果我按两次按钮，它将实际执行侦听器方法，但其他ajax链接不会调用各自的侦听器方法。

我怎样才能让它发挥作用？

更新

以下是JSF在点击时触发的POST请求中的信息：

请求标题：

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:2186
Content-type:application/x-www-form-urlencoded;charset=UTF-8
Cookie:JSESSIONID=7342e0de92edc023eecbf706dae3
Faces-Request:partial/ajax
Host:www.minimalcomputers.com:8181
Origin:https://www.minimalcomputers.com:8181
Referer:https://www.minimalcomputers.com:8181/MovieProject/Admin/admin.xhtml
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31

表单数据：

adminPanel:adminPanel
adminPanel:representativeActionPane:customerPane:customersList:0:editCustomer1:email1:phroph@yahoo.com
adminPanel:representativeActionPane:customerPane:customersList:0:editCustomer1:firstName1:
adminPanel:representativeActionPane:customerPane:customersList:0:editCustomer1:lastName1:
adminPanel:representativeActionPane:customerPane:customersList:1:editCustomer1:email1:phroph@yahoo.com
adminPanel:representativeActionPane:customerPane:customersList:1:editCustomer1:firstName1:
adminPanel:representativeActionPane:customerPane:customersList:1:editCustomer1:lastName1:
adminPanel:representativeActionPane:customerPane:customersList:2:editCustomer1:email1:phroph@yahoo.com
adminPanel:representativeActionPane:customerPane:customersList:2:editCustomer1:firstName1:
adminPanel:representativeActionPane:customerPane:customersList:2:editCustomer1:lastName1:
adminPanel:representativeActionPane:customerPane:customersList:3:editCustomer1:email1:phroph@yahoo.com
adminPanel:representativeActionPane:customerPane:customersList:3:editCustomer1:firstName1:
adminPanel:representativeActionPane:customerPane:customersList:3:editCustomer1:lastName1:
adminPanel:representativeActionPane:customerPane:customersList:4:editCustomer1:email1:phroph@yahoo.com
adminPanel:representativeActionPane:customerPane:customersList:4:editCustomer1:firstName1:
adminPanel:representativeActionPane:customerPane:customersList:4:editCustomer1:lastName1:
javax.faces.ViewState:1088200739038195170:4402027985833798256
javax.faces.source:adminPanel:representativeActionPane:customerPane:customersList:0:editCustomer1:cancelEdit1
javax.faces.partial.event:click
javax.faces.partial.execute:adminPanel:representativeActionPane:customerPane:customersList:0:editCustomer1:cancelEdit1             adminPanel:representativeActionPane:customerPane:customersList:0:editCustomer1:cancelEdit1
javax.faces.partial.render:adminPanel
javax.faces.behavior.event:click
javax.faces.partial.ajax:true

响应标题

Cache-Control:no-cache
Content-Type:text/xml;charset=UTF-8
Date:Thu, 02 May 2013 21:45:05 GMT
Server:GlassFish Server Open Source Edition 3.1.2.2
Transfer-Encoding:chunked
X-Powered-By:Servlet/3.0 JSP/2.2 (GlassFish Server Open Source Edition 3.1.2.2 Java/Sun Microsystems Inc./1.6)
X-Powered-By:JSF/2.0

更新2：

当我切换到没有AJAX的“提交”类型的commandButtons时，它按预期工作（除了一些按钮需要两次点击才能激活）。所以问题本地化为f：ajax标签。

更新3：

admin.xhtml的完整代码库。 IT有点不干净，因为它正在进行调试并尝试使其工作。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"/>
        <h:outputStylesheet name="header.css" library="css"/>
        <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'/>
        <title>VideoPile - Administration</title>
    </h:head>
    <h:body>
        <div id="body">
            <ui:insert name="header" >
                <ui:include src="/templates/header.xhtml" />
            </ui:insert>
            <div id="content">
                Admin.
                <h:form id="adminPanel">
                    <!--<h:commandButton id="admin" value="Administrative Actions" rendered="{adminService.hasAdminPrivileges()}">
                        <f:ajax render="@form" event="click" listener="{adminService.toggleAdminPane()}"/>
                    </h:commandButton>-->
                    <h:commandButton id="manager" type="button" value="Manager Actions" rendered="#{adminService.hasManagerPrivileges()}">
                        <f:ajax render="@form" event="click" listener="#{adminService.toggleManagerPane()}"/>
                    </h:commandButton>
                    <h:commandButton id="representative" type="button" value="Representative Actions" rendered="#{adminService.hasRepresentativePrivileges()}">
                        <f:ajax render="@form" event="click" listener="#{adminService.toggleRepresentativePane()}" />
                    </h:commandButton>
                    <br/>
                    <!--<f:subview id="administrativeActionPane" rendered="{userService.showAdminPane}">
                        Admin Pane
                    </f:subview>-->
                    <f:subview id="managerialActionPane">
                        <div class="#{adminService.getShowManagerClass()}">
                        Manager Pane:
                        <h:commandLink id="editmovies" value="Movies">
                            <f:ajax render="@form" event="click" listener="#{adminService.toggleMoviePane()}"/>
                        </h:commandLink>
                        <h:commandLink id="employes" value="Employees">
                            <f:ajax render="@form" event="click" listener="#{adminService.toggleEmployeePane()}"/>
                        </h:commandLink>
                        <h:commandLink id="sales" target="_blank" value="View Sales Report" action="/Admin/salesreport"/>
                        <h:commandLink id="employees" target="_blank" value="View Most Active Employees" action="/Admin/activeemployees"/>
                        <h:commandLink id="customers" target="_blank" value="View Most Active Customers" action="/Admin/activecustomers"/>
                        <h:commandLink id="movies" target="_blank" value="View Most Active Movies" action="/Admin/activemovies"/>
                        <br/>
                        <f:subview id="moviesEditPane">
                            <span class="#{adminService.getShowMovieClass()}">
                                Movies.
                                <ui:repeat value="#{adminService.currentMoviePage}" var="movie">
                                    #{movie.name}
                                    <h:commandLink id="edit" value="Edit">
                                        <f:ajax render="@form" event="click" listener="#{adminService.editMovie(movie.id)}"/>
                                    </h:commandLink> 
                                    <h:outputText rendered="#{adminService.movieId eq movie.id}" value="edit"/>
                                    <br/>
                                </ui:repeat>
                            </span>
                        </f:subview>
                        <f:subview id="employeesEditPane">
                            <span class="#{adminService.getShowEmployeeClass()}">
                                Employees.
                                <ui:repeat value="#{adminService.currentEmployeePage}" var="employee">
                                    #{employee.firstName} #{employee.lastName}
                                    <h:commandLink id="edit" value="Edit">
                                        <f:ajax render="@form" event="click" listener="#{adminService.editEmployee(employee.id)}"/>
                                    </h:commandLink> 
                                    <h:outputText rendered="#{adminService.employeeId eq employee.id}" value="edit"/>
                                    <br/>
                                </ui:repeat>
                            </span>
                        </f:subview>
                        </div>
                    </f:subview>
                    <f:subview id="representativeActionPane">
                        <div class="#{adminService.getShowRepresentativeClass()}">
                            Customer Representative Pane:
                            <h:commandLink id="recordOrder" value="Record Order">
                                <f:ajax render="@form" event="click" listener="#{adminService.toggleOrderPane()}"/>
                            </h:commandLink>
                            <h:commandLink id="customers" value="Customers">
                                <f:ajax render="@form" event="click" listener="#{adminService.toggleCustomerPane()}"/>
                            </h:commandLink>
                            <h:commandLink id="mailingList" target="_blank" value="View Mailing List" action="/Admin/mailinglist"/>
                            <f:subview id="orderPane">
                                <span class="#{adminService.getShowOrderClass()}">
                                    Create new order.
                                </span>
                            </f:subview>
                            <f:subview id="customerPane">
                                <span class="#{adminService.getShowCustomerClass()}">
                                    Customers.
                                    <ui:repeat id="customersList" value="#{adminService.currentCustomerPage}" var="customer">
                                        <f:subview id="editCustomer#{customer.id}">
                                            <p class="#{adminService.getEditCustomerClass(customer.id)}">
                                                <h:inputText id="email#{customer.id}" value="#{adminService.customerEmail}"/><br/>
                                                <h:inputText id="firstName#{customer.id}" value="#{adminService.customerFirstName}"/>
                                                <h:inputText id="lastName#{customer.id}" value="#{adminService.customerLastName}"/><br/>
                                                <h:commandButton id="saveEdit#{customer.id}" type="submit" value="Save" actionListener="#{adminService.saveCustomer()}">
                                                    <f:ajax render="@form" event="click" execute="@form"/>
                                                </h:commandButton>
                                                <h:commandButton id="cancelEdit#{customer.id}" type="submit" value="Cancel" actionListener="#{adminService.cancelEdit()}">
                                                    <f:ajax render="@form" event="click" execute="@form" />
                                                </h:commandButton>
                                            </p>
                                        </f:subview>
                                        <f:subview id="viewCustomer#{customer.id}">
                                            <p class="#{adminService.getViewCustomerClass(customer.id)}">
                                                #{customer.email}<br/>
                                                #{customer.firstName} #{customer.lastName}<br/>
                                                <h:commandLink id="suggestion" target="_blank" value="View Suggestions" action="/Admin/customersuggestions">
                                                    <f:param name="user" value="#{customer.id}"/>
                                                </h:commandLink>
                                                <h:commandButton id="edit" type="submit" value="Edit" action="#{adminService.editCustomer(customer)}">
                                                    <f:ajax render="@form" event="click" execute="@form" />
                                                </h:commandButton>
                                            </p>
                                        </f:subview>
                                        <br/>
                                    </ui:repeat>
                                </span>
                            </f:subview>
                        </div>
                    </f:subview>
                </h:form>
            </div>
        </div>
    </h:body>
</html>

Answer 1

我找到了答案，其原因确实很奇怪，但这是有道理的。

在我的ID中，我使用EL为UIComponents定义唯一ID（即使这不是必需的）。当我从ID中删除EL时，ajax可以工作！

我在假设（尽管我确信BalusC会给出更全面的答案），那是因为id不是静态的，即使ID在概念上是相同的，它也影响了JSF的发现方式的UIComponents。

现在我感到愚蠢，因为如果我没有添加任何多余的元素，这个问题就完全可以避免了。

例如，我原帖中的代码应如下所示：

<h:form id="adminPanel">
...
<f:subview id="editCustomer">
    <p class="#{adminService.getEditCustomerClass(customer.id)}">
        <h:inputText id="email" value="#{adminService.customerEmail}"/><br/>
        <h:inputText id="firstName" value="#{adminService.customerFirstName}"/>
        <h:inputText id="lastName" value="#{adminService.customerLastName}"/><br/>
        <h:commandButton id="saveEdit" type="button" value="Save">
            <f:ajax render="@form" event="click" listener="#{adminService.saveCustomer()}"/>
        </h:commandButton>
        <h:commandButton id="cancelEdit" type="button" value="Cancel">
            <f:ajax render="@form" event="click" listener="#{adminService.cancelEdit()}"/>
        </h:commandButton>
    </p>
</f:subview>
...
</h:form>

Answer 2

是否有任何理由通过Javascript事件onclick提交表单？我建议你这样做：

<h:commandButton id="saveEdit#{customer.id}" value="Submit" actionListener="#{adminService.saveCustomer()}">
    <f:ajax render="@form" execute="@form"/>
</h:commandButton>

AJAX没有在JSF 2.0中激活

2 个答案: