<a4j:jsFunction> not working in <rich:popupPanel>

[sumitghosh945]

I have a <rich:popupPanel> within this I have used <h:selectOneMenu> which contains payment  mode option (Cash,Cheque,NEFT,RTGS),on selecting Cheque 3 extra input fields will appear in the form namely Cheque No,Drawn On, Drawn At.I have control the visibility of this 3 input fields through rendered property: something like this

<h:inputText  value="#{approveBillController.currentBill.chequeNo}" id="chqNo" rendered="#{approveBillController.chqNo_visibility}"/>

but on Selecting Cheque option the input fields are not rendering,I have to press F5 button from keyboard inorder to refresh the page then only it is getting rendered.Well,There is no issue in the backing bean code,"chqNo_visibility" is a boolean variable of  approveBillController bean.I have checked their value they are getting set (true or false as per condition defined by me).I'm posting the <a4j:jsFunction>  code below:

<rich:popupPanel id="paymentModalBox" width="712" height="720" resizeable="false" autosized="true">
    <h:form id="modalFrm">
        <a4j:region>
            <h:outputText value="Payment Mode"/>
            <h:selectOneMenu style="width:128px;margin-right:1%" id="payMdId"
                             value="#{approveBillController.currentBill.payMode}"
                             onchange="showPaymentDetails(this.value)">
                <f:selectItem itemValue="" itemLabel="Select Mode of Payment"/>
                <f:selectItems value="#{approveBillController.payModes}"/>
            </h:selectOneMenu>




            <a4j:jsFunction name="showPaymentDetails" actionListener="#{approveBillController.evaluatePayMode}"
                            render="pay_group,chq_header,chqNo,drawn_on_header,drawnOnId,drawn_at_header,drawnAtId">
                <a4j:param name="paymode"/>
            </a4j:jsFunction>

can anyone help????????????????????

[michpetrov]

The problem is not the jsFunction. The onchange of the selectOneMenu fires when the component loses focus not when you select a different value. You can just use a4j:ajax for what you want to do.

<h:selectOneMenu style="width:128px;margin-right:1%" id="payMdId" value="#{approveBillController.currentBill.payMode}">
    <a4j:ajax event="click" execute="@this" listener="#{approveBillController.evaluatePayMode}" />
    <f:selectItem itemValue="" itemLabel="Select Mode of Payment"/>
    <f:selectItems value="#{approveBillController.payModes}"/>
</h:selectOneMenu>

[sumitghosh945]

no its not working facing same problem.I have already mentioned that method is getting invoked and also no issue with the code,only problem is refreshing the page.I mean the so called reRender attribute(now known as render attribute) not working properly or some modification needs to be done in my code for refreshing the page.I am only seeking suggestion on that.

[sumitghosh945]

no its not working.

[michpetrov]

If you're calling the render on the input fields wrap them in a <a4j:outputPanel> and rerender that panel. Rerendering components directly doesn't usually work.

[sumitghosh945]

it is already surrounded in <a4j:region>

[michpetrov]

Are you rerendering the region? It might be easier if you post the complete code, otherwise I'll only be guessing.

[bleathem]

Yes, please post the complete code.  It sounds like it might be an issue of trying to perform an ajax render across forms, but without seeing the entire facelet snippet it's hard to know for sure.  Even better: post a simplified version of your facelet that replicates the problem (so we can more quickly focus in on the potential problem.

[sumitghosh945]

ok.I'm posting the xhtml code below::

<rich:popupPanel id="paymentModalBox" width="712" height="680" resizeable="false" autosized="true">

                                    <f:facet name="header">

                                        <h:panelGroup>

                                            <h:outputText value="Payment Management->#{approveBillController.currentBill.billID}"></h:outputText>

                                        </h:panelGroup>

                                    </f:facet>

                                        <h:form id="modalFrm">

                                        <a4j:region id="payRegion">

                                <h:panelGrid columns="4" cellspacing="20" styleClass="first_table">

                              .................................

                             ..................................   <!-- other component here-->

                           <h:outputText value="Payment Mode"/>

                            <h:selectOneMenu style="width:128px;margin-right:1%" id="payMdId" value="#{approveBillController.currentBill.payMode}"            onchange="showPaymentDetails(this.value)">

                                            <f:selectItem itemValue="" itemLabel="Select Mode of Payment"/>

                                            <f:selectItems value="#{approveBillController.payModes}"/>

                            </h:selectOneMenu>

<a4j:jsFunction name="showPaymentDetails" actionListener="#{approveBillController.evaluatePayMode}"

                                             render="payRegion,pay_group,chq_header,chqNo,drawn_on_header,drawnOnId,drawn_at_header,drawnAtId">

                                              <a4j:param name="paymode"/>

                                            </a4j:jsFunction>

   </h:panelGrid>

