0

我有一个问题,我的 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 的“提交”类型的命令按钮时,它按预期工作(除了某些按钮需要单击两次才能激活)。所以问题被本地化为 f:ajax 标签。

更新 3:

admin.xhtml 的整个代码库。它有点不干净,因为它正在被调试并尝试使其工作的过程。

<?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>
4

2 回答 2

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>
于 2013-05-03T23:22:21.680 回答
0

是否有任何理由通过 Javascript Event onclick 提交表单?我建议您这样调用操作:

<h:commandButton id="saveEdit#{customer.id}" value="Submit" actionListener="#{adminService.saveCustomer()}">
    <f:ajax render="@form" execute="@form"/>
</h:commandButton>
于 2013-05-03T10:59:23.130 回答