2

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.

3 Answers 3

4

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.

3

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

4
  • 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?
    – twmb
    Mar 24, 2012 at 19:48
  • 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?
    – Daniel
    Mar 24, 2012 at 19:57
  • 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.
    – twmb
    Mar 24, 2012 at 20:04
  • 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...
    – Daniel
    Mar 24, 2012 at 20:09
2

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!");
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.