Re: Popup Calendar - Show and Tell

["Haas, Matt (CL Tech Sv)" <matt.haas@xxxxxxxxxxx>]

We're using it for the Ajax stuff (IBM and Bea are also using it for Ajax). Here's an example that we're using to populate a state/province drop down when a county is changed (we have similar code for the shipping address):

<script type="text/javascript" src="/js/dojo-1.0.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript" src="/js/dojo-1.0.2/dojo/data/util/simpleFetch.js"></script>
<script type="text/javascript" src="/js/dojo-1.0.2/dojox/data/QueryReadStore.js"></script>
<script type="text/javascript">
        dojo.require("dojox.data.XmlStore");
        var billStore;
        var userBillStateCode = '<%=billStateCode%>';

        var gotBillStates = function(items, request){
                var stateSelect = document.forms['checkout_info']['customer_address.state']
                stateSelect.options.length = 0;
                for (var i = 0; i < items.length; i++){
                        var item = items[i];
                        stateSelect.options[i] = new Option(billStore.getValue(item, "Description"), billStore.getValue(item, "Code"));
                        if(stateSelect.options[i].value == userBillStateCode) {
                                stateSelect.options[i].selected = true;
                        }
                }
                stateSelect.disabled = (items.length < 1);
        }

        function getBillStates()
        {
                var countrySelect = document.forms['checkout_info']['customer_address.country'];
                var selectedCountry = countrySelect.options[countrySelect.selectedIndex].value;
                billStore = new dojox.data.XmlStore({url: "<%=link("storefront", "AjaxStateList")%>&locale=<%= locale %>&countryCode=" + selectedCountry, rootItem: "State"});
                billStore.fetch({onComplete: gotBillStates});
        }

        function loadStates()
        {
                getBillStates();
        }
</script>

This calls a JSP page that returns XML in the following format:

<StateList>
        <State>
                <Code></Code>
                <Description></Description>
        </State>
</StateList>

The entire process is pretty fast. When I was testing this during the proof of concept work, it took about 500ms max to populate the state list for the US (faster than I could move my mouse from the country drop down to the state drop down). About 2/3 of the time was on the server and the rest was on the client. The biggest challenge was keeping this from firing when the billing address was copied into the shipping address. I ended up passing a flag into the getShipStates method (not shown) so I could tell if this really needed to be fired or not.

The pages we have this on also pre-populate the drop down based on the default country so there isn't a delay when the page is first displayed.

Matt

-----Original Message-----
From: web400-bounces@xxxxxxxxxxxx [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of Nathan Andelin
Sent: Monday, March 10, 2008 10:26 AM
To: Web Enabling the AS400 / iSeries
Subject: Re: [WEB400] Popup Calendar - Show and Tell

Matt,

I've just begun looking at the Dojo web site, based on your post.  It
was interesting to see how some of their methods are implemented via
HTML attribute tags and seeing pseudo script implemented in tags.  I've
begun looking at some of their demo widgets; noting some of the
animation and UI behaviors.  Is there anything particular that you use?

Nathan.


--
Sent using goWebtop from Laszlo Systems.
Try it yourself : http://www.gowebtop.com


On Sat, Mar 8, 2008 at  8:31 PM, Haas, Matt (CL Tech Sv) wrote:

> Nathan,
>
> Dojo has some nice UI widgets to it plus stuff to make AJAX really,
> really simple. The entire library is pretty big buy it only loads what
> it needs and you can even do custom builds to get smaller sizes.
>
> Matt
>
> ________________________________________
> From: web400-bounces@xxxxxxxxxxxx [web400-bounces@xxxxxxxxxxxx] On
> Behalf Of Nathan Andelin [nandelin@xxxxxxxxxxxx]
> Sent: Friday, March 07, 2008 8:03 PM
> To: Web Enabling the AS400 / iSeries
> Subject: Re: [WEB400] Popup Calendar - Show and Tell
>
> If you'd like to see the calendar in a full screen rather than the
> down-sized popup frame you can check out:
>
> http://www.radile.com/rdweb/apps/common/html/datepick.html
>
> When shown in a browser window you can see what I meant about the
> inline
> table expanding and shrinking when the window is resized.  The source
> view shows both the static HTML along with the JavaScript for
> incrementing and decrementing dates and updating the inline table.
>
> One thing that annoyed me about some of the JavaScript date pickers I
> looked at was the size of the JavaScript file, which sometimes
> exceeded
> 50 kb.  I wanted to simplify where possible.  The HTML + JavaScript in
> this calendar is under 7 kb.
>
> Nathan.
>
>
> --
> Sent using goWebtop from Laszlo Systems.
> Try it yourself : http://www.gowebtop.com
>
>
> On Fri, Mar 7, 2008 at  4:46 PM, Nathan Andelin wrote:
>
> > Over time, I've had different thoughts about popup calendars.  A
> > couple years ago I wrote an RPG program that generated date-picker
> > HTML and used ADDDUR and SUBDUR op codes to increment and decrement
> > month and year.  Each time a user selected a different month or year,
> > the browser sent and the server processed another request, and
> > downloaded the new HTML.  It worked fine, but generated quite a bit
> > of
> > server I/O and HTML streams - not great for constrained bandwidth.
> >
> > Then I learned about AJAX and considered modifying the RPG program to
> > download a more streamlined response instead of an entire page
> > refresh. And that's what I think I'll do at some point, when the
> > content on the calendar needs to be database driven.  For example,
> > certain dates may not be available, or I might want to expand the
> > calendar to include appointments.
> >
> > But for now, it's just a simple date picker.  Some of the basic
> > features I wanted were the ability to drag the inline frame around
> > the
> > screen and reposition it, and to show the input field label in the
> > title area of the popup (when selecting the date sometimes you forget
> > which input element you're changing), and to have the calendar to
> > expand or shrink according to the size of the inline frame, and to
> > have a dropdown list to select a particular month, and a few other
> > things.
> >
> > At least I understand the code now.  Actually the code for handling
> > the drag and drop effect is something I found on the Web and written
> > by a guy named Matt Kruse - a better Javascript programmer than me.
> >
> > Nathan.
> --
> This is the Web Enabling the AS400 / iSeries (WEB400) mailing list
> To post a message email: WEB400@xxxxxxxxxxxx
> To subscribe, unsubscribe, or change list options,
> visit: http://lists.midrange.com/mailman/listinfo/web400
> or email: WEB400-request@xxxxxxxxxxxx
> Before posting, please take a moment to review the archives
> at http://archive.midrange.com/web400.
> --
> This is the Web Enabling the AS400 / iSeries (WEB400) mailing list
> To post a message email: WEB400@xxxxxxxxxxxx
> To subscribe, unsubscribe, or change list options,
> visit: http://lists.midrange.com/mailman/listinfo/web400
> or email: WEB400-request@xxxxxxxxxxxx
> Before posting, please take a moment to review the archives
> at http://archive.midrange.com/web400.
--
This is the Web Enabling the AS400 / iSeries (WEB400) mailing list
To post a message email: WEB400@xxxxxxxxxxxx
To subscribe, unsubscribe, or change list options,
visit: http://lists.midrange.com/mailman/listinfo/web400
or email: WEB400-request@xxxxxxxxxxxx
Before posting, please take a moment to review the archives
at http://archive.midrange.com/web400.