3.04M DataTable's [page event] ignores process/update values

UI Components for JSF
smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

16 Dec 2011, 05:50

1. Honestly, I never use process="..." in my p:ajax statements; in one of the URLs below, I read that f:ajax execute= defaults to @this; p:ajax process="..." is similar to f:ajax execute="...", but I don't know if p:ajax process="..." is exactly the same, since it belongs to PrimeFaces.

2. I think you should try to submit the entire form (process="@form") via AJAX, and code your bean (getters/setters) to process entire form in bean and update="@form".

3) In your last post, you stated the following:
FYI - This may or may not be important to know, but all of the above are simple examples based on what I am really trying to accomplish. What I have is a p:menubar with p:menuitems sitting the header facet of a datatable. Several of the menuitems enable/disable based on the user selecting/unselecting a row in the dataTable. Also, there is a boolean column called "Active". If the value of the "Active" column of the selected row is true, then the text of one of the menuitem's should read "Deactivate". If the value is false, the menuitem's text should be "Activate". Now- that works great with regard to the rowSelect event. It toggles quite nicely. However, the dataTable is set up so that when the user pages, the page event should execute a listener which selects the first row of the new page (works like a charm), and the update of the page event should update the menuitem's text based on the value of the newly selected row. Clearly from the above conversation - it doesn't work.
Are you saying that the following is the only part that is not working?
and the update of the page event should update the menuitem's text based on the value of the newly selected row. Clearly from the above conversation - it doesn't work.
If so, hmmm... it seems as though you want the dataTable "page" event to do the following (in the following order):

1. select 1st row on the new page
2. get value of the selected row after step/action #1 (above) is completed
3. menuitem text updated with value of the selected row (which is 1st row on new page)

I think I see why you want to use process="..." and update="...".

Recommendation(s):

1. I think you can omit process="..." from rowSelect and page events
2. p:ajax event="page" update=":@form"
3. p:ajax event="rowSelect" update=":@form :formThatcontainsMenu:menuComponent"

In this order, page event should be first action, to select 1st row when page event executed, and then rowSelect should be the last action. Try and let me know, please.

Some articles that might be good to read, discussing f:ajax (even though I know we are discussing p:ajax here). :)


losing-validation-with-fajax

Ajax POST Form

Ajax POST Form

jsf ajax question
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

Cool Mr Ice
Posts: 46
Joined: 17 Sep 2011, 11:53

17 Dec 2011, 00:21

smithh032772 wrote: Are you saying that the following is the only part that is not working?
and the update of the page event should update the menuitem's text based on the value of the newly selected row. Clearly from the above conversation - it doesn't work.
Yes, when the user selects a row, the menuitem's text is updated; but when the user pages and the row is selected programmatically , the menuitem's text is not updated.
smithh032772 wrote:...you want the dataTable "page" event to do the following (in the following order):
1. select 1st row on the new page
2. get value of the selected row after step/action #1 (above) is completed
3. menuitem text updated with value of the selected row (which is 1st row on new page)
Exactly!
smithh032772 wrote:Recommendation(s):
1. I think you can omit process="..." from rowSelect and page events
2. p:ajax event="page" update=":@form"
3. p:ajax event="rowSelect" update=":@form :formThatcontainsMenu:menuComponent"
Here is some of the code I am using.
xhtml

Code: Select all

<p:dataTable id="serviceTypes"
             widgetVar="serviceTypesWVar"
             value="#{serviceTypesView.serviceTypes}"
             var="item"
             paginator="true" rows="10" rowsPerPageTemplate="5,10,15,20" paginatorPosition="bottom" pageLinks="10"
             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
             rowKey="#{item.serviceTypeSKey}"
             selection="#{serviceTypesView.selectedServiceType}"
             selectionMode="single">
    <p:ajax event="rowSelect" update="@this"/>
    <p:ajax event="rowUnselect" update="@this"/>
    <p:ajax event="page" listener="#{serviceTypesView.onPage}" update="@this"/>
    <f:facet name="header">
        <table>
            <tr>
                <td width="33%" align="left" nowrap="true" style="padding-left: 10px; padding-top: 4px;">
                    <p:menubar styleClass="table-menu" style="display: inline; padding: 0;">
                        ...
                        <p:menuitem value="#{serviceTypesView.selectedServiceType.isActive ? 'Deactivate' : 'Activate'}"
                                    icon="ui-icon #{serviceTypesView.selectedServiceType.isActive ? 'ui-icon-cancel' : 'ui-icon-radio-on'}"
                                    disabled="#{!serviceTypesView.serviceTypeSelected}"
                                    process="@this"
                                    onclick="#{serviceTypesView.selectedServiceType.isActive} ? deactivateServiceTypeDialogWVar.show() : activateServiceTypeDialogWVar.show()"
                                    oncomplete="document.getElementById(#{serviceTypesView.selectedServiceType.isActive} ? 'deactivateComponent:confirm' : 'activateComponent:confirm').focus();"/>
                    </p:menubar>
                </td>
                <td width="33%" nowrap="true">
                    <h:outputText value="Service Types"/>
                </td>
                <td width="33%" align="right" nowrap="true" style="padding-right: 10px; padding-top: 4px;">
                ...
                </td>
            </tr>
        </table>
    </f:facet>
    ...
    <p:column headerText="Active">
        <h:outputText value="#{item.isActiveDisplay}"/>
    </p:column>
    ...
