3 Replies Latest reply on Feb 11, 2009 1:24 PM by Hugo Wurzelbutz

    Rerender component after change of calendar element

    Hugo Wurzelbutz Newbie

      Hello

      In my code i want to render a input field only when a date has been set. but that doesn't work ;)

      here is my xhtml code:

      <h:form id="zeiten">
      <h:panelGrid id="panel" columns="2" >
       <a4j:outputPanel id="calendar" layout="block">
      
       <rich:calendar id="enddatum" value="#{test.date}" popup="true" locale="de/DE" datePattern="dd.MM.yyyy"
       showApplyButton="false" cellWidth="24px" cellHeight="22px" style="width:200px" required="false">
       <a4j:support event="onchanged" reRender="inputStart,inputEnde,testdate" action="#{taskAction.setDate('date')}" ajaxSingle="false"/>
       </rich:calendar>
       </a4j:outputPanel>
       </h:panelGrid>
       <h:outputText value="#{test.date}" id="testdate"/>
       <h:inputText value="#{test.start}" rendered="#{!empty test.date}" id="inputStart">
       <a4j:support event="onkeyup" reRender="dauer" action="#{taskAction.duration}"/>
       </h:inputText>
      </:h:form>

      After changing the date, the action from the support tag gets called (there i just set the selected date to an other property). the output field with id "testdate" is rerendered and displayed correctly but the input field with id "inputStart" is not displayed.

      i tried changing the event to ondateselected, onclick, onblur, onchanged but that makes no difference.

      i added a a4j:log which gives me following output:
      debug[20:04:28,562]: Have Event [object Object] with properties: target: [object HTMLTableCellElement], srcElement: [object HTMLTableCellElement], type: click
      debug[20:04:28,562]: Query preparation for form 'zeiten' requested
      debug[20:04:28,562]: Append hidden control zeiten with value [zeiten] and value attribute [zeiten]
      debug[20:04:28,562]: Append text control zeiten:enddatumInputDate with value [12.02.2009] and value attribute [null]
      debug[20:04:28,562]: Append hidden control zeiten:enddatumInputCurrentDate with value [02/2009] and value attribute [02/2009]
      debug[20:04:28,562]: Append text control zeiten:j_id27 with value [] and value attribute []
      debug[20:04:28,562]: Append text control zeiten:kontaktID with value [] and value attribute [null]
      debug[20:04:28,562]: Append hidden control javax.faces.ViewState with value [j_id23] and value attribute [j_id23]
      debug[20:04:28,562]: parameter zeiten:j_id14 with value zeiten:j_id14
      debug[20:04:28,562]: Look up queue with default name
      debug[20:04:28,562]: NEW AJAX REQUEST !!! with form: zeiten
      debug[20:04:28,562]: Start XmlHttpRequest
      debug[20:04:28,562]: Reqest state : 1
      debug[20:04:28,562]: QueryString: AJAXREQUEST=_viewRoot&zeiten=zeiten&zeiten%3AenddatumInputDate=12.02.2009&zeiten%3AenddatumInputCurrentDate=02%2F2009&zeiten%3Aj_id27=&zeiten%3AkontaktID=&javax.faces.ViewState=j_id23&zeiten%3Aj_id14=zeiten%3Aj_id14&
      debug[20:04:28,562]: Reqest state : 2
      debug[20:04:28,687]: Reqest state : 3
      debug[20:04:28,687]: Reqest state : 4
      debug[20:04:28,687]: Reqest end with state 4
      debug[20:04:28,687]: Response with content-type: text/xml;charset=UTF-8
      debug[20:04:28,687]: Full response content: <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><link class="component" href="/ProjectTicket/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__" rel="stylesheet" type="text/css" /><link class="component" href="/ProjectTicket/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__" media="rich-extended-skinning" rel="stylesheet" type="text/css" /><script src="/ProjectTicket/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.PrototypeScript" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.AjaxScript" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/events.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/utils.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/json/json-dom.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/scriptaculous/effects.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/jquery/jquery.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/JQuerySpinBtn.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/calendar.js" type="text/javascript"> </script><link class="component" href="/ProjectTicket/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/calendar.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__" rel="stylesheet" type="text/css" /><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/skinning.js" type="text/javascript"> </script></head><body><span id="zeiten:testdate">Tue Feb 10 20:04:28 CET 2009</span><span id="zeiten:inputStart" onkeyup="A4J.AJAX.Submit('_viewRoot','zeiten',event,{'similarityGroupingId':'zeiten:j_id15','parameters':{'zeiten:j_id15':'zeiten:j_id15'} ,'actionUrl':'/ProjectTicket/task.seam'} )"></span><input id="zeiten:inputEnde" type="text" name="zeiten:inputEnde" onkeyup="A4J.AJAX.Submit('_viewRoot','zeiten',event,{'similarityGroupingId':'zeiten:j_id23','parameters':{'zeiten:j_id23':'zeiten:j_id23'} ,'actionUrl':'/ProjectTicket/task.seam'} )" /><meta name="Ajax-Update-Ids" content="zeiten:testdate,zeiten:inputStart,zeiten:inputEnde" /><span id="ajax-view-state"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id23" /></span><meta id="Ajax-Response" name="Ajax-Response" content="true" /></body></html>
      debug[20:04:28,687]: Header Ajax-Expired not found, search in <meta>
      debug[20:04:28,687]: search for elements by name 'meta' in element #document
      debug[20:04:28,687]: Find <meta name='Ajax-Update-Ids' content='zeiten:testdate,zeiten:inputStart,zeiten:inputEnde'>
      debug[20:04:28,687]: Find <meta name='Ajax-Response' content='true'>
      debug[20:04:28,687]: Header Ajax-Update-Ids not found, search in <meta>
      debug[20:04:28,687]: search for elements by name 'meta' in element #document
      debug[20:04:28,703]: Find <meta name='Ajax-Update-Ids' content='zeiten:testdate,zeiten:inputStart,zeiten:inputEnde'>
      debug[20:04:28,703]: Update page by list of rendered areas from response zeiten:testdate,zeiten:inputStart,zeiten:inputEnde
      debug[20:04:28,703]: search for elements by name 'script' in element #document
      debug[20:04:28,703]: <script> in response with src=/ProjectTicket/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.PrototypeScript
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <script> in response with src=/ProjectTicket/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.AjaxScript
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <script> in response with src=/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/events.js
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <script> in response with src=/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/utils.js
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <script> in response with src=/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/json/json-dom.js
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <script> in response with src=/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/scriptaculous/effects.js
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <script> in response with src=/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/jquery/jquery.js
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <script> in response with src=/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/JQuerySpinBtn.js
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <script> in response with src=/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/calendar.js
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <script> in response with src=/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/skinning.js
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: search for elements by name 'link' in element #document
      debug[20:04:28,703]: <link> in response with src=/ProjectTicket/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <link> in response with src=/ProjectTicket/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: <link> in response with src=/ProjectTicket/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/calendar.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__
      debug[20:04:28,703]: Such element exist in document
      debug[20:04:28,703]: call getElementById for id= org.ajax4jsf.queue_script
      debug[20:04:28,703]: Update page part from call parameter for ID zeiten:testdate
      debug[20:04:28,703]: call getElementById for id= zeiten:testdate
      debug[20:04:28,703]: Replace content of node by replaceChild()
      debug[20:04:28,703]: Update part of page for Id: zeiten:testdate successful
      debug[20:04:28,703]: Update page part from call parameter for ID zeiten:inputStart
      debug[20:04:28,703]: call getElementById for id= zeiten:inputStart
      warn[20:04:28,703]: Node for replace by response with id zeiten:inputStart not found in document
      debug[20:04:28,703]: Update page part from call parameter for ID zeiten:inputEnde
      debug[20:04:28,703]: call getElementById for id= zeiten:inputEnde
      warn[20:04:28,703]: Node for replace by response with id zeiten:inputEnde not found in document
      debug[20:04:28,703]: call getElementById for id= org.ajax4jsf.oncomplete
      debug[20:04:28,703]: Processing updates finished, no oncomplete function to call
      debug[20:04:28,703]: call getElementById for id= ajax-view-state
      debug[20:04:28,703]: Hidden JSF state fields: [object HTMLElement]
      debug[20:04:28,703]: Namespace for hidden view-state input fields is undefined
      debug[20:04:28,703]: search for elements by name 'input' in element span
      debug[20:04:28,703]: Replace value for inputs: 19 by new values: 1
      debug[20:04:28,703]: Input in response: javax.faces.ViewState
      debug[20:04:28,703]: Found same input on page with type: hidden
      debug[20:04:28,703]: Found same input on page with type: hidden
      debug[20:04:28,703]: Found same input on page with type: hidden
      debug[20:04:28,703]: Found same input on page with type: hidden
      debug[20:04:28,703]: search for elements by name 'INPUT' in element span
      debug[20:04:28,703]: Replace value for inputs: 19 by new values: 0
      debug[20:04:28,703]: call getElementById for id= _A4J.AJAX.focus
      debug[20:04:28,703]: No focus information in response


      i can see an error here
      warn[20:04:28,703]: Node for replace by response with id zeiten:inputStart not found in document


      but i don't know why this error occurs.

      I hove you've got a clue what is going wrong.

      br hugo

        • 1. Re: Rerender component after change of calendar element
          Hugo Wurzelbutz Newbie

          i forgot to mention that i'm using seam 2.1.1 GA and RichFaces 3.3.0 GA.

          • 2. Re: Rerender component after change of calendar element
            Ilya Shaikovsky Master

            most frequently asked one..

            1) you could not reRender partially rendered components. Only their parents. Use outputPanel inside.

            2) if you want to reRender some input and set the date to this input in action - the component which submits the form should not process this input (be ajaxSingle=true)

            3) b.t.w the bean which keeps rendered properties - should be request scoped.

            visit livedemo. the support example. Dinamic forms tab.

            • 3. Re: Rerender component after change of calendar element
              Hugo Wurzelbutz Newbie

              thanks for your answer!

              i surrounded my code with a outputPanel. the rerendering works as long as i do not add a rendered attribute to the a4j:commandbutton.

              output panel with id teststop
              ..
              calendar
              ..
              <td>Start</td>
               <td >
               <div id="inputStar2t">
              
               <h:inputText value="#{test.start}" id="teststart" rendered="#{! empty test.date}">
               <a4j:support event="onkeyup" reRender="starttop" action="#{taskAction.duration}"/>
               </h:inputText>
              
               <a4j:commandButton value="Jetzt" reRender="starttop" action="#{taskAction.setDate('start')}" />
              
               <h:outputText value="#{aktion.aktionsStartDatum}" id="aktionstart">
               <s:convertDateTime pattern="hh:mm"/>
               </h:outputText>
              
               </div>
               </td>
               <td>
               <h:message for="aktionstart" styleClass="cntError" />
               </td>
               </tr>
               <tr>
               <td>Stop</td>
               <td >
              
               <h:inputText value="#{test.stop}" id="teststop" rendered="#{! empty test.date}">
               <a4j:support event="onkeyup" reRender="starttop" action="#{taskAction.duration}"/>
               </h:inputText>
              
               <a4j:commandButton value="Jetzt" reRender="starttop" action="#{taskAction.setDate('stop')}" rendered="#{!empty test.date}"/>
              
               <h:outputText value="#{aktion.aktionsEndeDatum}" id="aktionstop">
               <s:convertDateTime pattern="hh:mm"/>
               </h:outputText>
              
               </td>
               <td><h:message for="aktionstop" styleClass="cntError" /></td>
              ...


              the "start" section works as expected: after klicking the a4j button the outputText field gets a value which is displayed.

              the "stop" section doesn't work: after klicking the a4j button nothing happens.

              the a4j:support tags don't fire an action either when the inputText fields have a rendered attribute.

              did i unterstand something wrong? is it a feature(bug) ? as soon as i remove the rendered attributes everything works as expected.

              here is the a4j:log output for the not working "stop" a4jbutton:
              debug[19:22:12,515]: Have Event [object Object] with properties: target: [object HTMLInputElement], srcElement: [object HTMLInputElement], type: click
              debug[19:22:12,515]: Query preparation for form 'zeiten' requested
              debug[19:22:12,515]: Append hidden control zeiten with value [zeiten] and value attribute [zeiten]
              debug[19:22:12,515]: Append text control zeiten:enddatumInputDate with value [11.02.2009] and value attribute [11.02.2009]
              debug[19:22:12,515]: Append hidden control zeiten:enddatumInputCurrentDate with value [02/2009] and value attribute [02/2009]
              debug[19:22:12,515]: Append text control zeiten:teststart with value [19:22] and value attribute [19:22]
              debug[19:22:12,515]: Append text control zeiten:teststop with value [] and value attribute []
              debug[19:22:12,515]: Append text control zeiten:fahrzeit with value [] and value attribute []
              debug[19:22:12,515]: Append select-one control zeiten:vorgang with value [org.jboss.seam.ui.NoSelectionConverter.noSelectionValue] and value attribute [null]
              debug[19:22:12,515]: Append text control zeiten:kontaktID with value [] and value attribute []
              debug[19:22:12,515]: Append select-one control zeiten:aktionsart with value [org.jboss.seam.ui.NoSelectionConverter.noSelectionValue] and value attribute [null]
              debug[19:22:12,515]: Append select-one control zeiten:abrechnungskennzeichen with value [org.jboss.seam.ui.NoSelectionConverter.noSelectionValue] and value attribute [null]
              debug[19:22:12,515]: Append hidden control javax.faces.ViewState with value [j_id10] and value attribute [j_id10]
              debug[19:22:12,515]: parameter zeiten:j_id24 with value zeiten:j_id24
              debug[19:22:12,515]: Look up queue with default name
              debug[19:22:12,515]: NEW AJAX REQUEST !!! with form: zeiten
              debug[19:22:12,515]: Start XmlHttpRequest
              debug[19:22:12,515]: Reqest state : 1
              debug[19:22:12,515]: QueryString: AJAXREQUEST=_viewRoot&zeiten=zeiten&zeiten%3AenddatumInputDate=11.02.2009&zeiten%3AenddatumInputCurrentDate=02%2F2009&zeiten%3Ateststart=19%3A22&zeiten%3Ateststop=&zeiten%3Afahrzeit=&zeiten%3Avorgang=org.jboss.seam.ui.NoSelectionConverter.noSelectionValue&zeiten%3AkontaktID=&zeiten%3Aaktionsart=org.jboss.seam.ui.NoSelectionConverter.noSelectionValue&zeiten%3Aabrechnungskennzeichen=org.jboss.seam.ui.NoSelectionConverter.noSelectionValue&javax.faces.ViewState=j_id10&zeiten%3Aj_id24=zeiten%3Aj_id24&
              debug[19:22:12,515]: Reqest state : 2
              debug[19:22:12,625]: Reqest state : 3
              debug[19:22:12,656]: Reqest state : 4
              debug[19:22:12,656]: Reqest end with state 4
              debug[19:22:12,656]: Response with content-type: text/xml;charset=UTF-8
              debug[19:22:12,656]: Full response content: <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml"><head><link class="component" href="/ProjectTicket/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__" rel="stylesheet" type="text/css" /><link class="component" href="/ProjectTicket/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__" media="rich-extended-skinning" rel="stylesheet" type="text/css" /><script src="/ProjectTicket/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.PrototypeScript" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.AjaxScript" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/events.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/utils.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/json/json-dom.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/scriptaculous/effects.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/jquery/jquery.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/JQuerySpinBtn.js" type="text/javascript"> </script><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/calendar.js" type="text/javascript"> </script><link class="component" href="/ProjectTicket/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/calendar.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__" rel="stylesheet" type="text/css" /><script src="/ProjectTicket/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/skinning.js" type="text/javascript"> </script><meta name="Ajax-Update-Ids" content="" /><title></title></head><body><span id="ajax-view-state"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id10" /></span><meta id="Ajax-Response" name="Ajax-Response" content="true" /></body></html>
              debug[19:22:12,656]: Header Ajax-Expired not found, search in <meta>
              debug[19:22:12,656]: search for elements by name 'meta' in element #document
              debug[19:22:12,656]: Find <meta name='Ajax-Update-Ids' content=''>
              debug[19:22:12,656]: Find <meta name='Ajax-Response' content='true'>
              debug[19:22:12,656]: Header Ajax-Update-Ids not found, search in <meta>
              debug[19:22:12,656]: search for elements by name 'meta' in element #document
              debug[19:22:12,656]: Find <meta name='Ajax-Update-Ids' content=''>
              warn[19:22:12,656]: No information in response about elements to replace
              debug[19:22:12,656]: call getElementById for id= org.ajax4jsf.oncomplete
              debug[19:22:12,656]: Processing updates finished, no oncomplete function to call
              debug[19:22:12,656]: call getElementById for id= ajax-view-state
              debug[19:22:12,656]: Hidden JSF state fields: [object HTMLElement]
              debug[19:22:12,656]: Namespace for hidden view-state input fields is undefined
              debug[19:22:12,656]: search for elements by name 'input' in element span
              debug[19:22:12,656]: Replace value for inputs: 20 by new values: 1
              debug[19:22:12,656]: Input in response: javax.faces.ViewState
              debug[19:22:12,656]: Found same input on page with type: hidden
              debug[19:22:12,656]: Found same input on page with type: hidden
              debug[19:22:12,656]: Found same input on page with type: hidden
              debug[19:22:12,656]: Found same input on page with type: hidden
              debug[19:22:12,656]: search for elements by name 'INPUT' in element span
              debug[19:22:12,656]: Replace value for inputs: 20 by new values: 0
              debug[19:22:12,656]: call getElementById for id= _A4J.AJAX.focus
              debug[19:22:12,656]: No focus information in response