JSF f:ajax listener not called

Question

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.

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).

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).

The method I am trying to call:

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

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>

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();
    });
});

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?

Update:

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.

However I need the f:ajax elsewhere, now.

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.

Solution 1

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...

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>

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" in your h:form will simplify your selectors in jQuery...

Solution 2

I had an issue like this. It turned out that an inputText somewhere had a value="#{something.something}" where the property wasn't settable. The exception wasn't being reported anywhere. I had to put a breakpoint on Exception and all subclasses to find it.

Solution 3

The issue is that the managed bean needs to be set up with the right signature event as an input param. Through lots of testing, I was trying to use the same class taking an AjaxBehaviorEvent. As in the same example on the previous forum.

when I declared an ActionListener event (compliant with the button jsf action), the bean is executed!

I had the same problem and followed your example to help me exactly. I simply (20 hrs) fixed this by including the following in my bean:

The first one now gets fired!

public void actionListener(ActionEvent actionEvent) {
    // Add event code here...
    System.out.println("Made it!");
}

public void morePressed(AjaxBehaviorEvent e) {

    System.out.println("Made it!");
}

Comments

[twmb]

I did have the callFunctionAjaxRequest, as well as fixed the ajax call (and removed all executes, as I don't need them). However... curiously enough, taking the event="click" out causes it to work. I wonder why leaving it in has it not working?

[Daniel]

event="click" is redundant but not supposed to do any harm... weird, are you sure that its not the referencing to wrong id's didn't do the harm?

[twmb]

I had exactly this: <h:commandButton type="button" styleClass="moreButtonAsText initiallyHidden" id="moreButtonAsText" value="&#x25b8;More"> <f:ajax listener="#{peopleBean.morePressed}" render="peopleDataTable" event="click" /> </h:commandButton> With a println in morePressed; it was never printed. Taking event="click" out reaches the println. I do attach a jQuery toggle to the button in the javascript file, but I don't think that would override the behavior and cause click to not bubble up or something; I don't have any propagation stopping.

[Daniel]

oki, really might be that the toggle does some mess with event="click" , strange... might be interesting to write some specific question without all the other code, just a button with f:ajax and jQuery toggle... and to see whats going on...