</p:dataTable>
ViewScoped Bean

Code: Select all

    ...
    public void onPage(PageEvent event) {
        if(!isServiceTypeSelected())
            return;   //no row was previously selected, so don't select first row in new page

        DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("mainForm:serviceTypes");
        selectedServiceType = (TServiceType) ((CommonLazyDataModel) dataTable.getValue()).getDataList().get(dataTable.getFirst());
        dataTable.setSelection(selectedServiceType);
    }
    ...
The rowSelect and rowUnselect ajax events work great just the way they are shown above. The page ajax event does not. I did, however, try the suggestions you listed above plus about 10+ others that I came up with involving various combinations of :@form, :@form:component_id, etc, etc. It is interesting to note that when @this is replaced with @form in the rowSelect event, there is no difference in functionality; but if I replace @this with @form in the page event, the p:dataTable completely dissapears and all that is left is the plain text of the rows - weird.
smithh032772 wrote:In this order, page event should be first action, to select 1st row when page event executed, and then rowSelect should be the last action.
Are you saying that if the first row of the new page is selected programmatically, then the rowSelect event should be fired? If that is the case, I am not seeing any evidence of it. If the rowSelect event automatically fired after the page event, that would be great because rowSelect is able to update the menuitem.

What I logically think should be happening though is that the user pages, the page event fires (it does), onPage() executes selecting a new row (it does), and menuitem is updated using the new row that onPage() set (it does not). Unless you have any other ideas or see something else I am doing wrong, my hope is that R2 has the fix in it that will cause the menuitem to be updated after the page event fires.
PrimeFaces 3.5
JSF 2.1
Mojarra 2.1.3
Glassfish 3.1.1
Netbeans 7.0.1
JDK 7
JEE 6

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

17 Dec 2011, 08:00

In the code below, my responses are as follows:
1. First of all, I like your code, especially, referencing UIComponent via UIViewRoot, and then getDataList() and getFirst().
2. Question: Why are you referencing getDataList() instead of getSubList() ?
3. I'm using LazyDataModel too, and the showcase example gets subList when paging. Correct? Please confirm (I may be wrong).
4. I'm asking this, because the fix "may be" subList instead of dataList; my opinion, dataList = entire result set; subList = a page of data in the dataList. Correct?
5. Can you add System.out.println("value of dataTable.getFirst() = ...")? Will getFirst() return firstRowNumber (integer)? Afterwards, run web app, page through data, and see what kind of results you get in server log file. Are the outputted values = expected values? What are the outputted values and what are the expected values? List a few outputted AND expected values, please.
6. dataTable.setSelection(...) is supposed to select the first row on the new page after using paginator UI controls?

Code: Select all

        DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("mainForm:serviceTypes");
        selectedServiceType = (TServiceType) ((CommonLazyDataModel) dataTable.getValue()).getDataList().get(dataTable.getFirst());
        dataTable.setSelection(selectedServiceType);
I heard that it is best/recommended to limit the amount of java you do in xhtml/jsf, and keep java expressions in the bean, and encapsulate as much business/controller logic in your bean. I think you should add a String attribute to your bean, and getter method will return Deactivate or Activate. The expression can be moved to your bean. I see you have other similar expressions in your xhtml/jsf. Really, it's up to you. My recommendation will not fix the page event issue you're having.

Code: Select all

<p:menuitem value="#{serviceTypesView.selectedServiceType.isActive ? 'Deactivate' : 'Activate'}"
Okay, disregard the @form in update="...", since you tried that, and disregard statement about rowSelect firing after page event.

My response to your quote below:
1. Your first statement, below, is very interesting, and you might need to simulate/implement the rowSelect from within the onPage().
2. Below, you said that page event fires, onPage() executes, AND selects new/top row. That's great!
3. Now, in onPage(), after selecting the row, you can use similar logic in onPage() to update menu item text, accordingly. Correct? please confirm.
4. As I recommended earlier (above), move following expression to bean: #{serviceTypesView.selectedServiceType.isActive ? 'Deactivate' : 'Activate'}"
5. If you do that, I think your problem should be solved, because onPage() will update dataTable by selecting a row, and this EL (that currently exists) in xhtml/jsf, will evaluate in your bean, and when bean getter returns Deactivate or Activate to your xhtml/jsf, then menuitem value will be updated, successfully, after page event fires (and after onPage() has completed). Right?
6. Interesting that you have menubar in dataTable f:facet header, really interesting/nice idea. I wonder if your page update="..." should include menubar ID, so menuBar will be updated too in xhtml/jsf after page event is fired; unless, menubar is updated when page event update="@this". Hmmm... let us know, please. :)
If the rowSelect event automatically fired after the page event, that would be great because rowSelect is able to update the menuitem.

What I logically think should be happening though is that the user pages, the page event fires (it does), onPage() executes selecting a new row (it does), and menuitem is updated using the new row that onPage() set (it does not).
You're doing some impressive coding here. I like. :)
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

