CODEWITHSUNDEEP
c#asp.netajaxasp.net-ajaxupdatepanel
Ryan Lundy
Ryan Lundy

Reputation: 210090

Updating a control outside the UpdatePanel

So I have a UserControl with some cascading DropDownLists on it. Selecting from list 1 enables list 2, which in turn enables list 3. Once you've made a selection in all three lists, you can move to the next page.

The DropDownLists are all inside an UpdatePanel. But the "Next Page" button is outside the UpdatePanel. That button should be disabled until all three lists have a selection, and then it should be enabled again. But since the button is outside the UpdatePanel, it doesn't update when I make selections. (Edit: The "Next Page" button is on a page that also contains the UserControl.)

I know one way to resolve this:

var scriptManager = ScriptManager.GetCurrent(this.Page);
scriptManager.RegisterPostBackControl(dropDownList1);
scriptManager.RegisterPostBackControl(dropDownList2);
scriptManager.RegisterPostBackControl(dropDownList3);

This ensures a postback when any dropdown list is changed, so that the button can update. But if I do this, I might as simplify by getting rid of the UpdatePanel in the first place.

Is there another way, through some clever JavaScript or something, that I can update a control outside an UpdatePanel without having to give up Ajax?

Upvotes: 13

Views: 25987

Answers (4)

coder123
coder123

Reputation: 31

you can upddate a control outside the update panel by placing it into update_panel2 and saying update_panel2.update().

Note the UpdateMode of the UpdatePanel must be set to conditionalfor this to work.

Upvotes: 3

Jim Petkus
Jim Petkus

Reputation: 4508

Place an UpdatePanel around the next button and create a trigger for each of the dropdowns so that it fires an async postback. Ex:

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="dropDownList1" />
    <asp:AsyncPostBackTrigger ControlID="dropDownList2" />
    <asp:AsyncPostBackTrigger ControlID="dropDownList3" />
</Triggers>

Upvotes: 12

Adam Lassek
Adam Lassek

Reputation: 35505

This would ideally be done in javascript, with a server-side validation check in the click event handler.

A quick jQuery example:

//assuming the dropdowns all have the css class "cascade"
$('select.cascade').change(function() {
  If ($('option:selected',this).length == 3) {
    $('input[id$=btnNext]').removeAttr('disabled');
  }
});

Upvotes: 1

thmsn
thmsn

Reputation: 1996

Could you not add a update panel around the "next page" and then add a trigger to the dropdownlist updatepanel for triggering the next page update panel?

Just throwing out ideas, without actually having tried it :)

Upvotes: 7

Related Questions