Re: Popup Calendar - Show and Tell

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.