1 2 Previous Next 17 Replies Latest reply on May 28, 2013 3:58 PM by Paulo Sousa

    how to migrate setPropertyActionListener in rich:autocomplete

    Lu Han Newbie

      In migration process, I encounter a trouble, it's setPropertyActionListener in autocomplete.

      I had changed the component name and do migrate mostly successfully, but I was blocked by setPropertyActionListener.

      Please look at the code.

       

       

      The Original Code:

       

      <rich:suggestionbox id="suggestionBox" for="userFilter" suggestionAction="#{groupBean.fetchUsersByCondition}" var="user" fetchValue="#{user.userId} #{user.fullName}">

                <h:column>

                          <h:outputText value="#{user.fullName}"/>

                </h:column>

       

                <a4j:support event="onselect">

                          <f:setPropertyActionListener value="#{user}" target="#{groupBean.searchingUser}" />

                </a4j:support>

      </rich:suggestionbox>

       

       

      The Migrated Code:

       

       

      <rich:autocomplete id="suggestionBox" for="userFilter" suggestionAction="#{groupBean.fetchUsersByCondition}" var="user" fetchValue="#{user.userId} #{user.fullName}">

                <h:column>

                          <h:outputText value="#{user.fullName}"/>

                </h:column>

       

                <f:ajax event="select">

                          <f:setPropertyActionListener value="#{user}" target="#{groupBean.searchingUser}" />

                </f:ajax>

      </rich:autocomplete>

       

      Error:

       

      An Error Occurred:

      /sections/directory/groups_edit.xhtml @99,90 <f:setPropertyActionListener> Parent is not of type ActionSource, type is: org.richfaces.component.UIAutocomplete@3882a4

       

      Thanks,

      Lu Han

        • 1. how to migrate setPropertyActionListener in rich:autocomplete
          Ilya Shaikovsky Master

          Not related to RF. in JSF 2 world there is new entity Behavior - and both f: and a4j: ajax are behaviors and not a components. so that tag really can't be used inside.

          • 2. how to migrate setPropertyActionListener in rich:autocomplete
            Lu Han Newbie

            Thanks IIya for you answer.

             

            From your reply, I got the f:ajax is a behavior, and it cannot include other thing.

             

            Would you please give an approach to instead the following code?

             

            <a4j:support event="onselect">

                      <f:setPropertyActionListener value="#{user}" target="#{groupBean.searchingUser}" />

            </a4j:support>

             

            Thanks,

            Lu H.

            • 3. how to migrate setPropertyActionListener in rich:autocomplete
              Lu Han Newbie

              I found the solution for this migration trouble.

               

              The rf3.3.3 code:

               

              <rich:suggestionbox id="suggestionBox" for="userFilter" suggestionAction="#{groupBean.fetchUsersByCondition}" var="user" fetchValue="#{user.userId} #{user.fullName}">

                        <h:column>

                                  <h:outputText value="#{user.fullName}"/>

                        </h:column>

               

                        <a4j:support event="onselect">

                                  <f:setPropertyActionListener value="#{user}" target="#{groupBean.searchingUser}" />

                        </a4j:support>

              </rich:suggestionbox>

               

              rf4.0 code:

               

              <rich:autocomplete id="chooseUserBox" mode="cachedAjax" minChars="0" autoFill="false" selectFirst="false" value="#{groupBean.searchingUser}"

                                     autocompleteMethod="#{groupBean.fetchUsersByCondition}" var="user" fetchValue="#{user.userId} #{user.fullName}">

                                                                     <h:column>

                                                  <h:outputText value="#{user.userId} #{user.fullName}"/>

                      </h:column>

              </rich:autocomplete>

               

              By this way, jsf submmit  a string parameter instead of a object. But it's not very hard to deal with it on the backing side.

              • 4. how to migrate setPropertyActionListener in rich:autocomplete
                Ilya Shaikovsky Master
                By this way, jsf submmit  a string parameter instead of a object.

                that's true.. but we are talking about UIInput and not about select component.

                 

                you could try to use converter if you able to identify the object using the value string. But to get true label-value submissions you should use rich:select or standard select components.

                • 5. how to migrate setPropertyActionListener in rich:autocomplete
                  Lu Han Newbie

                  Thanks IIya, that's useful.

                  I try to use converter in rich:autocomplete, I puzzled if use converter, shall I use value at the sametime? I find the both attributes cannot work well together. I used converter in rich:listshuttle, and the converter worked well since the source and target are both list instead of a string value.

                   

                  If necessary, please give a sample for converter in rich:autocomplete. Because the sample demo is too simple to understand this feature.

                   

                  Not urgent but it's a wish.

                  • 6. how to migrate setPropertyActionListener in rich:autocomplete
                    Wanderlei Magri Newbie

                    Hi Lu Han,

                    I'm exactly the same problem. Have you found a solution or a converter that would work?

                    • 7. how to migrate setPropertyActionListener in rich:autocomplete
                      Lu Han Newbie

                      I don't find a satified converter for rich:autocomplete

                      But, you can get the solution from the No.3 reply, think it carefully and you will find the way.

                      • 8. how to migrate setPropertyActionListener in rich:autocomplete
                        Wanderlei Magri Newbie

                        Hi Lu Han,

                        I almost got run f: setPropertyActionListener, the only problem is that the value {obj} when he returns to the ManagedBean is returned as null, you have  idea what might be?

                                           <rich:autocomplete mode="cachedAjax" onchange="testando()" autocompleteMethod="#{beanTeste.obterContas}" var="obj" fetchValue="#{obj.descricaoConta}" value="#{managedBean.conta.descricaoConta}">

                                                       <h:outputText value="#{obj.descricaoConta}" />

                                                       <h:outputText value="#{obj.codigoConta}" />

                                                        <a4j:jsFunction name="testando" render="@form" >

                                                            <f:setPropertyActionListener target="#{managedBean.conta}" value="#{obj}"/>

                                                        </a4j:jsFunction>

                                            </rich:autocomplete>

                        • 9. how to migrate setPropertyActionListener in rich:autocomplete
                          Lu Han Newbie

                          It's good to see your code.

                          My opinion is set the ich:autocomplete value as #{managedBean.conta}.

                          And, I don't think it's necessary to use f:setPropertyActionListener here. What do you think?

                          • 10. how to migrate setPropertyActionListener in rich:autocomplete
                            Wanderlei Magri Newbie

                            So I think of using f:setPropertyActionListener there was no need to use a converter or re-query the object in a list or database, but I think the RichFaces should make our life easier in this regard is not it?

                            • 11. Re: how to migrate setPropertyActionListener in rich:autocomplete
                              Daniel Cárdenas Newbie

                              This is my solution:

                               

                              <rich:autocomplete mode="cachedAjax" tokens=", " minChars="1"

                                                  autofill="false" var="d" fetchValue="#{d.name}"

                                                  autocompleteMethod="#{documentReportCtrl.autoCompleteDoc}"

                                                  value="#{documentReportCtrl.documentName}" required="true" onselectitem="choose(#{rich:element('idDoc')}.value)">

                                                  <rich:column>

                              <h:inputHidden value="#{d.id}" id="idDoc" />

                                                      <h:outputText value="#{d.name}" />

                                                  </rich:column>

                              <a4j:jsFunction name="choose" ajaxSingle="true">

                              <a4j:param name="param1" assignTo="#{documentReportCtrl.documentId}" />

                              </a4j:jsFunction>

                              </rich:autocomplete>

                               

                              I hope this solution help you!

                              • 12. Re: how to migrate setPropertyActionListener in rich:autocomplete
                                Daniel Diehl Newbie

                                I've tried your solution but it doesn't worked completely well for me.

                                 

                                When I digit something that return only one result then jsFunction set the correct id, but if there are more than one result in the list and I select one that's not the first one, the jsFunction receives the first id instead of the selected one.

                                 

                                Do you have the same behavior or it works fine for you?

                                 

                                Is there a way to access the current select element on Javascript in the onselectitem?

                                • 13. Re: how to migrate setPropertyActionListener in rich:autocomplete
                                  Andrea Martino Newbie

                                  Hi all, even if this post is 1 year old I would like to post my solution to this problem.

                                   

                                  1. The item "id" has to be hidden in the generated suggestion list together with the displayed name
                                  2. When an item is selected on the list, a javascript function has to be called
                                  3. With javascript, the reference bean must be updated with the desired value.

                                   

                                  I managed to implement a solution that works on IE, Firefox and Chrome... Problably it works with every browser:

                                   

                                  <a4j:jsFunction name="updateVal" render="result">

                                      <a4j:param name="val" assignTo="#{testtest.resultId}"/>

                                  </a4j:jsFunction>

                                   

                                  <rich:autocomplete value="#{testtest.value}"

                                      autocompleteMethod="#{testtest.suggest}"

                                      fetchValue="#{result.firstName}, #{result.lastName}"

                                      var="result"

                                      onselectitem="updateVal(event.target.previousSibling.value)">

                                      <h:inputHidden value="#{result.id}"/>

                                      <h:outputText value="#{result.firstName}, #{result.lastName}" style="font: menu;"/>

                                  </rich:autocomplete>

                                   

                                  <s:div id="result">

                                      Selected value is <h:outputText value="#{testtest.resultId}" />

                                  </s:div>

                                   

                                   

                                  The trick is to hide an hidden input field close to the displayed text and then reference it using javascript. Just some more info:

                                  • when an item is selected, updateVal is executed
                                  • event is the mouse event
                                  • event.target is the span containing the displayed text
                                  • event.target.previousSibling is the hidden input field
                                  • event.target.previousSibling.value is the id of the value returned by autocompleteMethod

                                   

                                  I hope this can help somebody...

                                  • 14. Re: how to migrate setPropertyActionListener in rich:autocomplete
                                    Felix G. Newbie

                                    Hi,

                                    This doesn't work for me. The event.target.previousSibling is "undefined", target ist an div, but i don't get which one. I tried an a4j:ajax with event="selectitem", event="onchange" and "event="valuechange", switch to f:ajax, add a valueChangeListener too, but nothing worked. Take a look at primefaces, there ist is trivial with the attributes itemLabel and itemValue. Here is my code:

                                     

                                    <rich:autocomplete id="via"minChars="2" autofill="false" value="#{stop.name}" var="station" fetchValue="#{station.name} - #{station.id}"

                                         autocompleteMethod="#{sessionBean.autoCompleteStation}">

                                         <h:outputText value="#{station.name}  (#{station.id})" />

                                    </rich:autocomplete>

                                     

                                    Stop contains an attribute name and id, the autocompleteMethod returns a List<Station> which contains name and id and some more information. Display the data works, but i can't save the both attribute.

                                    Andrea Martino schrieb:

                                     

                                    Hi all, even if this post is 1 year old I would like to post my solution to this problem.

                                     

                                    1. The item "id" has to be hidden in the generated suggestion list together with the displayed name
                                    2. When an item is selected on the list, a javascript function has to be called
                                    3. With javascript, the reference bean must be updated with the desired value.

                                     

                                    I managed to implement a solution that works on IE, Firefox and Chrome... Problably it works with every browser:

                                     

                                    <a4j:jsFunction name="updateVal" render="result">

                                        <a4j:param name="val" assignTo="#{testtest.resultId}"/>

                                    </a4j:jsFunction>

                                     

                                    <rich:autocomplete value="#{testtest.value}"

                                        autocompleteMethod="#{testtest.suggest}"

                                        fetchValue="#{result.firstName}, #{result.lastName}"

                                        var="result"

                                        onselectitem="updateVal(event.target.previousSibling.value)">

                                        <h:inputHidden value="#{result.id}"/>

                                        <h:outputText value="#{result.firstName}, #{result.lastName}" style="font: menu;"/>

                                    </rich:autocomplete>

                                     

                                    <s:div id="result">

                                        Selected value is <h:outputText value="#{testtest.resultId}" />

                                    </s:div>

                                     

                                     

                                    The trick is to hide an hidden input field close to the displayed text and then reference it using javascript. Just some more info:

                                    • when an item is selected, updateVal is executed
                                    • event is the mouse event
                                    • event.target is the span containing the displayed text
                                    • event.target.previousSibling is the hidden input field
                                    • event.target.previousSibling.value is the id of the value returned by autocompleteMethod

                                     

                                    I hope this can help somebody...

                                    1 2 Previous Next