How can I trigger a ModalPopupExtender depending on the value of a DropDownList?

Question

I have a DropDownList, a Button and a ModalPopupExtender.

When the user clicks the button, depending on the value they've selected, I'd like to either let the button cause a normal postback, or trigger a ModalPopupExtender (and cancel the Buttons postback).

I've achieved this by using ModalPopupExtender.Show() and ModalPopupExtender.Enabled on the server-side but wondered if anyone could think of a better way of doing this, using JavaScript, to avoid a postback.

Answer 1

I've got it working using a bit of jQuery (though that's not a requirement). I'll flesh this answer out another time but here are the basics until then:

<asp:HiddenField ID="ModalPopupExtenderHiddenField" runat="server" />

<asp:LinkButton OnClientClick="javascript:return ApplyButton_Click()" />

<uc:ModalPopupExtender TargetControlID="DiscardModalPopupExtenderHiddenField" BehaviorID="ModalPopupExtender" />

function ApplyButton_Click()
{
    if ($('.jsActionsDropDown')[0].value == 1)
    {
        $find('ModalPopupExtender').show();
        return false;
    }
}