Question

我有一个dataTable和一个带有少量输入的过滤器。在过滤器中我有一个带ajax的commandButton。 ajax从bean触发一个方法，该方法在数据库中搜索与filter中的条件匹配的记录并呈现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有时会工作，有时也不会。有任何想法吗？

Answer 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不再“悬挂”了。

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

1 个答案: