JSF ajax 并不总是被触发，而是页面重新加载答案

【问题标题】：JSF ajax not always fired, page reload insteadJSF ajax 并不总是被触发，而是页面重新加载
【发布时间】：2015-07-15 02:39:55
【问题描述】：

我有一个数据表和一个带有一些输入的过滤器。在过滤器中，我有一个带有 ajax 的命令按钮。 ajax 从 bean 触发一个方法，该方法在数据库中搜索与过滤器中的条件匹配的记录并呈现 dataTable。问题是ajax 调用并不总是有效。我知道这很奇怪，对我来说也是如此，但它是真实的。并不总是我的意思是说我提出了 5 个请求（我单击 5 次 commandLink 和 ajax 工作，数据正在改变，bean 的方法正在触发），而不是第 6 次它不起作用，没有任何反应（没有来自客户端的请求侧面，未调用 bean 的方法），我再次单击，但仍然没有发生任何事情，让我们说当第三次单击它时它可以工作，但不是通过 ajax，而是通过正常提交并重新加载整个页面。我给出的数字并不总是相同的，有时我提出的第一个请求不起作用，有时我工作了很多次而没有这个错误。一些代码：

表：

    <h:dataTable id="usersTable" value="#{adminUserBean.userList}"
        var="user" styleClass="table"
        columnClasses="col30, ,col140,col140,col200,col140">

        <h:column headerClass="col30">
            <h:selectBooleanCheckbox value="#{user.selected}" id="check">
                <f:ajax listener="#{adminUserBean.selectUser(user)}"
                    render=":table:linkGroup" />
            </h:selectBooleanCheckbox>
        </h:column>

        <h:column>
            <h:commandLink styleClass="user-edit"
                value="#{user.name} #{user.surname}">
                <f:setPropertyActionListener value="true"
                    target="#{adminUserBean.edit}" />
                <f:ajax listener="#{adminUserBean.selectUser(user)}"
                    render=":table:linkGroup check" />
            </h:commandLink>
        </h:column>

        <h:column headerClass="col140">
            <h:commandLink value="#{user.login}">
                <f:ajax listener="#{adminUserBean.selectUser(user)}"
                    render=":table:linkGroup check" />
            </h:commandLink>
        </h:column>

        <h:column headerClass="col140">
            <h:commandLink value="#{user.permissions}">
                <f:ajax listener="#{adminUserBean.selectUser(user)}"
                    render=":table:linkGroup check" />
            </h:commandLink>
        </h:column>

        <h:column headerClass="col200">
            <h:commandLink value="#{user.lastLogin}">
                <f:ajax listener="#{adminUserBean.selectUser(user)}"
                    render=":table:linkGroup check" />
            </h:commandLink>
        </h:column>

        <h:column headerClass="col140">
            <h:commandLink
                styleClass="icon-status #{!user.active ? 'blocked' : user.isLogged ? 'logged' : 'offline'}"
                value="#{!user.active ? 'Nieaktywny' : user.isLogged ? 'Zalogowany' : 'Wylogowany'}">
                <f:ajax listener="#{adminUserBean.selectUser(user)}"
                    render=":table:linkGroup check" />
            </h:commandLink>
        </h:column>
    </h:dataTable>

过滤器：