Cool Mr Ice
Posts: 46
Joined: 17 Sep 2011, 11:53

19 Dec 2011, 09:34

smithh032772 wrote:...2. Question: Why are you referencing getDataList() instead of getSubList() ?
3. I'm using LazyDataModel too, and the showcase example gets subList when paging. Correct? Please confirm (I may be wrong).
4. I'm asking this, because the fix "may be" subList instead of dataList; my opinion, dataList = entire result set; subList = a page of data in the dataList. Correct?
This code -

Code: Select all

        DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("mainForm:serviceTypes");
        selectedServiceType = (TServiceType) ((CommonLazyDataModel) dataTable.getValue()).getDataList().get(dataTable.getFirst());
        dataTable.setSelection(selectedServiceType);
is part of the "public void onPage(PageEvent event)" method which is called by the dataTable's page event. It does not perform the actual paging. That is done in my CommonLazyDataModel which uses subList() to return the data for a requested firstRow and pageSize. getFirst() returns the index, relative to the entire dataList, of the first row on the page to be displayed to the user. Therefore, the entire dataList needs to be obtained to access the correct row.
smithh032772 wrote: 5. Can you add System.out.println("value of dataTable.getFirst() = ...")? Will getFirst() return firstRowNumber (integer)? Afterwards, run web app, page through data, and see what kind of results you get in server log file. Are the outputted values = expected values? What are the outputted values and what are the expected values? List a few outputted AND expected values, please.

Code: Select all

System.out.println("value of dataTable.getFirst() = " + dataTable.getFirst() + " ~ value of event.getPage() = " + event.getPage());
The dataList size is 22 ([0...21])
For page size = 10
INFO: value of dataTable.getFirst() = 10 ~ value of event.getPage() = 1
INFO: value of dataTable.getFirst() = 20 ~ value of event.getPage() = 2
INFO: value of dataTable.getFirst() = 10 ~ value of event.getPage() = 1
INFO: value of dataTable.getFirst() = 0 ~ value of event.getPage() = 0

For page size = 5
INFO: value of dataTable.getFirst() = 5 ~ value of event.getPage() = 1
INFO: value of dataTable.getFirst() = 10 ~ value of event.getPage() = 2
INFO: value of dataTable.getFirst() = 15 ~ value of event.getPage() = 3
INFO: value of dataTable.getFirst() = 20 ~ value of event.getPage() = 4
INFO: value of dataTable.getFirst() = 15 ~ value of event.getPage() = 3
INFO: value of dataTable.getFirst() = 10 ~ value of event.getPage() = 2
INFO: value of dataTable.getFirst() = 5 ~ value of event.getPage() = 1
INFO: value of dataTable.getFirst() = 0 ~ value of event.getPage() = 0

All of the above is exactly what is expected.
smithh032772 wrote:6. dataTable.setSelection(...) is supposed to select the first row on the new page after using paginator UI controls?
That is my understanding, and it appears to work. If I do not perform dataTable.setSelection(...), no row is visibly selected when the user sees then new page. If it is used, the first row of the page is visibly selected.
smithh032772 wrote:I heard that it is best/recommended to limit the amount of java you do in xhtml/jsf, and keep java expressions in the bean, and encapsulate as much business/controller logic in your bean. I think you should add a String attribute to your bean, and getter method will return Deactivate or Activate. The expression can be moved to your bean. I see you have other similar expressions in your xhtml/jsf. Really, it's up to you. My recommendation will not fix the page event issue you're having.

Code: Select all

<p:menuitem value="#{serviceTypesView.selectedServiceType.isActive ? 'Deactivate' : 'Activate'}"
You are right, I have moved it and some other code to the bean. I definitely would prefer to do things the correct and most efficient way. -Thanks
smithh032772 wrote:My response to your quote below:
1. Your first statement, below, is very interesting, and you might need to simulate/implement the rowSelect from within the onPage().
Cool Mr Ice wrote: If the rowSelect event automatically fired after the page event, that would be great because rowSelect is able to update the menuitem.

What I logically think should be happening though is that the user pages, the page event fires (it does), onPage() executes selecting a new row (it does), and menuitem is updated using the new row that onPage() set (it does not).
This may be true, hopefully only as a last resort. It seems like such a hack for something that should work simply by using the "update" in the page event.
smithh032772 wrote: 2. Below, you said that page event fires, onPage() executes, AND selects new/top row. That's great!
3. Now, in onPage(), after selecting the row, you can use similar logic in onPage() to update menu item text, accordingly. Correct? please confirm.
Correct
smithh032772 wrote:4. As I recommended earlier (above), move following expression to bean: #{serviceTypesView.selectedServiceType.isActive ? 'Deactivate' : 'Activate'}"
5. If you do that, I think your problem should be solved, because onPage() will update dataTable by selecting a row, and this EL (that currently exists) in xhtml/jsf, will evaluate in your bean, and when bean getter returns Deactivate or Activate to your xhtml/jsf, then menuitem value will be updated, successfully, after page event fires (and after onPage() has completed). Right?
Well, I was excited after reading your suggestion because it sounded like it would work. Unfortunately, it did not. The menuitem value was never updated after the page event fires and after onPage() has completed.
smithh032772 wrote: 6. Interesting that you have menubar in dataTable f:facet header, really interesting/nice idea.
Thanks! It looks pretty cool too - in addition to the "Active" menuitem, I have "Refresh", "New", "Edit", "Delete". They use dialogs to perform CRUD operations.
smithh032772 wrote:I wonder if your page update="..." should include menubar ID, so menuBar will be updated too in xhtml/jsf after page event is fired; unless, menubar is updated when page event update="@this". Hmmm... let us know, please. :)
The rowSelect event does not need the menubar ID in its update. @this works fine. I did try to set the update to the menubar ID for the page event, but no luck there either.

