6 Replies Latest reply on Nov 19, 2008 11:40 AM by Ilya Shaikovsky

    Modal Panel not able to get the variable values from the cal

    E Aish Novice

      Hi,

      I have a web page which displays values selected from the database table in a scollable datatable format. On selection of the record from the scrollable datatable, I try to display the values in a modal panel.

      I am able to select the record from the scrollable datatable and a modal panel is displayed. But the modal panel is empty. It is not getting the record values selected from the scrollable data table.

      Can you please take a look at the code below and let me know where I am going wrong. My bean is defined as "session" scope.

      Thanks
      Aish


      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
      <%@ taglib uri="http://sourceforge.net/projects/jsf-comp" prefix="c"%>


      function AdminDataListRowClick()
      {
      var buttonObject= window.parent.document.getElementById("myForm:_id34:AdminSystems_cButton");
      buttonObject.click();

      }


      <h:outputText value="Admin Systems: " style="width:640px"
      styleClass="topicStyle" id="AdminSystemsData_oText1" />

      <a4j:outputPanel id="AdminSystems_oPanel">
      <rich:scrollableDataTable rowKeyVar="rkv" height="450px" width="400px"
      id="AdminSystemsData_sTable"
      value="#{AdminSourceSystemLoad.displayAdminSystemList}"
      var="adminSystems"
      selection="#{AdminSourceSystemLoad.scrollableAdminDataTableSelection}"
      binding="#{AdminSourceSystemLoad.sdAdminTable}"
      onRowClick="AdminDataListRowClick()" reRender="AdminSystems_oPanel">

      <rich:column id="AdminSystemsData_column1">
      <f:facet name="header" id="AdminSystemsData_facet1">
      <h:outputText value="Source Sys Code" id="AdminSystemsData_oText4" />
      </f:facet>
      <h:outputText value="#{adminSystems.srcSysCode}"
      id="AdminSystemsData_oText5" />
      </rich:column>

      <rich:column id="AdminSystemsData_column2" width="200">
      <f:facet name="header" id="AdminSystemsData_facet2">
      <h:outputText value="Source Sys Description"
      id="AdminSystemsData_oText6" />
      </f:facet>
      <h:outputText value="#{adminSystems.srcSysCodeDescription}"
      id="AdminSystemsData_oText7" />
      </rich:column>

      <rich:column id="AdminSystemsData_column3" width="200">
      <f:facet name="header" id="AdminSystemsData_facet3">
      <h:outputText value="Total Journal Lines"
      id="AdminSystemsData_oText8" />
      </f:facet>
      <h:outputText value="#{adminSystems.jrnl_total_lines}"
      id="AdminSystemsData_oText9" />
      </rich:column>

      </rich:scrollableDataTable>
      </a4j:outputPanel>

      <a4j:commandButton id="AdminSystems_cButton" value=""
      style="width:1px;height:1px;this.style.display='none'"
      action="#{AdminSourceSystemLoad.selectAdminSrcCodeJournals}"
      immediate="true" oncomplete="Richfaces.showModalPanel('panel'); " />

      <rich:modalPanel id="panel" width="740" height="300">

      <f:facet name="header">
      <h:panelGroup>
      <h:outputText value="Admin Graph"></h:outputText>
      </h:panelGroup>
      </f:facet>
      <f:facet name="controls">
      <h:panelGroup>
      <h:graphicImage value="/images/close.png" style="cursor:pointer" id="hidelink"/>
      <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
      </h:panelGroup>
      </f:facet>

      <a4j:include viewId="#{AdminSourceSystemLoad.page}"/>



      </rich:modalPanel>


      ===== the code in this program is as follows: {AdminSourceSystemLoad.page} ==

      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
      <%@ taglib uri="http://sourceforge.net/projects/jsf-comp" prefix="c"%>

      <h:panelGrid columns="6" style="width:740px" id="AdminSystems_pGrid1">
      <h:outputText value="Src Code: " styleClass="topicStyle"
      id="AdminSystems_oText3" />
      <h:outputText value="#{AdminSourceSystemLoad.selectedSrcSysCode}"
      styleClass="contentStyle" id="AdminSystems_oText4" />
      <h:outputText value="Src Code Desc : " styleClass="topicStyle"
      id="AdminSystems_oText5" />
      <h:outputText
      value="#{AdminSourceSystemLoad.selectedrcSysCodeDescription}"
      styleClass="contentStyle" id="AdminSystems_oText6" />
      <h:outputText value="Total Journal Lines : " styleClass="topicStyle"
      id="AdminSystems_oText7" />
      <h:outputText
      value="#{AdminSourceSystemLoad.selectedTotalJournalLines}"
      styleClass="contentStyle" id="AdminSystems_oText8" />
      </h:panelGrid>

        • 1. Re: Modal Panel not able to get the variable values from the
          Ilya Shaikovsky Master

          1) what this means for you? onRowClick="AdminDataListRowClick()"

          2) why your a4j command button immediate if it should submit selection?

          3) please check our livedemo sample code. it could be downloaded from our SVN https://anonsvn.jboss.org/repos/richfaces/trunk/samples/richfaces-demo

          • 2. Re: Modal Panel not able to get the variable values from the
            E Aish Novice

            Hi Ilya,

            Thanks for responding.

            As you have asked in your reply,
            onRowClick="AdminDataListRowClick()" in my code is a javascript function containing:

            function AdminDataListRowClick()
            {
            var buttonObject= window.parent.document.getElementById("myForm:_id34:AdminSystems_cButton");
            buttonObject.click();

            }



            function AdminDataListRowClick()
            {
            var buttonObject= window.parent.document.getElementById("myForm:_id34:AdminSystems_cButton");
            buttonObject.click();

            }


            Basically, when the user select a row of data in the scrollable datatabble and press enter , a command button is invoked which submits the data. Then, a modal panel should open up with the selected record. The problem I am having is that the modal panel is opened with empty values and not with the values selected in the datatable.

            2.. After looking at your post, I removed the immediate="true" and placed the following code (based on the sample code in the sampledemo that you have given)

            I am posting the entire code below (expcet the beans) for your reference . The modal panel is still not displaying the values in it. Can you please let me know what is missing.

            Thanks
            Aish


            function AdminDataListRowClick()
            {
            var buttonObject= window.parent.document.getElementById("myForm:_id34:AdminSystems_cButton");
            buttonObject.click();

            }


            <h:outputText value="Admin Systems: " style="width:640px"
            styleClass="topicStyle" id="AdminSystemsData_oText1" />

            <a4j:outputPanel id="AdminSystems_oPanel">
            <rich:scrollableDataTable rowKeyVar="rkv" height="450px" width="400px"
            id="AdminSystemsData_sTable"
            value="#{AdminSourceSystemLoad.displayAdminSystemList}"
            var="adminSystems"
            selection="#{AdminSourceSystemLoad.scrollableAdminDataTableSelection}"
            binding="#{AdminSourceSystemLoad.sdAdminTable}"
            onRowClick="AdminDataListRowClick()" reRender="AdminSystems_oPanel">

            <rich:column id="AdminSystemsData_column1">
            <f:facet name="header" id="AdminSystemsData_facet1">
            <h:outputText value="Source Sys Code" id="AdminSystemsData_oText4" />
            </f:facet>
            <h:outputText value="#{adminSystems.srcSysCode}"
            id="AdminSystemsData_oText5" />
            </rich:column>

            <rich:column id="AdminSystemsData_column2" width="200">
            <f:facet name="header" id="AdminSystemsData_facet2">
            <h:outputText value="Source Sys Description"
            id="AdminSystemsData_oText6" />
            </f:facet>
            <h:outputText value="#{adminSystems.srcSysCodeDescription}"
            id="AdminSystemsData_oText7" />
            </rich:column>

            <rich:column id="AdminSystemsData_column3" width="200">
            <f:facet name="header" id="AdminSystemsData_facet3">
            <h:outputText value="Total Journal Lines"
            id="AdminSystemsData_oText8" />
            </f:facet>
            <h:outputText value="#{adminSystems.jrnl_total_lines}"
            id="AdminSystemsData_oText9" />
            </rich:column>

            </rich:scrollableDataTable>
            </a4j:outputPanel>
            <a4j:commandButton id="AdminSystems_cButton" value=""
            style="width:1px;height:1px;this.style.display='none'"
            action="#{AdminSourceSystemLoad.selectAdminSrcCodeJournals}"
            oncomplete="Richfaces.showModalPanel('panel'); " />

            <rich:modalPanel id="panel" minHeight="200" minWidth="450"
            height="200" width="500" zindex="2000">

            <f:facet name="header">

            <h:outputText value="Admin Graph"></h:outputText>

            </f:facet>
            <f:facet name="controls">
            </f:facet>

            <h:panelGroup>
            <h:graphicImage value="/images/close.png" style="cursor:pointer" id="hidelink"/>
            <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
            </h:panelGroup>

            <a4j:include viewId="#{AdminSourceSystemLoad.page}"/>



            </rich:modalPanel>

            • 3. Re: Modal Panel not able to get the variable values from the
              E Aish Novice

              Hi Ilya,

              In continuation of my previous post, I would like to add the following code that is in program called by #{AdminSourceSystemLoad.page}. (In a4j:include)

              The thing I noticed is that {AdminSourceSystemLoad.selectedSrcSysCode}"
              , {AdminSourceSystemLoad.selectedrcSysCodeDescription}",
              {AdminSourceSystemLoad.selectedTotalJournalLines}"
              are not even getting called. Hence, their vaues are not displayed

              Please let me know what I need to include

              Thanks
              Aish
              The code is

              <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
              <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
              <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
              <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
              <%@ taglib uri="http://sourceforge.net/projects/jsf-comp" prefix="c"%>

              <h:panelGrid columns="6" style="width:740px" id="AdminSystems_pGrid1">
              <h:outputText value="Src Code: " styleClass="topicStyle"
              id="AdminSystems_oText3" />
              <h:outputText value="#{AdminSourceSystemLoad.selectedSrcSysCode}"
              styleClass="contentStyle" id="AdminSystems_oText4" />
              <h:outputText value="Src Code Desc : " styleClass="topicStyle"
              id="AdminSystems_oText5" />
              <h:outputText
              value="#{AdminSourceSystemLoad.selectedrcSysCodeDescription}"
              styleClass="contentStyle" id="AdminSystems_oText6" />
              <h:outputText value="Total Journal Lines : " styleClass="topicStyle"
              id="AdminSystems_oText7" />
              <h:outputText
              value="#{AdminSourceSystemLoad.selectedTotalJournalLines}"
              styleClass="contentStyle" id="AdminSystems_oText8" />
              </h:panelGrid>

              <c:chart id="AdminSystems_chart"
              datasource="#{LineCharts.adminProvider.categoryDataset}" type="line"
              is3d="true" title="Admin Systems" colors="magenta,#CACACA,blue"
              legend="false" background="#FFB6C1" xlabel="Period" ylabel="Date"
              height="420" width="740">
              </c:chart>

              • 4. Re: Modal Panel not able to get the variable values from the
                Ilya Shaikovsky Master

                you should also add reRender attribute to yur command button and insert comma separated id's of outputText components to be updated.

                • 5. Re: Modal Panel not able to get the variable values from the
                  E Aish Novice

                  Hi Ilya,

                  Thank you very much for responding. I tried adding the following code(reRender as you have suggested) to my commandButton :

                  I added the outputText Fields and the chart I am displaying and it worked fine. One thing I noticed is once in a while, the modal panel is displaying blank values or the previous record values. Apart from that, it works fine.

                  I can always count on you. Thank you very much for your excellent support.

                  Thanks
                  Aish

                  The code is ====

                  <a4j:commandButton id="AdminSystems_cButton" value=""
                  style="width:1px;height:1px;this.style.display='none'"
                  action="#{AdminSourceSystemLoad.selectAdminSrcCodeJournals}"
                  reRender="AdminSystems_oText4,AdminSystems_oText6,AdminSystems_oText8, AdminSystems_chart"
                  oncomplete="Richfaces.showModalPanel('panel')" />

                  • 6. Re: Modal Panel not able to get the variable values from the
                    Ilya Shaikovsky Master

                    replace onRowClick with onselectionchange event handler on your table. because scrollable table fires click before the selection change and this one after.

                    And b.t.w. instead of hidden commandButton you could use just jsFunction component. in this case you will not need in any your js to fire request.