<h:panelGrid styleClass="second_table" columns="2" id="pay_group" cellspacing="20" rendered="#{approveBillController.pay_group_visibility}" >

                                          <h:outputText style="" value="Cheque No*" id="chq_header" rendered="#{approveBillController.chqNo_header_visibility}"/>

                                          <h:inputText style="" value="#{approveBillController.currentBill.chequeNo}" id="chqNo" rendered="#{approveBillController.chqNo_visibility}" styleClass="adjust_chqNo_#{approveBillController.currentBill.payMode}"/>

                                          <h:outputText value="Drawn On*" id="drawn_on_header" rendered="#{approveBillController.drawnOn_header_visibility}"/>

                                          <rich:calendar value="#{approveBillController.currentBill.drawnOn}" id="drawnOnId" rendered="#{approveBillController.drawnOn_visibility}" inputSize="16" styleClass="adjust_drawnOn_#{approveBillController.currentBill.payMode}">

                                          </rich:calendar>

                                          <h:outputText value="Drawn At*" id="drawn_at_header" rendered="#{approveBillController.drawnAt_header_visibility}"/>

                                           <h:inputText value="#{approveBillController.currentBill.drawnAt}" id="drawnAtId" rendered="#{approveBillController.drawnAt_visibility}" styleClass="adjust_drawnAt_#{approveBillController.currentBill.payMode}"/>

   </h:panelGrid>

after pressing F5 the 3 extra fields will appear but they should appear as soon as I select 'Cheque' option.

[michpetrov]

You did not implement the changes I suggested:

<rich:popupPanel id="paymentModalBox" width="712" height="680" resizeable="false" autosized="true">
    <f:facet name="header">
        <h:panelGroup>
            <h:outputText value="Payment Management->#{approveBillController.currentBill.billID}"></h:outputText>
        </h:panelGroup>
    </f:facet>

            <h:form id="modalFrm">
                <a4j:region id="payRegion">
                    <h:panelGrid columns="4" cellspacing="20" styleClass="first_table">
                        <h:outputText value="Payment Mode" />
                        <h:selectOneMenu style="width:128px;margin-right:1%" id="payMdId" value="#{approveBillController.currentBill.payMode}">
                            <a4j:ajax event="click" listener="#{approveBillController.evaluatePayMode}" execute="@this" render="pay_panel"/>
                            <f:selectItem itemValue="" itemLabel="Select Mode of Payment" />
                            <f:selectItems value="#{approveBillController.payModes}" />
                        </h:selectOneMenu>
                    </h:panelGrid>

                    <a4j:outputPanel id="pay_panel">
                        <h:panelGrid styleClass="second_table" columns="2" id="pay_group" cellspacing="20" rendered="#{approveBillController.pay_group_visibility}" >
                            <h:outputText style="" value="Cheque No*" id="chq_header" rendered="#{approveBillController.chqNo_header_visibility}"/>
                            <h:inputText style="" value="#{approveBillController.currentBill.chequeNo}" id="chqNo" rendered="#{approveBillController.chqNo_visibility}" styleClass="adjust_chqNo_#{approveBillController.currentBill.payMode}"/>
                                         
                            <h:outputText value="Drawn On*" id="drawn_on_header" rendered="#{approveBillController.drawnOn_header_visibility}"/>
                            <rich:calendar value="#{approveBillController.currentBill.drawnOn}" id="drawnOnId" rendered="#{approveBillController.drawnOn_visibility}" inputSize="16" styleClass="adjust_drawnOn_#{approveBillController.currentBill.payMode}">
                            </rich:calendar>
                                         
                            <h:outputText value="Drawn At*" id="drawn_at_header" rendered="#{approveBillController.drawnAt_header_visibility}"/>
                            <h:inputText value="#{approveBillController.currentBill.drawnAt}" id="drawnAtId" rendered="#{approveBillController.drawnAt_visibility}" styleClass="adjust_drawnAt_#{approveBillController.currentBill.payMode}"/>
                                          
                        </h:panelGrid>
                    </a4j:outputPanel>
                </a4j:region>
            </h:form>
        </rich:popupPanel>

The main issue is that the panelGrid#pay_group is not rendered at the start (rendered="false" means the element does not exist, not that it is hidden), when it's not rendered, it cannot be re-rendered.

[sumitghosh945]

no,"panelGrid#pay_group" cannot be rendered at the begining,this table or I should say the <h:panelGrid> will be rendered conditionally.Initially the condition will be false,upon selecting the 'Cheque' option it will be rendered. And one more thing I have tried with your suggestion of <a4j:ajax> but  it didn't work.I want to ask you one thing regarding this :: why are you using <a4j:ajax event="click"> it should be <a4j:ajax event="change"> because with <h:selectOneMenu> we use "change" event not "click" event.

[michpetrov]

no,"panelGrid#pay_group" cannot be rendered at the begining

And that's ok but you cannot rerender components that are not rendered. You need to put them in something that is rendered from the start.

And one more thing I have tried with your suggestion of <a4j:ajax> but  it didn't work.

Maybe it's taking too long to set up the visibility flags. You can try using your jsFunction and calling it when the ajax completes - <a4j:ajax … oncomplete="showPaymentDetails()" />

why are you using <a4j:ajax event="click"> it should be <a4j:ajax event="change"> because with <h:selectOneMenu> we use "change" event not "click" event.

As I've said before onchange fires when the select loses focus and the value has changed, not when you change the value. Onclick fires every time the select is clicked (which is usually when the value is changed).

[sumitghosh945]

thanks a lot.It got solved.thanks for your co-operation.

[sumitghosh945]

the problem again came around in IE8.In all other browser it got solved but again in IE8 refreshing is not working.The issue is same as previously I have posted the screenshot of my page so you can refer to that.I have wrapped the <h:panelGrid> within <a4j:outputPanel id="mypanel"> and used this id  "mypanel"  in the render attribute of <a4j:jsFunction> its working nicely in all other browser but in IE8 i need to refresh the page explicitly or I had to click anywhere in the form then only I'm getting the output.so,can you give me any solution for IE8.it's very very urgent.