Also, I tried all of the above for both RC1 and RC2 (looks like it was just released). See my next post for more...
PrimeFaces 3.5
JSF 2.1
Mojarra 2.1.3
Glassfish 3.1.1
Netbeans 7.0.1
JDK 7
JEE 6

Cool Mr Ice
Posts: 46
Joined: 17 Sep 2011, 11:53

19 Dec 2011, 09:35

Okay, check this example out. It is using RC2.

Obviously, many combinations of testing have been tried, but I believe that below demonstrates clearly what the issue is.

xhtml

Code: Select all

<h:form id="mainForm" prependId="false">
    <h:outputText id="test1" value="#{serviceTypesView.activeMenuitemValue}"/>

    <p:menubar id="test2">
        <p:menuitem value="#{serviceTypesView.activeMenuitemValue}"
                    icon="ui-icon #{serviceTypesView.activeMenuitemIcon}"/>
    </p:menubar>

    <p:dataTable id="serviceTypes" var="item" value="#{serviceTypesView.serviceTypes}"
                 paginator="true" paginatorAlwaysVisible="false" rows="10" rowsPerPageTemplate="5,10,15,20"
                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 selection="#{serviceTypesView.selectedServiceType}" selectionMode="single">
        <p:ajax event="rowSelect" update="@this test1 test2"/>
        <p:ajax event="page" listener="#{serviceTypesView.onPage}" update="@this test1 test2 test3 test4"/>
        <f:facet name="header">
            <h:outputText id="test3" value="#{serviceTypesView.activeMenuitemValue}"/>
            <table>
                <tr>
                    <td>
                        <p:menubar id="test4">
                            <p:menuitem value="#{serviceTypesView.activeMenuitemValue}"
                                        icon="ui-icon #{serviceTypesView.activeMenuitemIcon}"
                                        disabled="#{!serviceTypesView.serviceTypeSelected}"/>
                        </p:menubar>
                    </td>
                    <td>
                        ...
                    </td>
                    <td>
                        ...
                    </td>
                </tr>
            </table>
        </f:facet>
        <p:column>
            ...
        </p:column>
    </p:dataTable>
</h:form>
viewscoped bean

Code: Select all

    ....
    private TServiceType selectedServiceType = null;
    ...
    public void onPage(PageEvent event) {
        if(!isServiceTypeSelected())  //method to test for null
            return;   //no row was previously selected, so don't select first row in new page

        DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("mainForm:serviceTypes");
        selectedServiceType = (TServiceType) ((CommonLazyDataModel) dataTable.getValue()).getDataList().get(dataTable.getFirst());
        dataTable.setSelection(selectedServiceType);
    }

    public String getActiveMenuitemValue() {
        return isServiceTypeSelected() ? (selectedServiceType.getIsActive() ? "Deactivate" : "Activate") : "Activate";
    }
    
    public String getActiveMenuitemIcon() {
        return "ui-icon " + (isServiceTypeSelected() ? (selectedServiceType.getIsActive() ? "ui-icon-cancel" : "ui-icon-radio-on") : "ui-icon-radio-on");
    }
    ...
Above we have an outputText (test1), a menubar with a menuitem (test2), a dataTable with a header facet, an outputText inside the header facet (test3) and a menubar with a menuitem inside the header facet (test4).

When the user selects a row - test1, test2, test3, test4 all have their values updated to reflect weather or not the row selected is active.

When the user pages - The first row of the new page is visibly selected... test1 and test2 have their values updated to weather or not the newly selected first row on the new page is active... test3 and test4 do not.

This makes me think that the page event fires correctly and the first row on the new page is selected in the onPage method correctly (because test1 and test2 reflect this). However, nothing in the header facet is updated as a result of the page event. I do believe, that based on all the testing I have done with this issue, the Primefaces team did makes some corrections to this issue between R1 and R2. Yet, it is still not functioning as the rowSelect and rowUnselect events do.

If you agree that there is still a bug specifically in the updating of the header facet of the dataTable, do you think I should create another issue for this?
PrimeFaces 3.5
JSF 2.1
Mojarra 2.1.3
Glassfish 3.1.1
Netbeans 7.0.1
JDK 7
JEE 6

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

19 Dec 2011, 14:33

Cool Mr Ice wrote:If you agree that there is still a bug specifically in the updating of the header facet of the dataTable, do you think I should create another issue for this?
To answer your question above, please see/read the following:

