1 Reply Latest reply on Dec 7, 2011 5:45 AM by afuentes

    datatable, filtering and AJAX

    afuentes Newbie

      Hi,

      I'm new here, I have just started with Richfaces, and I have a problem with the filtering of the datatable and the ajax associated. i know that this is implemented at http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=dataTable&sample=tableFiltering&skin=blueSky,

      but the behaviour of my application is very different from the demo page.

       

      Before I forget it, I am using RF4 and JSF 2.1.2 mojarra with eclipse.

       

      Perhaps, something is missing with my code, but, after more than week working on that, I don't know what it is.

       

      First the code

                    <h:form>

                          <rich:panel id="panelID" header="Panel">

       

                              <rich:extendedDataTable id="tableID" value="#{test1.list}" var="row" sortMode="single" selectionMode="single" >

                                  <f:facet name="noData">

                                         <h:outputText value="Lista de nombres" />

                                     </f:facet>

       

       

                                  <rich:column width="250px" filterExpression="#{fn:containsIgnoreCase(row, test1.filter)}" filterValue="#{test1.filter}">

                                      <f:facet name="header">

                                          <h:panelGroup>

                                              <h:outputText value="Nombre" /><br/>

                                              <h:inputText value="#{test1.filter}">

                                                  <a4j:ajax event="keypress" render="tableID@body" listener="#{test1.refreshListener}" execute="@this"/>

                                              </h:inputText>

                                          </h:panelGroup>

                                      </f:facet>

                                      <h:outputText value="#{row}" />

                                  </rich:column>

                                 </rich:extendedDataTable>

                          </rich:panel>

                      </h:form>

       

      and the ManagedBean functions

       

      public List<String> getList()

          {

              List<String> list = new LinkedList();

              list.add("aaa");

              list.add("aab");

              list.add("abb");

              list.add("aaabbb");

              list.add("bbb");

              return(list);

          }

       

          /**

           * @return the filter

           */

          public String getFilter()

          {

              return filter;

          }

       

          /**

           * @param filter the filter to set

           */

          public void setFilter(String filter)

          {

              this.filter = filter;

          }

       

      Let me explain it, I try to filter the list with each key press at the filter box. As you can see, the list is: "aaa", "aab", "abb", "aaabbb", "bbb".

      Now, the behaviour, I would like that when a press the 'a' key, the filter acts and the last item ("bbb"), disappear from the list with ajax. if I press another 'a', I would like that the filter makes dissapear the item "abb", and so on. I think this is the correct behaviour.

       

      But the actual behaviour is different...

      1) I press 'a' key and nothing happens.

      2) I press another 'a' ("aa" at the filter field) and again, nothing happens.

      3) I press another 'a' ("aaa" at the filter field) and now, yes, it begins to filter as the filter field had only "a".

      4) I press another 'a' ("aaaa" at the filter field) and now, it filters as the filter field had only "aa".

      Just like the filter was 2 request delayed. I can follow pressing letters or removing them, and always the 2 request delayed is keept.

       

      If I press "Enter", the correct behaviour with the correct filtering is shown, but, this is not AJAX, since the form is submitted.

       

      Well, that's it, thanks in advance.

      /Alberto

       

       

      I have discovered two points:

      a) If I change event="keypress" by event="keyup", I only get one request delay instead of two.

      b) If I add a button like this

      <a4j:commandButton value="#{msgs['general.Refresh']}" render="tableID" actionListener="#{test1.refreshAction}"/><br/>

      before datatable, when I press "Enter", I get the same as before, but with AJAX, instead of submit the form.

       

      But it remains the request delay when I fill up the filter input box.

       

      I hope this can help.

      /Alberto