kiran kiran - 1 year ago 387
Javascript Question

Show Modal Popup window based on Dropdown selection

Here I have a Dropdown selection with "Create New" option. When User selects "Create New" then it should display Modal Popup window.

This is Dropdown code

<asp:DropDownList ID="DropDownConfigFile" runat="server" CssClass="selectpicker">
<asp:ListItem Text="Create New" Value="1" ></asp:ListItem>

Here it is Jquery for opening Popup window,

<script type="text/javascript">
$(function () {

//Attach click event to your Dropdownlist
$("#DropDownConfigFile").change(function () {
//Get the selected valu of dropdownlist
selection = $(this).val();
//If its one then show the dialog window. You can change this condition as per your need
if (selection == 1) {
//Show the modal window

This is my Modal popup design.

<div id="myModal" class="modal fade">
<asp:Panel ID="Panel1" runat="server" align="center" style = "display:contents ">
<table class="table table-hover small-text" id="tb" border="1">
<%--<td class="col-md-4">Index Position</td>--%>
<th style="BACKGROUND-COLOR: DarkGrey ">Index Position</th>
<th style="BACKGROUND-COLOR: DarkGrey ">Alpha-Numeric Scramble</th>
<th style="BACKGROUND-COLOR: DarkGrey ">Packed-Decimal Scramble</th>
<%--<td class="col-md-4">Type of Scramble</td>
<td class="col-md-4">Scrambling Required</td>--%>

But unfortunately if I select "Create New" it is not opening a popup. What's wrong here.

Answer Source

The problem is because you are using runat="server"

In this code

<asp:DropDownList ID="DropDownConfigFile"  runat="server" CssClass="selectpicker">
    <asp:ListItem Text="Create New" Value="1" ></asp:ListItem>

if you inspect the dropdown in your browser you will see its id changed to "ct100_ContentPlaceHolder1_DropDownConfigFile", So in your script you are using $("#DropDownConfigFile").change(function () { which will not work as there is no element with that id and jquery cannot bind the change event to it.

There are 2 solutions for this problem.

1) Set the Client Id mode to static: to your elements so that you remain with the static id.

Make this changes to both your DropDownList control

<asp:DropDownList ID="DropDownConfigFile"  runat="server" ClientIDMode="Static" CssClass="selectpicker">

With this the Id will remain as is and Jquery will be able to find it and bind the change event.

2) Change your script to use the ClientID . change you Jquery itself to use the ClientID instead ... like below

$("#DropDownConfigFile").change(function () { change this to

$("#<%= DropDownConfigFile.ClientID %>").change(function () {

So now make Jquery read proper ID and so it binds the event..