Cagatay/Optimus-Prime's response (please note the part about buying support)
viewtopic.php?f=3&t=16865&start=10#p51598

Issue created as per the above forum conversation (before Cagatay's response)
http://code.google.com/p/primefaces/iss ... il?id=3064

Okay, back to hacking a solution. :)

First of all, i like your responses, very detailed and responsive.

Per your last post and test case/results, I think it's time to use JavaScript to resolve this issue. I've had to do the same even just yesterday (last night or earlier this morning, forgot exactly the time I had to code that...smile). Please read the following blog, and do something similar; i did the other-way-around (client-to-server maybe 1 or 2 days/nights ago), which is also documented in this blog.

BalusC's blog: Pass variables from server side to client side

I really don't like the behavior I've been experiencing recently in p:dataTable f:facet name="header" (header of the dataTable). I tried to add the following in dataTable header or a p:column f:facet name="header" (datatable column header), and it did not render well at all.

Code: Select all

            <h:panelGrid columns="2" cellspacing="2" cellpadding="2">
                <h:selectOneRadio value="#{pf_orderCustomerPointOfContactController.listToBrowse}"
                                  onclick="document.getElementById('orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter').click()">
                    <f:selectItem itemLabel="Ordered By" itemValue="orderCustomerPointOfContact" />
                    <f:selectItem itemLabel="Customer" itemValue="customer" />
                    <f:selectItem itemLabel="All" itemValue="all" />
                </h:selectOneRadio>
                <h:outputText value="Point Of Contacts (select one)" />
            </h:panelGrid>
So i did the following (please stay with me on this, i'm providing this example to show that JavaScript should be able to solve your issue):
1. moved the code above outside of the p:dataTable, just above the p:dataTable
2. I researched/googled and researched/googled on how to make the selectOneRadio make an AJAX call to the bean onclick or onchange via f:ajax, valueChangeListener attribute of p:selectOneRadio (which is new component added to PrimeFaces 3.0, as you will see added to PrimeFaces Labs Showcase).
3. The above research ended up in no working solution for me.
4. So, I was reminded that I used Javascript (client-to-server example or use-case) on a different xhtml page (Payroll Browse/Report) and different requirement/use-case/hack, so I decided to include JavaScript in my solution for the selectOneRadio.
5. First, I had to use h:selectOneRadio instead of p:selectOneRadio, because p:selectOneRadio didn't have a documented onclick="..." (client callback)
6. Second, I decided to click an existing Filter p:commandButton, that already existed on the page, via onclick="..." of h:selectOneRadio, but it did NOT work, immediately/initially.
7. I had to look at the generated HTML source via Google Chrome's "inspect element" context/popup menu option, and I recognized that the Filter p:commandbutton had id = orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter. So, I had to make a code change as follows:
BEFORE

Code: Select all

onclick="document.getElementById('orderEditForm:btn_filter').click()"
AFTER replacing orderEditForm:btn_filter with orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter

Code: Select all

onclick="document.getElementById('orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter').click()"
8. Problem solved, and finally, I had a working solution: AJAX call to re-filter the data in p:dataTable after enduser clicks one of the radio button options. :)

Keep reading after code below, please.

