DropDownList selected index changed Event inside jQuery dialog

问题

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!

回答1:

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

回答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();

来源：https://stackoverflow.com/questions/8082921/dropdownlist-selected-index-changed-event-inside-jquery-dialog