10 Replies Latest reply on Oct 27, 2007 5:22 AM by dmitry.demyankov

    getting and submitting data in a form in modalPanel

    asookazian

      the following modalPanel code executes the getNoteText method in the SFSB when the .xhtml page is rendered. It does not get called when the modalPanel opens.

      I need a solution that will call the getter method when the modalPanel opens. There are multiple cells in the dataTable and the modalPanel needs to display different data in the inputText for each cell.

      Is this possible to achieve with JSF/richFaces? Do I have to embed another JSP/XHTML inside my XHTML to get this to work?

      <rich:modalPanel id="mp" minHeight="200" minWidth="450"
       height="200" width="500" zindex="2000">
       <f:facet name="header">
       <h:outputText value="#{noteAction.header}" />
       </f:facet>
       <f:facet name="controls">
       <h:graphicImage value="/img/icon_edit.gif" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" />
       </f:facet>
      
       <a4j:form id="a4jForm">
       <h:inputText id="noteText" value="#{noteAction.noteText}"/>
       <h:inputHidden id="rowIndex" value="noteAction.rowIndex"/>
       <h:inputHidden id="colName" value="noteAction.colName"/>
       <h:inputHidden id="siteId" value="noteAction.siteId"/>
       <h:inputHidden id="employeeNumber" value="noteAction.employeeNumber"/>
       <a4j:commandButton value="submit" action="#{noteAction.submit}" onclick="showNoteGraphic();Richfaces.hideModalPanel('mp')"/>
       </a4j:form>
      
       </rich:modalPanel>


        • 1. Re: getting and submitting data in a form in modalPanel
          ilya_shaikovsky

          you should call the modal panel from oncomplete attribute of some a4j:command* control. Also the control should update the panels content with reRender to update it before showing.

          • 2. Re: getting and submitting data in a form in modalPanel
            asookazian

            ok thx for reply. that makes sense to me.

            however, in this use case, the modalPanel is being opened when user clicks on radio button (selection 'no'). so i'm not sure I can use the reRender concept with <h:selectOneRadio> as it doesn't support this feature/attribute. And as far as I know, there is no a4j version of selectOneRadio component.

            Perhaps I can use an <a4j:support> tag to add reRender capability to the radio button...

            • 3. Re: getting and submitting data in a form in modalPanel
              dmitry.demyankov

               

              "asookazian" wrote:
              Perhaps I can use an <a4j:support> tag to add reRender capability to the radio button...


              Yep, I would suggest to use a4j:support

              • 4. Re: getting and submitting data in a form in modalPanel
                asookazian

                only problem here is that it should only trigger if they click 'no' on the radio button component. so it's not that straightforward... I'm not sure this will work for this use case...

                • 5. Re: getting and submitting data in a form in modalPanel
                  dmitry.demyankov

                  You could use javascript function to check whether to show modalPanel based on h:selectOneRadio

                  • 6. Re: getting and submitting data in a form in modalPanel
                    asookazian

                    i am doing that already. the a4j:support tag has an event attribute that in this case I guess would be 'onclick' for this radio button. but i only want the reRender to occur (and thus the getter method called) when they click 'no'. if they click yes, the reRender should not occur.

                    in this case it's not simply 'onclick', it's essentially 'on no click'. and there is no such thing for radio button yes/no click event.

                    how to solve this problem?

                    • 7. Re: getting and submitting data in a form in modalPanel
                      dmitry.demyankov

                      I meant to call javascript function when onclick event occurs and in that function decide whether you need to show modalPanel or not.

                      • 8. Re: getting and submitting data in a form in modalPanel
                        asookazian

                        javascript function:

                        function processNote(rButton, rowIndex, colName) {
                        
                         //if they clicked no, popup modal response window for note
                         if (rButton.value == 'false') {
                        
                         siteId = document.getElementById("mainForm:dataTable1:"+rowIndex+":siteId").value;
                         employeeNumber = document.getElementById("mainForm:dataTable1:"+rowIndex+":employeeNumber").value;
                        
                         Richfaces.showModalPanel('mp',{width:450, top:200, param1: rowIndex, param2: colName, param3: siteId, param4: employeeNumber});
                        
                         //set hidden variables in modalPanel form
                         document.getElementById("a4jForm:rowIndex").value = rowIndex;
                         document.getElementById("a4jForm:colName").value = colName;
                         document.getElementById("a4jForm:siteId").value = siteId;
                         document.getElementById("a4jForm:employeeNumber").value = employeeNumber;
                        
                         //AJAX js function...
                         getExistingNote(rowIndex, colName);
                        
                         }
                         }


                        radio button in xhtml:

                        <h:selectOneRadio id="accountApprovedRB" value="#{myRow[1].icomsAccountApproved}" onclick="checkForSubmit(#{myAuditList.getRowIndex()});processNote(this, #{myAuditList.getRowIndex()}, 'accountApproved')">
                         <f:selectItems value="#{securityAuditAction.securityAuditRadioButtons}" />
                         </h:selectOneRadio>


                        So you see, I'm already doing this. the problem has to do with a4j:support event='onclick' doesn't work with radio button. very simple.

                        • 9. Re: getting and submitting data in a form in modalPanel
                          dmitry.demyankov

                          I see,. I hope I'll have time tomorrow to try to implement such kind of functionality..

                          • 10. Re: getting and submitting data in a form in modalPanel
                            dmitry.demyankov

                            Maybe I misunderstand your case but onclick works fine with h:selectOneRadio in my case.. When I select 'no' the modalPanel is shown and hidden values are set..

                            h:selectOneRadio code:

                            <h:selectOneRadio id="selectBox" onclick="OnClickEvent(this)">
                             <f:selectItem itemValue="1" itemLabel="yes"/>
                             <f:selectItem itemValue="0" itemLabel="no"/>
                            </h:selectOneRadio>


                            JavaScript Code:
                            function OnClickEvent(sBox) {
                             if(sBox.value == "0") {
                             document.getElementById('a4j_form:hidden_field').value = 0;
                             document.getElementById('a4j_form:input_field').value = 0;
                             Richfaces.showModalPanel('mp',{width:450, top:200});
                             }
                            }


                            And modalPanel code is taken from the demo, only added the following code:
                            <a4j:form id="a4j_form">
                             <h:inputHidden value="1" id="hidden_field"/>
                             <h:inputText value="10" id="input_field"/>
                            </a4j:form>