pf_SelectOrderCustomerPointOfContact.xhtml (just sharing the entire xhtml source, if you're interested)

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    
    <ui:composition>
        
        <p:panel header="Select Point Of Contact">

            <h:panelGrid columns="2" cellspacing="2" cellpadding="2">
                <h:selectOneRadio value="#{pf_orderCustomerPointOfContactController.listToBrowse}"
                                  onclick="document.getElementById('orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter').click()">
                    <f:selectItem itemLabel="Ordered By" itemValue="orderCustomerPointOfContact" />
                    <f:selectItem itemLabel="Customer" itemValue="customer" />
                    <f:selectItem itemLabel="All" itemValue="all" />
                </h:selectOneRadio>
                <h:outputText value="Point Of Contacts (select one)" />
            </h:panelGrid>
            <p:dataTable id="dt_selectOrderCustomerPointOfContact" var="selectOrderCustomerPOC" value="#{pf_orderCustomerPointOfContactController.lazyModel}" 
                        paginator="true" paginatorAlwaysVisible="false" rows="10" rowsPerPageTemplate="10,25,50,100,500,1000"
                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        selection="#{pf_orderCustomerPointOfContactController.selectedRow}">

                <p:ajax event="page" update=":@this :@form:_ajax_status"/>
                    
                <f:facet name="header">
                    <h:panelGrid columns="1" cellpadding="1" cellspacing="1" width="100%">
                        <h:panelGroup>
                            <p:commandButton value="Cancel" icon="ui-icon ui-icon-arrowthick-1-w"
                                             update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu"
                                             actionListener="#{pf_orderCustomerPointOfContactController.cancelSelectPointOfContactForOrder()}"/>
                            <p:commandButton value="Select" icon="ui-icon-check"
                                             update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu"
                                             actionListener="#{pf_orderCustomerPointOfContactController.selectPointOfContact()}"/>
                            <p:commandButton id="btn_filter" value="Filter" icon="ui-icon-search"
                                             update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact"
                                             actionListener="#{pf_orderCustomerPointOfContactController.prepareSelectPointOfContactForOrder}"/>
                            <p:commandButton value="Clear Filter"
                                             update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact"
                                             actionListener="#{pf_orderCustomerPointOfContactController.clearFilter}"/>
                        </h:panelGroup>
                        <h:panelGroup>
                            <p:commandButton value="A" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('A')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="B" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('B')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="C" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('C')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="D" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('D')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="E" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('E')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="F" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('F')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="G" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('G')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="H" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('H')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="I" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('I')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="J" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('J')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="K" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('K')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="L" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('L')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="M" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('M')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="N" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('N')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="O" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('O')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="P" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('P')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="Q" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('Q')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="R" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('R')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="S" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('S')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="T" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('T')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="U" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('U')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="V" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('V')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="W" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('W')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="X" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('X')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="Y" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('Y')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="Z" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('Z')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                        </h:panelGroup>
                    </h:panelGrid>
                </f:facet>
                
                <p:column selectionMode="single" />

                <p:column>
                    <f:facet name="header">
                        <h:panelGrid columns="1">
                            <h:outputText value="Point Of Contact" />
                            <p:autoComplete id="autoComplete_ocPocId" value="#{pf_orderCustomerPointOfContactController.selectedPointOfContact}"
                                            completeMethod="#{pf_orderCustomerPointOfContactController.complete}"
                                            var="p" itemLabel="#{p.pointOfContactName}" itemValue="#{p}"
                                            queryDelay="3000" size="50"
                                            onblur="close()">
                                <p:ajax event="itemSelect" update=":orderEditForm:_ajax_status :orderEditForm:formMessages  dt_selectOrderCustomerPointOfContact"/>
                            </p:autoComplete>
                        </h:panelGrid>
                    </f:facet>
                    
                    <h:outputText escape="false" value="#{pf_ordersController.getPointOfContactSuggestionDisplay(selectOrderCustomerPOC)}"/>
                    
                </p:column>

                <f:facet name="footer">
                    <h:panelGrid columns="1" cellpadding="1" cellspacing="1" width="100%">
                        <h:panelGroup>
                            <p:commandButton value="A" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('A')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="B" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('B')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="C" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('C')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="D" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('D')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="E" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('E')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="F" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('F')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="G" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('G')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="H" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('H')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="I" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('I')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="J" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('J')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="K" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('K')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="L" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('L')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="M" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('M')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="N" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('N')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="O" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('O')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="P" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('P')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="Q" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('Q')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="R" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('R')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="S" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('S')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="T" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('T')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="U" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('U')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="V" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('V')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="W" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('W')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="X" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('X')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="Y" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('Y')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                            <p:commandButton value="Z" actionListener="#{pf_orderCustomerPointOfContactController.setFilterNameBeginWith('Z')}" update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact autoComplete_ocPocId"/>
                        </h:panelGroup>
                        <h:panelGroup>
                            <p:commandButton value="Cancel" icon="ui-icon ui-icon-arrowthick-1-w"
                                             update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu"
                                             actionListener="#{pf_orderCustomerPointOfContactController.cancelSelectPointOfContactForOrder()}"/>
                            <p:commandButton value="Select" icon="ui-icon-check"
                                             update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu"
                                             actionListener="#{pf_orderCustomerPointOfContactController.selectPointOfContact()}"/>
                            <p:commandButton value="Filter" icon="ui-icon-search"
                                             update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact"
                                             actionListener="#{pf_orderCustomerPointOfContactController.prepareSelectPointOfContactForOrder}"/>
                            <p:commandButton value="Clear Filter"
                                             update=":orderEditForm:_ajax_status :orderEditForm:formMessages :orderEditForm:panelBelowEditMenu dt_selectOrderCustomerPointOfContact"
                                             actionListener="#{pf_orderCustomerPointOfContactController.clearFilter}"/>
                        </h:panelGroup>
                    </h:panelGrid>
                </f:facet>

            </p:dataTable>

        </p:panel>

    </ui:composition>

</html>
Please take note to the Javascript solution that I shared above and the following p:commandButton ID, which was in the p:dataTable f:facet name="header" (p:dataTable header). It belongs to the dataTable header, so when referencing it via JavaScript or a simple p:ajax update="...", you may need to reference it as part of the p:dataTable or via @this.

orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter

If the solution is not via update="...", then please try BalusC's Javascript (server-to-client) or one of my JavaScript solutions above to see if you can set the menuitem txt via JavaScript. Since test1 and test2 worked fine (outside of p:dataTable), then I would recommend that you do the following:

1. h:inputHidden id="test1" value="{bean.menuItemValue}" (which will ALWAYS have the menuItem text value AFTER onPage, if you like)
2. JavaScript onload = function that will use get

Code: Select all

document.getElementById('mainForm:serviceTypes:test4:menuItem_ID').value = document.getElementById('mainForm:test1').value
3. Confirm the above DOM element references in your generated HTML page source
4. You can even add some condition in onload JavaScript function, if {bean.onPageExecuted}, then execute code in # 2 above, if necessary; may not be necessary though.

Looking forward to your response.
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

Cool Mr Ice
Posts: 46
Joined: 17 Sep 2011, 11:53

20 Dec 2011, 05:05

smithh032772 wrote:
Cool Mr Ice wrote:If you agree that there is still a bug specifically in the updating of the header facet of the dataTable, do you think I should create another issue for this?
To answer your question above, please see/read the following:

Cagatay/Optimus-Prime's response (please note the part about buying support)
viewtopic.php?f=3&t=16865&start=10#p51598

Issue created as per the above forum conversation (before Cagatay's response)
http://code.google.com/p/primefaces/iss ... il?id=3064
I went ahead and created an issue on the off chance that it will be fixed (don't know till you try).
http://code.google.com/p/primefaces/iss ... il?id=3127

I can visualize instances where paying for support would be an option and warranted. It is just not an option at this time, specifically paying for support on what appears to be a defect in the product. Not using Primefaces, however, is still an option at this point in the development cycle. It is not a desired option, but an option, nonetheless.
smithh032772 wrote: Okay, back to hacking a solution. :)
You gave me a great deal to work with, and I am still trying your suggestions. Fingers are crossed. The results will be posted asap.
PrimeFaces 3.5
JSF 2.1
Mojarra 2.1.3
Glassfish 3.1.1
Netbeans 7.0.1
JDK 7
JEE 6

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

20 Dec 2011, 06:30

I clicked the Star on the issue you created, so I casted my vote to have that fixed, and so I will be in-the-loop about updates/responses related to that issue.

Understood. I hope you all continue to use PrimeFaces. :)
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

Cool Mr Ice
Posts: 46
Joined: 17 Sep 2011, 11:53

20 Dec 2011, 11:26

smithh032772 wrote:Per your last post and test case/results, I think it's time to use JavaScript to resolve this issue. I've had to do the same even just yesterday (last night or earlier this morning, forgot exactly the time I had to code that...smile). Please read the following blog, and do something similar; i did the other-way-around (client-to-server maybe 1 or 2 days/nights ago), which is also documented in this blog.

BalusC's blog: Pass variables from server side to client side

I really don't like the behavior I've been experiencing recently in p:dataTable f:facet name="header" (header of the dataTable). I tried to add the following in dataTable header or a p:column f:facet name="header" (datatable column header), and it did not render well at all.

Code: Select all

            <h:panelGrid columns="2" cellspacing="2" cellpadding="2">
                <h:selectOneRadio value="#{pf_orderCustomerPointOfContactController.listToBrowse}"
                                  onclick="document.getElementById('orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter').click()">
                    <f:selectItem itemLabel="Ordered By" itemValue="orderCustomerPointOfContact" />
                    <f:selectItem itemLabel="Customer" itemValue="customer" />
                    <f:selectItem itemLabel="All" itemValue="all" />
                </h:selectOneRadio>
                <h:outputText value="Point Of Contacts (select one)" />
            </h:panelGrid>
Just a side note, the built in filter fields in the header ended up not being flexible enough for me. For example, every one of my dataTables have date columns. It is not practical for a user to filter by one date (not that that is even an option with built in filtering). What they need is a date range - two p:calendar's, a "from date" and a "to date". It seems like you struggle with the same issues as you are attempting to place a selectOneRadio into a column header facet. The road I am heading down thus far - and may yet back out - is placing a p:accordionPanel in to the column header facet as such...

Code: Select all

<f:facet name="header">
    <h:outputText value="Column Title"/>
    <br/>
    <p:accordionPanel activeIndex="1">
        <p:tab title="Filter" titleStyle="text-align: left; font-size: x-small;" >
            <h:panelGrid columns="3">
                ...
                <p:inputText id="justAnExample"/>
                ...
            </h:panelGrid>
        </p:tab>
    </p:accordionPanel>
</f:facet>
Just with my limited experimentation, it seems that the accordionPanel, when closed conforms to the width of the column. When opened it expands to the size needed. My idea is that when the user wants to change the column's filter, they can click on the (only) tab in the accordionPanel, it will open displaying the necessary input field(s), they fill in those input fields and hit a button (maybe inside the accordionPanel), the dataTable is filtered based on the new filter (plus previously selected filters), the accordionPanel's tab is automatically closed, and the tab's title will be changed to read "Filter='filter criteria" (for example "Filter = 01/01/2011 - 01/31/2011" or "Filter = True", etc.). This is just a little something that I have been toying with, but is not proven and not yet a priority. -just thought I would share.

Continuing...
smithh032772 wrote:So i did the following (please stay with me on this, i'm providing this example to show that JavaScript should be able to solve your issue):
1. moved the code above outside of the p:dataTable, just above the p:dataTable
2. I researched/googled and researched/googled on how to make the selectOneRadio make an AJAX call to the bean onclick or onchange via f:ajax, valueChangeListener attribute of p:selectOneRadio (which is new component added to PrimeFaces 3.0, as you will see added to PrimeFaces Labs Showcase).
3. The above research ended up in no working solution for me.
4. So, I was reminded that I used Javascript (client-to-server example or use-case) on a different xhtml page (Payroll Browse/Report) and different requirement/use-case/hack, so I decided to include JavaScript in my solution for the selectOneRadio.
5. First, I had to use h:selectOneRadio instead of p:selectOneRadio, because p:selectOneRadio didn't have a documented onclick="..." (client callback)
6. Second, I decided to click an existing Filter p:commandButton, that already existed on the page, via onclick="..." of h:selectOneRadio, but it did NOT work, immediately/initially.
7. I had to look at the generated HTML source via Google Chrome's "inspect element" context/popup menu option, and I recognized that the Filter p:commandbutton had id = orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter. So, I had to make a code change as follows:
BEFORE

Code: Select all

onclick="document.getElementById('orderEditForm:btn_filter').click()"
AFTER replacing orderEditForm:btn_filter with orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter

Code: Select all

onclick="document.getElementById('orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter').click()"
8. Problem solved, and finally, I had a working solution: AJAX call to re-filter the data in p:dataTable after enduser clicks one of the radio button options. :)
...
Please take note to the Javascript solution that I shared above and the following p:commandButton ID, which was in the p:dataTable f:facet name="header" (p:dataTable header). It belongs to the dataTable header, so when referencing it via JavaScript or a simple p:ajax update="...", you may need to reference it as part of the p:dataTable or via @this.

orderEditForm:dt_selectOrderCustomerPointOfContact:btn_filter
Regarding the last statement above, I actually had already looked at the source for the page in hopes that maybe I was using the wrong ID in the update clause. The ID was always in the dataTableId:menuitemInHeaderID format. That was tried in the update and did not work.

But - after reading the above I thought it was pretty cool how you force the onclick callback of the commandButton whenever the user clicks on the selectOneRadio. So, just to see if it could work for the dataTable header facet, I added a p:commandButton to the top of the form.

Code: Select all

<p:commandButton id="refreshButton" value="Refresh" process="@this" update="serviceTypes:menuBarId"/>
Remember, serviceTypes is my dataTable and menuBarID is the menubar in the header facet of the dataTable. To activate the onclick callback I did the same thing you to your selectOneRadio onclick, except I did it in the oncomplete callback of the page event of the dataTable.

Code: Select all

<p:ajax event="page" listener="#{serviceTypesView.onPage}" update="@this" oncomplete="document.getElementById('refreshButton').click();"/>
And - it worked. After the user pages, if they hit the refreshButton, the serviceTypes:menuBarId is updated showing the correct value! This however left me with two issues: First, how to make this happen automatically; Second, there does not need to be a commandButton sitting on the page.

After much brainstorming and looking through the Javascript of the datatable in Primeface's source code (to see how the updates work), I looked at the source for my page again. The goal was to see how the p:commandButton forced the update of the menubar. In the page source for the commandButton there was this:

Code: Select all

<button id="refreshButton"
   ...
 onclick="PrimeFaces.ab({formId:'mainForm',source:'refreshButton',process:'refreshButton',update:'serviceTypes:menuBarId'});
   ...
</button>
So - I copied that part into the oncomplete callback of the dataTable's page event, made a few modifications and ran a test.

Code: Select all

<p:ajax event="page" listener="#{serviceTypesView.onPage}" update="@this" oncomplete="PrimeFaces.ab({formId:'mainForm', update:'serviceTypes'});"/>
It worked!!! :o Every time the user pages, the value(s) in the header facet of the dataTable are now updated to correspond to the newly selected row in the dataTable! I am not familiar with PrimeFaces.ab(), and am not sure if there are any side effects from using it this way. For now though, it is working as desired. It is also another trick to put in our back pockets.

smithh032772, I cannot thank you enough for helping me get over this hurdle. You have obviously spent a great deal of time and energy working with me. I would still be spinning my wheels without your help. Rest assured, your efforts are greatly appreciated!!!


Also, in a related story, the issue that was created in issue tracker, in my last post, was given a status of "WontFix" with a comment of "Not possible".
PrimeFaces 3.5
JSF 2.1
Mojarra 2.1.3
Glassfish 3.1.1
Netbeans 7.0.1
JDK 7
JEE 6

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

20 Dec 2011, 18:58

Cool Mr Ice wrote:It worked!!! :o Every time the user pages, the value(s) in the header facet of the dataTable are now updated to correspond to the newly selected row in the dataTable! I am not familiar with PrimeFaces.ab(), and am not sure if there are any side effects from using it this way. For now though, it is working as desired. It is also another trick to put in our back pockets.

smithh032772, I cannot thank you enough for helping me get over this hurdle. You have obviously spent a great deal of time and energy working with me. I would still be spinning my wheels without your help. Rest assured, your efforts are greatly appreciated!!!


Also, in a related story, the issue that was created in issue tracker, in my last post, was given a status of "WontFix" with a comment of "Not possible".
I'm glad it worked for you. PLEASE do NOT hardcode the primefaces.ab(). Please do the button.click() of your hidden p:commandButton like I did. p:commandbutton may do something different in new releases, but p:commandButton will ALWAYS offer AJAX support, so button.click() is most reliable.
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 12 guests