Invoking the ModalPopupExtender from a ListBox

I would like to know if it is possible to invoke the ModalPopupExtender by making a choice in a ListBox. All of the posts and examples I can find appear to use a button to invoke the control. My need is to invoke the control only when a particular selection is made in the ListBox. In my case, there are 4 choices in the ListBox, but I only want the Popup to show when #4 is selected.

As a follow-up, if this cannot be done, is there any work-around that will make the user think this is what happens. In other words, the Popup will appear when they make the particular selection in the ListBox, even if the program had to do something else to make it happen.

This seems like it should be a simple thing to do, but I cannot figure it out (I am new to AJAX and the Toolkit, and still trying to get a good grasp of them).

Any help will be greatly appreciated.

The individual ListItem will not have an ID that the ModalPopupExtender can target. You instead have a hidden input that the ModalPopupExtender targets, set the BehaviorID on the ModalPopup and call show and hide when the ListBox selected index is changed and is equal to the 3. You can hook up the onchange event handler on page load.

kirtid,

I appreciate your answer, and I follow the logic of it. However, you give me far too much credit for understanding how to implement your solution. When I mentioned that I was new to AJAX, I should have probably said (in the interests of full disclosure) that I am new to client-side programming and/or javascript.

I have dropped an html input (text) control onto my page, but the only way I can seem to get the ListBox SelectedIndex into it is to wrap it in an UpdatePanel and use the listbox as a trigger. I have set the BehaviorID in the Extender, but I can't seem to get the ModalPopup to pay attention to my input box. My attempt at the onchange function (for entertainment purposes) looks like this:

function Text1_onchange() {

If (Text1.value="3") {

$find("showPopUp").show()

}

else

{

$find("showPopUp").hide()

}

}

Even if by some miracle this will work, I am unsure how to wire it up.

I would appreciate any hand holding you can provide. I figure I won't learn anything if I don't ask those who know.

In the List element add a client side handler to the changed event:http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/option.asp.

Something like this.

<
bodyonclick="DoSomething()"><scripttype="text/javascript">
 
function DoSomething() {var listBox = $get('listBox1');
$addHandler(listBox,
'change', ShowModalPopup());
}
 
function ShowModalPopup() {var listBox = $get('listBox1');var modalPopup = $find('modalBehavior1');var index = listBox.selectedIndex;if ( index == 1) {
modalPopup.show();
}
returnfalse;
}
</script><formid="form1"runat="server"><asp:ScriptManagerrunat="server"></asp:ScriptManager><div><asp:Buttonrunat="server"ID="btn1"Visible="false"/><ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"TargetControlID="btn1"PopupControlID="DropPanel"DropShadow="true"BehaviorID="modalBehavior1"></ajaxToolkit:ModalPopupExtender><asp:ListBoxrunat="server"ID="listBox1"><asp:ListItem>Foo</asp:ListItem><asp:ListItem>Bar</asp:ListItem><asp:ListItem>Baz</asp:ListItem></asp:ListBox>

kirtid, I've got it working.

Thanks for your help