未调用JSF f:ajax侦听器 [英] JSF f:ajax listener not called

问题描述

当我尝试单击h:commandButton时，试图将h:inputText换成另一种.为此，我试图将f:ajax命令与h:commandButton绑定在一起，侦听器在Bean上设置一个值(确定要显示哪个)，然后重新呈现该区域.

I am trying to have an h:inputText switch out with a different one when an h:commandButton is clicked. To do this, I am trying to tie an f:ajax command with the h:commandButton, with the listener setting a value on the bean (deciding which one to display), and re-rendering the area.

我尝试在f:ajax上使用侦听器，在h:commandButton上使用actionListener，在h:commandButton上使用对f:ajax执行的动作.没事.我尝试调用的蛾子根本没有被调用-没有println(请参见后面的内容).

I have tried using listener on the f:ajax, actionListener on the h:commandButton, action on the h:commandButton with execute on the f:ajax. Nothing worked. The mothed I am trying to call is not being called at all - there is no println (see what follows).

panelGroup正在被重新渲染，这就是为什么我需要onevent属性来基于标题重新附加一些JavaScript提示文本的原因(我之前有一个与此有关的问题).

The panelGroup is being re-rendered, which is why I need the onevent attribute that re-attaches some JavaScript hint text based on the title (I had an earlier question involving this).

我要调用的方法:

public void morePressed(AjaxBehaviorEvent e) {
    easySearch = !easySearch;
    System.out.println("Made it!");
}

不起作用的JSF段(请注意最后一个h:commandButton试图重新呈现panelGroup):

The JSF segment that is not working (note the last h:commandButton is trying to re-render the panelGroup):

<h:form>
    <h:panelGroup id="switchSearchTexts">
        <h:inputText accesskey="s" alt="Search" id="searchBoxPeople" title="Search Plebeians" valueChangeListener="#{peopleBean.simplePersonQuery}" size="25" rendered="#{peopleBean.easySearch}">
            <f:ajax render="peopleDataTable" event="keyup" />
        </h:inputText>

        <h:inputText accesskey="s" alt="Search First Name" id="searchBoxFN" title="Search First Name" size="25" rendered="#{!peopleBean.easySearch}">
            <f:ajax render="peopleDataTable" event="keyup" />
        </h:inputText>
    </h:panelGroup>

    <div id="expandBox">
        <h:inputText id="searchBoxLN" alt="Search Last Name" styleClass="hideToggle" title="Search Last Name" size="25" />
        <h:inputText id="searchBoxAddress" alt="Search Address" styleClass="hideToggle" title="Search Address" size="25" />
    </div>

    <h:commandButton type="button" styleClass="moreButtonAsText" id="moreButtonAsText" value="&#x25b8;More">
        <f:ajax listener="#{peopleBean.morePressed}" render="switchSearchTexts" event="click" onevent="callFunctionAjaxRequest"  />
    </h:commandButton>

这是我附加到页面加载时更多"按钮上的JavaScript(jQuery).我给出它不是因为我认为它可以帮助您，但是我不知道这是否会以任何方式干扰ajax侦听器:

This is the JavaScript (jQuery) that I attach to the More button on pageload. I give it not because I think it could help, but I don't know if this could interfere with the ajax listener in any way:

$(function() {
    textboxHint();
    $('input[id$="moreButtonAsText"]').toggle(function(e) {
        $(this).prop('value', '\u25c2Less');
        $(".hideToggle").show(300);
    }
    , function () {
        $(this).prop('value', '\u25b8More');
        $(".hideToggle").hide(100);
        $('input[id$="searchBoxAddress"]').prop('value', function() {
            return $(this).prop('title');
        });
        $('input[id$="searchBoxAddress"]').blur();
    });
});

我不知道.就像我说的那样，我已经在h:commandButton上尝试了actionListener，并在其中使用了各种方法，以及在ajax上使用各种方法来侦听监听器.有人可以看到为什么收听者无法正常工作吗?

I have no idea. As I said, I have tried actionListener on h:commandButton with various appraoches there, as well as various approaches to the listener on the ajax. Can anybody see why the listener does not work?

更新:

我最终做的是在得到答案之前将所有内容转换为基于JavaScript的显示和隐藏，如果我最初没有隐藏javascript，则需要隐藏我需要隐藏的内容，等等.

What I ended up doing, before having an answer, is converting everything to display and hide based on JavaScript, with stuff I needed hidden if they didn't have javascript initially hidden, etc.

但是，现在我需要在其他地方使用f:ajax.

However I need the f:ajax elsewhere, now.

解决方案是在h:commandButton上取消event ="click".我仍然现在知道为什么这导致了它的崩溃，但是，嘿，无论如何.

The solution is to take out event="click" on the h:commandButton. I still do now know why this was causing it to break, but hey, whatever works.

推荐答案

您的js代码中确实有一个名为callFunctionAjaxRequest的函数吗?否则，可能会导致按钮不起作用(因为它被引用为不存在的功能)，

Do you really have a function named callFunctionAjaxRequest in your js code? cause if not it may cause the button not to work (because its being referenced to a not existing function) ,

查看萤火虫是否有可能的错误...

look at the firebug for a possible errors...

尝试使用此版本的命令按钮(也可以删除event ="click" ...并自行执行)

try this version of your command button (event="click" can be removed too... and self execute too)

<h:commandButton type="button" styleClass="moreButtonAsText" id="moreButtonAsText" value="More">
    <f:ajax listener="#{peopleBean.morePressed}" render="switchSearchTexts" />
</h:commandButton>

另一件事，在对上层输入文本的ajax调用中，您两次引用了searchBoxPeople(而不是第二个f:ajax中的searchBoxFN)，请解决该问题，否则将在使用searchBoxFN的f时导致该问题: ajax将尝试执行一个未呈现的元素...(可能导致严重的问题...)

Another thing , in your ajax calls of the upper input texts you got reference to searchBoxPeople twice (instead to searchBoxFN in the second f:ajax), fix it cause otherwise when working with searchBoxFN its f:ajax will try to execute an element that its not being rendered ... (can cause serious issues...)

p.s prependId="false"将简化jQuery中的选择器...

p.s prependId="false" in your h:form will simplify your selectors in jQuery...

这篇关于未调用JSF f:ajax侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！