4 Replies Latest reply on May 3, 2007 12:00 PM by willy_makeit

    Rerender HTMLInputText in datatable (richfaces-art-datatable

    willy_makeit

      Hi all,
      (see http://jboss.com/index.html?module=bb&op=viewtopic&t=105668&postdays=0&postorder=asc&start=0 )

      Sergey, I have seen your example on richfaces-art-datatable on how to reRender a column in a datatable
      http://labs.jboss.com/wiki/RichFacesArticleDataTable

      I am working with Kristein and we are probably the reason why you created this example. I am able to get our code working, i.e. correctly reRendering a column in a dataTable, but only when reRendering an HTMLOutputText component like your example does.

      In our case we need to allow the user to enter either a ProposedPrice or a ProposedGrossMargin. Whenever the user enters a ProposedGrossMargin, the app should calculate a ProposedPrice based on that grossMargin and vice versa. Thus, both have to be HTMLInputText components.

      And therein lies our problem. If the user changes the ProposedPrice the ProposedGrossMargin doesn't get reRendered. Debugging the app shows that, indeed the DTOs are being updated correctly with the correct values, but the corresponding column is not reRendered.

      Can you expand your example to attempt to reRender an HTMLInputText?

      Here is a code snippet of the JSP:

       <rich:dataTable value="#{PriceModelHeaderBean.listDataModel}" var="item"
       first="#{PriceModelHeaderBean.currentRowIndex}"
       rows="#{PriceModelHeaderBean.rowsPerPage}"
       styleClass="partDataTable" rowClasses="rowLight, rowDark" headerClass="dataHeader"
       border="0" cellspacing="0">
      
      .
      .
      .
       <h:column>
       <f:facet name="header">
       <h:commandLink action="#{PriceModelHeaderBean.sort}"
       actionListener="#{PriceModelHeaderBean.bindSortColumn}"
       value="Proposed Price" immediate="false">
       <f:attribute name="sortColumn" value="dto.proposedPrice"/>
       </h:commandLink>
       </f:facet>
       <a4j:outputPanel>
       <h:inputText id="price" binding="#{PriceModelHeaderBean.proposedPriceRef}" value="#{item.dto.proposedPrice}">
       <a4j:support immediate="true" action="#{PriceModelHeaderBean.changePrice}" event="onchange" reRender="grossMargin"/>
       </h:inputText>
       <h:message for="price" />
       </a4j:outputPanel>
       </h:column>
      
       <h:column>
       <f:facet name="header">
       <h:commandLink action="#{PriceModelHeaderBean.sort}"
       actionListener="#{PriceModelHeaderBean.bindSortColumn}"
       value="Proposed GM%" immediate="false">
       <f:attribute name="sortColumn" value="dto.proposedGrossMargin"/>
       </h:commandLink>
       </f:facet>
       <a4j:outputPanel>
       <h:inputText id="grossMargin" binding="#{PriceModelHeaderBean.proposedGMRef}" value="#{item.dto.proposedGrossMargin}" >
       <a4j:support immediate="true" action="#{PriceModelHeaderBean.changeGrossMargin}" event="onchange" reRender="price"/>
       </h:inputText>
       <h:message for="grossMargin" />
       </a4j:outputPanel>
       </h:column>
      .
      .
      .
       </rich:dataTable>
      .
      .
      .
       <a4j:outputPanel id="err" ajaxRendered="true">
       <h:messages />
       </a4j:outputPanel>
      


      Thanks for your help!
      Willy_Makeit


        • 1. Re: Rerender HTMLInputText in datatable (richfaces-art-datat
          ilya_shaikovsky

          Could you please check with a4j:log what problems appears on client while reRendering..?

          • 2. Re: Rerender HTMLInputText in datatable (richfaces-art-datat
            willy_makeit

            Wow. Didn't know about <a4j:log/> (still very new to Ajax)

            Here's the log (sorry it's so wide):

            debug[10:44:03,406]: Have Event [object Object] with properties: target: [object HTMLInputElement], srcElement: undefined, type: change
            debug[10:44:03,406]: NEW AJAX REQUEST !!! with form :main
            debug[10:44:03,421]: parameter main:_id32:1:_id86 with value main:_id32:1:_id86
            debug[10:44:03,421]: Start XmlHttpRequest
            debug[10:44:03,421]: Reqest state : 1
            debug[10:44:03,421]: QueryString: AJAXREQUEST=_viewRoot&main%3A_id32%3A_id42=50
            &main%3A_id32%3A0%3Aprice=9.11
            &main%3A_id32%3A0%3AgrossMargin=-100.00&main
            %3A_id32%3A1%3Aprice=0.21&main%3A_id32%3A1
            %3AgrossMargin=45.33&main%3A_id32%3A2%3Aprice=84.95
            &main%3A_id32%3A2%3AgrossMargin=-99.96&main
            %3A_id32%3A3%3Aprice=4.63&main%3A_id32
            %3A3%3AgrossMargin=-99.78&main=main&main
            %3A_idcl=&main%3A_id32%3A1%3A_id86=main%3A_id32
            %3A1%3A_id86&
            debug[10:44:03,421]: Reqest state : 1
            debug[10:44:03,765]: Reqest state : 2
            debug[10:44:03,765]: Reqest state : 3
            debug[10:44:03,765]: Reqest state : 4
            debug[10:44:03,765]: Reqest end with state 4
            debug[10:44:03,765]: Response with content-type: text/xml;charset=UTF-8
            debug[10:44:03,765]: Full response content: <?xml version="1.0"?>
             <html xmlns="http://www.w3.org/1999/xhtml"><head>
            <link type="text/css" rel="stylesheet" href=
            "/pricemodeling/a4j.res/org/richfaces/renderkit/html/css/table.xcss/DATA/eAFbJaehBAADeAET.jsf" />
            <script type="text/javascript" src="/pricemodeling/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript.jsf">
            </script><meta http-equiv="Content-Type" content="text/html;
            charset=windows-1252" /><title>Price Modeling - Price Model
            Header</title><link rel="StyleSheet" type="text/css" href="../style.css"
            /></head><body><table cellspacing="0" cellpadding="0" border="0"
            bgcolor="#007AAD"><tbody><tr align="left" valign="middle"><td
            align="left"><img src="/kolcStatic/Images/fadebg.jpg" height="50"
            border="0" alt="(Banner)" /></td></tr><tr><td colspan="3"><img
            src="/kolcStatic/Images/blackgray.gif" width="100%" height="4"
            border="0" /></td></tr></tbody></table><center></center><!--
            Spreadsheet panel --> <!-- Start Table headers / Left side paging controls
            --><!-- Start Table headers / Right side paging size
            --><!--onchange="this.form.submit();" -->
            <!-- Table Column defs, which include column header and sort indicator,
            then method for data fill --> <!-- TODO: Gotta add this to SpreadsheetDto
             --> <font class="alertText" size="1" face="Arial, Helvetica,
            sans-serif"><b>Built:</b> R1-b001 on 29 Dec, 2006 10:41am by
            TS</font> <span id="main:err"></span><meta name="Ajax-Update-Ids"
             content="main:err" /><span id="ajax-update-ids"><input type="hidden"
            name="jsf_sequence" value="1" /></span><meta id="Ajax-Response"
            name="Ajax-Response" content="true" /><!-- MYFACES JAVASCRIPT -->
             </body></html>
            
            debug[10:44:03,765]: Update page by list of rendered areas from response main:err
            debug[10:44:03,765]: search for elements by name 'script' in element #document
            debug[10:44:03,765]: getElementsByTagName found 1
            debug[10:44:03,765]: <script> in response with src=/pricemodeling/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript.jsf
            debug[10:44:03,765]: Such element exist in document
            debug[10:44:03,765]: search for elements by name 'link' in element #document
            debug[10:44:03,765]: getElementsByTagName found 2
            debug[10:44:03,781]: <link> in response with
            src=/pricemodeling/a4j.res/org/richfaces/renderkit/html/css/table.xcss/DATA/eAFbJaehBAADeAET.jsf
            debug[10:44:03,781]: Such element exist in document
            debug[10:44:03,781]: <link> in response with src=../style.css
            debug[10:44:03,781]: Such element exist in document
            debug[10:44:03,781]: Attempt to update part of page for Id: main:err
            debug[10:44:03,781]: call getElementById for id= main:err
            debug[10:44:03,781]: Replace content of node by replaceChild()
            debug[10:44:03,781]: search for elements by name 'script' in element span
            debug[10:44:03,781]: getElementsByTagName found 0
            debug[10:44:03,781]: Scripts in updated part count : 0
            debug[10:44:03,781]: Update part of page for Id: main:err successful
            debug[10:44:03,781]: call getElementById for id= ajax-update-ids
            debug[10:44:03,781]: Hidden JSF state fields: [object HTMLSpanElement]
            debug[10:44:03,781]: search for elements by name 'input' in element span
            debug[10:44:03,781]: getElementsByTagName found 1
            debug[10:44:03,781]: Replace value for inputs: 24 by new values: 1
            debug[10:44:03,781]: Input in response: jsf_sequence
            debug[10:44:03,796]: search for elements by name 'INPUT' in element span
            debug[10:44:03,796]: getElementsByTagName found 0
            debug[10:44:03,796]: Replace value for inputs: 24 by new values: 0
            


            • 3. Re: Rerender HTMLInputText in datatable (richfaces-art-datat

              Thank you Willy that you explained why you need two input fields calculated from each other.

              Having this combination (two input fields that cross updated via model) you will have a trouble even without Ajax and even without table at all. This is known JSF problem when the input field does not take the value from the model while the view is not changed.

              I see you use binding already. So, you can replace the value in the component tree directly rather than expect the value taken from model.

              • 4. Re: Rerender HTMLInputText in datatable (richfaces-art-datat
                willy_makeit

                Hmm... thanks, Sergey. I didn't know this was a known problem w/JSF. So, for clarification, are you saying that if I manually replace the value in the component (in my changePrice() action method) it will show up on the HTMLInputText field? Or is there really no way to force the Input field to reRender? Do I have to actually refresh the page (Ajax aside) in order to refresh the Input field value?