12 Replies Latest reply on Oct 4, 2010 7:24 PM by sos

    Calendar won't dynamically update backing bean

      Hi all,
      I'm using rich:calendar (version 3.3.1GA). It's a very simple application. The calendar's value attribute points to a backing bean's date attribute.
      I want to get the calendar to dynamically update the backing bean as soon as the date value changes/a blur event takes place on the date field.
      Here's some code:


      <rich:calendar
        todayControlMode="select"
        popup="true"
        enableManualInput="true"
        value="#{salesInvoice.issuedDate}"
        required="true"
        datePattern="dd/MM/yyyy"
        immediate="true"
        reRender="datePanel,lineItemsTable,messages"/>



      All I need it to do is update my salesInvoice.issuedDate as soon as the user changes the date.
      I've tried "mode=ajax" but this requires a whole new data model on the back end to supply dates for the calendar. Not ideal. But "mode=client" doesn't send updates to my backing bean.
      Any ideas? Seems such a simple thing to do but I'm stuck!

      Regards,
      Andy
        • 1. Re: Calendar won't dynamically update backing bean
          israel.bgf
          you should put the tag:

          <a4j:support event="onblur">

          Inside this calendar tag. That should do the trick. (i don't know if the onblur is right event you can try otheers like "onchange"). And the rerender should be in this tag too.
          • 2. Re: Calendar won't dynamically update backing bean

            I wish it were that simple! onchange certainly doesn't do the trick.
            I'll try it...

            • 3. Re: Calendar won't dynamically update backing bean
              israel.bgf

              You can try onclick and onselect too, but something is fact. To accomplish this requirement you will have to use the a4j:support tag. :)

              • 4. Re: Calendar won't dynamically update backing bean
                It's way stranger and less obvious than that.
                No updates will take place on your backing bean unless mode=ajax is set on the calendar.
                Once this mode is set, any attempts to use the calendar to change month or year etc, fails because the Ajax call wants a data model in order to render the dates.
                If you set mode=client, then you lose all ajax stuff but you get to jump back and forth across months and years.

                The various a4j:support options don't do a thing. If only the input field associated with the calendar acted like any other normal text field with onblur support.

                I guess what I need is to find someone/something that has written HOW to plug in the calendar so that it dynamically updates a backing bean with the date that has been selected (or typed in). Ironically, almost all searches I do with Google about rich calendar take me to JBoss Jira reports!! Not a good state of affairs! :-)


                • 5. Re: Calendar won't dynamically update backing bean
                  israel.bgf
                  I did some research and testing and finnaly get it working. You have to use the "onchanged" event for the a4j:support. It worked in my test case.

                  <?xml version="1.0" encoding="ISO-8859-1" ?>
                  <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                          xmlns:ui="http://java.sun.com/jsf/facelets"
                          xmlns:h="http://java.sun.com/jsf/html"
                          xmlns:f="http://java.sun.com/jsf/core"
                          xmlns:rich="http://richfaces.org/rich"
                          xmlns:a4j="http://richfaces.org/a4j"
                          xmlns:s="http://jboss.com/products/seam/taglib">
                         
                          <a4j:form>
                                  <rich:calendar value="#{bean.date}">
                                          <a4j:support event="onchanged" reRender="output" ajaxSingle="true"/>
                                  </rich:calendar>
                                  <h:outputText id="output" value="#{bean.date}"/>
                          </a4j:form>
                         
                         
                  </ui:composition>

                  The bean class, is just a seam component scoped to page with a date value. Try that.
                  • 6. Re: Calendar won't dynamically update backing bean
                    Aaah!
                    Seems like my mistake was to use mode=ajax.

                    Your solution is almost there! Thank-you Israel.
                    All I need now is to get onblur working as I'm letting the user use the rich calendar's entry field as well as the popup calendar.

                    Thanks again (so simple - my vision was clouded by too much Ajax today!)
                    • 7. Re: Calendar won't dynamically update backing bean
                      israel.bgf
                      http://livedemo.exadel.com/richfaces-demo/richfaces/calendar.jsf?tab=info&cid=3911107

                      Look at the tag attribute session of richfaces site to see another events, maybe there is the one that you are looking for.
                      • 8. Re: Calendar won't dynamically update backing bean
                        The main issue there is that any one widget (calendar in our case) only supports one a4j:support tag.
                        Ideally what I need is:

                        <a4j:support event="onblur".../>
                        AND
                        <a4j:support event="onchanged" .../>

                        The oninputblur attribute of rich:calendar needs a client side piece of javascript as the event handler, and I'm reluctant to do that at the moment (mainly because it's nice to keep things in Seam/JSF tags)
                        • 9. Re: Calendar won't dynamically update backing bean
                          israel.bgf
                          Hmm, you CAN put more than one a4j:support in an tag. I even did the test:

                                                  <a4j:form>
                                          <rich:calendar value="#{bean.date}" enableManualInput="true">
                                                  <a4j:support event="oninputblur" reRender="output" ajaxSingle="true"/>
                                                  <a4j:support event="onchanged" reRender="output" ajaxSingle="true"/>
                                          </rich:calendar>
                                          <h:outputText id="output" value="#{bean.date}"/>
                                  </a4j:form>

                          And I do not understood what you told about needing a piece of javascript. You don't have to put any javascript at all.
                          • 10. Re: Calendar won't dynamically update backing bean
                            Sorry, I was referring to the on* attributes that are added to a component. They're designed for client-side processing e.g.

                            "onchanged  The client-side script method to be called when the date or time is changed and applied to input"

                            And you're right about the multiple event handlers. My fault. I came across a Jira issue that said it was to be supported in "the future". I assumed it wasn't supported in the current Seam.

                            Thanks again to you, Israel. I've been educated.
                            • 11. Re: Calendar won't dynamically update backing bean
                              israel.bgf

                              I get it. Anyway if you have any another doubts just ask it. :)

                              • 12. Re: Calendar won't dynamically update backing bean
                                sos
                                Hi,
                                Just wondering if the thread would still be answered ..

                                In a scenaro where I dont want to should the output <h:outputText id="output" value="#{bean.date}"/>

                                but instead I have to populate another field based on the input of the date captured from the calander .. what would be the approach.

                                <rich:calendar value="#{bean.startDate}" enableManualInput="true">
                                                        <a4j:support event="oninputblur" reRender="output" Single="true"/>
                                                      <a4j:support event="onchanged" reRender="output" ajaxSingle="true"/>
                                                </rich:calendar>
                                              <!--  <h:outputText id="output" value="#{bean.date}"/>  -->
                                        </a4j:form>


                                This is what I want to populate from the start date above:
                                -----------------------------------------------------------
                                <h:outputText value="End Date" />
                                <h:inputText id="enddate" value="#{bean.enddate}"></h:inputText>


                                I tried to play with reRender but may be I am doing something wrong.

                                any help shall help me.

                                Thanks
                                sos