<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:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core">
<h:form>
<div class="filters">
    <h2>Filtruj wg</h2>
    <h:panelGroup id="filtr" styleClass="filters-group">

        <div class="div-table">
            <div class="div-cell">
                <fieldset>
                    <legend>od</legend>
                    <a href="" class="icon icon-filter-off hidden" />
                    <h:inputText class="input-filtr date"
                        value="#{adminUserBean.userSearchProvider.dateFrom}" />
                </fieldset>
            </div>
            <div class="div-cell">
                <fieldset>
                    <legend>do</legend>
                    <a href="" class="icon icon-filter-off hidden" />
                    <h:inputText class="input-filtr date"
                        value="#{adminUserBean.userSearchProvider.dateTo}" />
                </fieldset>
            </div>
        </div>
        <div class="div-table">
            <div class="div-cell">
                <fieldset>
                    <legend>nazwa zawiera:</legend>
                    <a href="" class="icon icon-filter-off hidden"></a>
                    <h:inputText class="input-filtr"
                        value="#{adminUserBean.userSearchProvider.name}" />
                </fieldset>
            </div>
        </div>
    </h:panelGroup>

    <h:commandButton value="Wyszukaj"
        styleClass="btn btn-blue-back btn-big wyszukaj">
        <f:ajax execute="filtr" listener="#{adminUserBean.search}"
            render=":table:usersTable" />
    </h:commandButton>
</div>

豆子：

package com.example.bean

@ManagedBean
@SessionScoped
@Scope(value = "session", proxyMode = ScopedProxyMode.TARGET_CLASS)
@Controller
public class AdminUserBean implements Serializable {

@PostConstruct
public void init() {
    offset = 0;
    sortCol = 0;
    sortOrder = "asc";
    cleanData();
    setUsers();
    reportSearchProvider = new ReportSearchProvider();
}

public void setUsers() {
    try {
        if (userList == null || userList.size() == 0) {
            userList = new ArrayList<User>();
        }
        userList.addAll(adminUserService.getUsers(userSearchProvider,
                offset, sortCol, sortOrder));
    } catch (DAOException e) {
        e.printStackTrace();
    }
}

public void search() {
    if (userSearchProvider != null) {
        refreshUserList();
    }
}

private void refreshUserList() {
    offset = 0;
    userList.clear();
    setUsers();
}

（我跳过了一些行，变量声明等）

我使用纯 JSF 2.2、Tomcat 8 作为服务器（我不知道这是否重要）。我读过类似的问题，但我没有找到与我的例子相同的例子，即 ajax 有时有效，有时无效。有任何想法吗？

【问题讨论】：

你检查浏览器控制台是否有 JS 错误或其他线索？
是否可能是 bean 方法加载了太多数据，以至于 ajax 请求持续时间过长？
为什么在托管 bean 上使用重复的注解？任何一对都将被忽略，就好像它根本不存在一样。
这是因为我之前只使用 JSF 而不是转向 spring 但我留下了注释。我知道这是错误的，但如果我只留下一对，它不会改变任何东西。实际上，如果我只留下 JSF 注释，则 bean 为空。
我发现有时当 ajax “挂起”时，我下次单击它时会起作用，因此页面重新加载并不总是存在。正常的ajax请求（当它工作时）持续大约300ms，会不会太多？

标签： ajax jsf

【解决方案1】：

看来我找到了解决办法。我在项目中使用了一个 nicescroll 插件，当过滤器高度大于窗口高度时，它变为可滚动的，您不仅可以通过滚动条或鼠标滚轮滚动它，还可以通过鼠标左键抓住它并上下移动鼠标。事实证明，当我单击按钮并对其进行一点移动时，nicescroll 会以某种方式阻止 ajax 执行。但是当我再次单击而不做任何移动时（或者当我通过输入提交时）请求执行但不是通过 ajax，而是正常请求刷新整个页面。解决方案是在鼠标按下按钮时简单地删除 nicescroll，并在鼠标按钮按下时添加 nicescroll：

$('input.wyszukaj').mousedown( function() {
    $('.content-right-container').getNiceScroll().remove();
    $('.content-right-container').css({'overflow':'hidden'});
}).mouseup( function() {
    $('.content-right-container').niceScroll({
        cursorcolor: '#969696',
        cursorwidth: '4px',
        cursorborder: '0',
        cursorborderradius: '0',
        grabcursorenabled: false,
        touchbehavior: true,
        cursordragontouch: true
    });
});

而且效果很好。 Ajax 不再“悬而未决”。

【讨论】：