jquery - Show Modal Popup window based on Dropdown selection -
here have dropdown selection "create new" option. when user selects "create new" should display modal popup window.
this dropdown code
<asp:dropdownlist id="dropdownconfigfile" runat="server" cssclass="selectpicker"> <asp:listitem text="create new" value="1" ></asp:listitem> </asp:dropdownlist>
here jquery opening popup window,
<script type="text/javascript"> $(function () { //attach click event dropdownlist $("#dropdownconfigfile").change(function () { //get selected valu of dropdownlist selection = $(this).val(); //if 1 show dialog window. can change condition per need if (selection == 1) { //show modal window $('#mymodal').modal('show'); } }); }); </script>
this 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"> <thead> <tr> <%--<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>--%> </tr> </thead> </div>
but unfortunately if select "create new" not opening popup. what's wrong here.
the problem because using runat="server"
in code
<asp:dropdownlist id="dropdownconfigfile" runat="server" cssclass="selectpicker"> <asp:listitem text="create new" value="1" ></asp:listitem> </asp:dropdownlist>
if inspect dropdown in browser see id changed "ct100_contentplaceholder1_dropdownconfigfile"
, in script using $("#dropdownconfigfile").change(function () {
not work there no element id , jquery cannot bind change event it.
there 2 solutions problem.
1) set client id mode static: elements remain static id.
make changes both dropdownlist control
<asp:dropdownlist id="dropdownconfigfile" runat="server" clientidmode="static" cssclass="selectpicker">
with id remain , jquery able find , bind change event.
2) change script use clientid . change jquery use clientid instead ... below
$("#dropdownconfigfile").change(function () {
change to
$("#<%= dropdownconfigfile.clientid %>").change(function () {
so make jquery read proper id , binds event..
Comments
Post a Comment