DropDownList selected index changed Event inside j

Question

Problem: when dropdownlist selected index changes, another dropdownlist should be populated depending on the selected value.

I am using webforms. In the masterpage I have this code which allows me to get postbacks from the jquery dialog:

var dlg = $("#dialog-modal").dialog({
    autoOpen: false,
    height: 250,
    width: 350,
    show: "fade",
    hide: "fade",
    modal: true
});    
dlg.parent().appendTo($("form:first"));

When the dropdowndist changes the selected value, the server actually gets the postback and look up the info to the database and then I do the binding to the second dropdownlist. However, the data is not shown in the second DropDownList

Any help would be greatly appreciated.

UPDATE: I am using a UserControl inside the ContentPage. Both, the ContentPage and the UserControl have UpdatePanels. The jQuery dialog shows the UserControl which have the DropDownLists described in the problem.

UPDATE: If I delete the UpdatePanel of the ContentPage, the dialog works as expected. It does the binding when the dropdownlist selected index changes which is great! However, I would ideally use the UpdatePanel in the ContentPage in order to avoid the full post backs when interacting with the GridView (sorting, paging, editing, etc).

Any ideas will be greatly appreciated!

Answer 1

I think you just need to put an update panel around all of the content in the dialog.

Answer 2

After reading about UpdatePanel with a bit more detail I found the solution:

1. Add the UpdateMode="Conditional" to both UpdatePanels properties
2. Update the UserControl's UpdatePanel after changing the dropdownlist's selected index: UpdatePanelUC.Update();