Raymond Camden's ColdFusion Blog: Fun little AJAX/Internet Explorer issue (with cool Spry fix!)

Fun little AJAX/Internet Explorer issue (with cool Spry fix!)

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.

view plain print about

<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>

1  <div spry:region="categories">
2  <select spry:repeatchildren="categories" spry:choose="choose" name="category" onChange="categories.setCurrentRow(this.selectedIndex);">
3  <option spry:when="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{category}</option>
4  <option spry:default="default">{category}</option>
5  </select>
6  </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.

This entry was posted on Wednesday, October 11, 2006 at 1:57 PM. It was filed in the following categories: AJAX. It has been viewed 3,917 times and has 12 comments.

TweetBacks

Comments

[Add Comment] [Subscribe to Comments]

Comment 1 written by Neil Bailey on 12 October 2006, at 10:51 AM

Ray,

Maybe I am not understanding what the issue is, but couldn't you just do something like document.formName.selectName.selectedIndex = 0;?

Or am I missing the entire point?
Comment 2 written by Raymond Camden on 12 October 2006, at 10:54 AM

See my last post on Spry - you CAN do this using an observer. That's what I did for my friend because he had _other_ needs for the observer as well - but - this solution is simpler I'd say. I'd use this instead of an observer if I didn't need to do anything else.
Comment 3 written by Mamdoh on 17 October 2007, at 6:11 PM

Ray,

I have a challenging problem and I am wondering if you will be able to help.

I have an edit form which contains State and City drop down boxes. I managed to select the state but I am unable to figure out how to refresh the city box. when the form/page open the city always defaulted to Alabama's cites.

/////my code which is a copy from spry sample

<script language="JavaScript" type="text/javascript" src="js/includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="js/includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="js/includes/SpryNestedXMLDataSet.js"></script>

<script type="text/javascript">
var dsStates = new Spry.Data.XMLDataSet("xml/states/states.xml", "states/state");
var dsCities = new Spry.Data.XMLDataSet("xml/states/{dsStates::url}", "state/cities/city");

</script>

<form ....>

<SPAN class="requiredField">State:</SPAN>
<span spry:region="dsStates" id="stateSelector">
      <select spry:repeatchildren="dsStates" name="billto_state" onchange="document.forms[0].citySelect.disabled = true; dsStates.setCurrentRowNumber(this.selectedIndex);" id="billto_state">
         <option spry:if="'{name}' == '#form.billto_state#'" spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{name}" spry:setrow="dsStates" selected="selected">{name}</option>
         <option spry:if="'{name}' != '#form.billto_state#'" spry:setrow="dsStates" spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" >{name}</option>
      </select>
   </span><br>

   <SPAN class="requiredField">City</SPAN>
   <span spry:region="dsCities" id="citySelector">

      <select spry:repeatchildren="dsCities" id="citySelect" name="billto_city">
         <option spry:if="'{name}' == '#form.billto_city#'" value="{name}" spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{name}</option>
         <option spry:if="'{name}' != '#form.billto_city#'" spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{name}">{name}</option>
      </select>
   </span>
...</FORM>

//////END OF CODE////

I look forward to hearing from you

Thank you
Mamdoh
Comment 4 written by Raymond Camden on 18 October 2007, at 12:56 PM

W/o me digging into your code - I'd just say to examine more carefully the demo that ships with Spry.
Comment 5 written by Mamdoh on 18 October 2007, at 3:16 PM

Thank you Ray for your response. I did examine the code carefully and it works as long the form in Add Mode (no specific state or city need to be selected), but what I have a problem with is the edit mode form. I need to select the state and the city in the drop down box based on the data retrieve from the database. the demo that ships with spry, does not show any example for edit mode.

Also, Thank you for the Blog "Cool Spry Tip". It seems my code above inspire you to write about it.
Comment 6 written by Raymond Camden on 18 October 2007, at 3:57 PM

Oh heh, I didn't notice it in your code.
Comment 7 written by Mamdoh on 19 October 2007, at 7:01 PM

I just would like to share with you that I figured it out with a help from Adobe staff. Mr. Kin confirmed that this feature is missing and he is going to request to be added.

to see the solution go to http://www.adobe.com/cfusion/webforums/forum/messa...
Comment 8 written by Raymond Camden on 20 October 2007, at 8:50 AM

Interesting. I've done the 'default on load' thing before, but his code is definitely more elegant. I may blog it separately as it is a good example.
Comment 9 written by Jesus Gutierrez on 11 December 2007, at 5:33 PM

Hello.

Thankx a lot. I have worked to fix this issue but I couldn't find solution ...

...until I found this site and now it's works fine.

Thanks again!
Comment 10 written by Peter Coe on 6 April 2008, at 3:46 AM

I found your fix to work well, but (there is often one) it did not work when I sorted the data using spry.
Thanks
Comment 11 written by Jeff Salter on 16 May 2008, at 1:59 PM

I am having this same problem, but do not quite understand your solution. The website I listed has the photogallery that is in question. IE 7 is displaying the menu item first. Here is the code for the dropdown box. Any help will be greatly appreciated.

<div id="gallerySelect" spry:region="dsGalleries">
<label for="chooseGallery">Select Gallery: </label><select name="chooseGallery"spry:repeatchildren="dsGalleries" class="dropDownMenu" id="chooseGallery" onchange="dsGalleries.setCurrentRow(this.value)" >
<option value="{ds_RowID}">{name} </option>
</select>
</div>

Thanks Jeff
Comment 12 written by Topheur on 11 December 2008, at 1:00 PM

Hello,
I do not know if I'm in the right place, but I use spry with php to make selects linked.
I save database values selects.
My problem is I can not make the select positions on the value recorded.
Here is my code.
Thank you for your help.

<span spry:region="dsMenus" id="menuSelector">
      <div spry:state="loading">Loading employee data ...</div>
            <div spry:state="error">Failed to load employee data!</div>

<select spry:repeatchildren="dsMenus" name="type_menuf" id="type_menuf" onchange="document.forms[0].effect_menuf.disabled = true; dsMenus.setCurrentRowNumber(this.selectedIndex);">
<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{name}" selected="selected">{name}</option>
<option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{name}" >{name}</option>
</select>
</span>
<br />
          <span spry:region="dsStyles" id="styleSelector">
      <div spry:state="loading">Loading employee data ...</div>
            <div spry:state="error">Failed to load employee data!</div>

            <select spry:repeatchildren="dsStyles" id="effect_menuf" name="effect_menuf">
             <option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{name}" selected="selected">{name}</option>
             <option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{name}">{name}</option>
            </select>
</span>

first variable = $config['type_menu']
second variable = $config['effect_menu']