Quantcast

Fun Little AJAX/Internet Explorer Issue

Get the WebProNews Newsletter:
[ Technology]

A few days ago I mentioned a little issue I ran into with Spry.

Today I was helping my friend diagnose some issues with his application and IE and I ran into a new little bug.

This isn’t a Spry issue – but just IE in general.

Imagine this situation: You have a drop down field being populated by Spry. Let’s call it Categories. Whenever you change the category, you use Spry to populate a second drop down of products.

Pretty simple related selects type feature, right?

Turns out in IE, something interesting happens. Whenever I would change the category, the products drop down would be correctly populated – but defaulted to the last item in the drop down.

In FireFox, the first item would be selected.

What’s worse is that in my friend’s demo, he had a detail region tied to the second drop down. It would correctly show the detail for the first item in the drop down, but visually you saw the last item selected.

Once again I went to my buddy Kin Blas of Adobe. Turns out this isn’t a bug really – but a “feature” of IE, where it simply uses the last option as the default if you don’t mark one as the selected item.

Luckily there is a cool little way to fix this in Spry using conditionals. Spry gives you a hook to various bits of information related to the current dataset. These are named ds_Something or another. The following example shows how we can use them.

<div spry:region="categories">
<select spry:repeatchildren="categories" spry:choose="choose" name="category" onChange="categories.setCurrentRow(this.selectedIndex);">
<option spry:when="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{category}</option>
<option spry:default="default">{category}</option>
</select>
</div>

Of particular note look at the when and default clause on the option tags.

This will apply logic before letting the item be printed when the dataset is applied. Note the use of ds_RowNumber and ds_CurrentRowNumber.

When the dataset is applied, these values will be dynamic and checked as Spry prints out the option tags.

Make sense? If not – let me know.

Comments

Tag:

Add to Del.icio.us | Digg | Yahoo! My Web | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

Fun Little AJAX/Internet Explorer Issue
About Raymond Camden
Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long time ColdFusion user, Raymond has worked on numerous ColdFusion books and is the creator of many of the most popular ColdFusion community web sites. He is an Adobe Community Expert, user group manager, and the proud father of three little bundles of joy. WebProNews Writer
Top Rated White Papers and Resources
  • http://www.solve-design.com Tom English

    Hi Raymond,

    I’m running into exactly the issue you have described here however I have one more symptom which is that IE dosent update the row pointer at all when I change my first select!

    This really has me pulling my hair out, in IE if I create any html element other than a select (div, span, ul etc etc) and use spry:setrow on it everything works perfectly, the item is clicked on, my second dataset updates HOWEVER! If I create a select, firstly the last item in the select is shown as selected on page load and secondly, changing the selected item does not update the second dataset.

    I’ve stripped my code right down to the bare bones and I still get this very frustrating error, I was wondering if you had any thoughts on it?

    Regards & thanks for your time in advance,

    Tom