Can not correctly select item in a DropDownList after postback

[Lohboy]

Using ASP.NET and IE7. (Sorry if I am posting in the wrong forum but my problem seemed to be more related to the JavaScript side than the ASP.NET side.)

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:

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

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

[pbmods]

Heya, Lohboy. Welcome to TSDN!

Thanks for using CODE tags! Did you know that you can specify a language for your CODE tags to make your source code easier to read?

You will still need to use [/code] to close your code blocks, regardless of the language, but you can the use one of these tags to open your code block:

[code=html]
[code=javascript]
[code=php]

and so on.

Thanks!

MODERATOR

[Lohboy]

Figured it out. I was attempting to set the selected item before the asynch postback was complete. I just needed to handle the PageRequestManager pageLoaded event.

 
function tblInsertionItems_onRowSelect(row, selected)
{
 
    if (selected) {
        var item = getInsertionItemById(row.getAttribute('insertionItemId'));
 
        if (item != null) {
 
            _editInsertionItemId = item.id;
 
            setInsertionTypeFromId(item.itemTypeId);
 
            // set up our handler for when the asynch postback completes
            Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(insertionTypesLoaded);
 
            // force the postback
            document.getElementById(_cbxInsertionTypes_ClientId).fireEvent('onchange');
 
}
 
function insertionTypesLoaded(sender, e)
{
 
    var item = getInsertionItemById(_editInsertionItemId);
 
    if (item != null)
        setInsertionCodeFromId(item.itemId);
 
    Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(insertionTypesLoaded); 
 
}
 
 

[pbmods]

Heya, Lohboy.

Thanks for posting your solution.

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)