I have two DropDownList controls the second of which resides within an UpdatePanel control which responds to a change in the first DropDownList. I also have a hidden button nested inside the UpdatePanel to force a postback via JS.
The user uses these two DropDownList controls to create objects which consist of a type and a code. When the user selects a type in the first DropDownList the second is properly populated with the relevant codes via a postback to the server. Once the user has selected a type and code they can add the object to a table via an 'add' button. The DropDownList controls are then reset to allow the user to add more objects to the table.
So far, so good.
The user can also click on a row in the table (which displays the type and code for a single object) to edit the type and/or code for the object. When the click occurs the DropDownLists should get set to the type and code for the selected object.
This is where the problem arises. The first DropDownList does get set to the correct type for the object. The second DropDownList does get properly populated with the correct codes for the type but the correct code for the object never remains selected. The first time the row is selected the second DropDownList just gets populated. On each subsequent click you can see the correct code get selected for a fraction of a second but the DropDownList almost immediately gets reset to the first item in the list.
I noticed if I raise an alert before the line that selects the code the correct code is selected and remains selected. I assumed that maybe the call to select the code was being called before the control was completely populated. I tried adding a wait (a simple for loop) before the call to select the code but I either ended up with the same results as above or a dialog would appear asking the user to terminate the script.
I tried querying the readyState property of the DropDownList and would only set the code when the readyState == 'complete' and that had no effect.
I tried omitting the hidden button and using __doPostBack to force the postback via JavaScript but that was causing the whole page to refresh which was unacceptable.
Could someone please let me know what is going on? Thanks!
In my .aspx file:
Expand|Select|Wrap|Line Numbers
- <asp:DropDownList ID=ddlInsertionTypes AutoPostBack=true OnSelectedIndexChanged=ddlInsertionTypes_SelectedIndexChanged runat=server />
- <asp:UpdatePanel ID=UpdatePanel1 ChildrenAsTriggers=false UpdateMode=Conditional runat=server>
- <ContentTemplate>
- <asp:DropDownList ID=ddlInsertionCodes AutoPostBack=True OnSelectedIndexChanged=ddlInsertionCodes_SelectedIndexChanged runat=server />
- <asp:Button ID=cmdForcePostBack1 style="display: none;" runat=server />
- </ContentTemplate>
- <Triggers>
- <asp:AsyncPostBackTrigger ControlID=ddlInsertionTypes EventName=SelectedIndexChanged />
- <asp:AsyncPostBackTrigger ControlID=cmdForcePostBack1 EventName=Click />
- </Triggers>
- </asp:UpdatePanel>
In my .js files:
Expand|Select|Wrap|Line Numbers
- function tblInsertionItems_onRowSelect(row, selected)
- {
- if (selected) {
- var item = getInsertionItemById(row.getAttribute('insertionItemId'));
- if (item != null) {
- setInsertionTypeFromId(item.itemTypeId);
- // force the UpdatePanel to postback
- document.getElementById(_cmdForcePostBack1_ClientId).click();
- // if we leave this alert in the insertion code is properly selected in the DropDownList.
- alert('here');
- setInsertionCodeFromId(item.itemId);
- }
- }
- function setInsertionCodeFromId(id)
- {
- var ddl = document.getElementById(_ddlInsertionCodes_ClientId);
- return setSelectedValue(ddl, id);
- }
- function setInsertionTypeFromId(id)
- {
- var ddl = document.getElementById(_ddlInsertionTypes_ClientId);
- return setSelectedValue(ddl, id);
- }
- function setSelectedValue(ddl, selectedValue)
- {
- if (ddl != null) {
- var options = ddl.options;
- for (var i=0; i < options.length; i++) {
- if (parseInt(options[i].value) == selectedValue) {
- ddl.selectedIndex = i;
- return true;
- }
- }
- }
- return false;
- }