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.
Archived Comments
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?
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.
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
W/o me digging into your code - I'd just say to examine more carefully the demo that ships with Spry.
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.
Oh heh, I didn't notice it in your code.
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/cfusio...
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.
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!
I found your fix to work well, but (there is often one) it did not work when I sorted the data using spry.
Thanks
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