Chosen dropdown not working in BootStrap Model
Question
All replies
-
User839733648 posted
Hi Sam Solomon,
According to your description and code, I suggest that you could apply jquery-chosen after the modal is shown.
You could use the following method: https://getbootstrap.com/docs/4.0/components/modal/
$('#myModal').on('shown.bs.modal', function () {
$('#dropBenefits').chosen(); })You could use the following method to hide the dropdownlist:
$('#addModalDates').on('shown.bs.modal', function () { $('#dropBenefits').chosen('destroy').hide(); });The modfiying code is as below:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#btnAttachBenefit").click(function () { $('#txtFname').val(''); $('#txtLName').val(''); $('#addModalDates').on('shown.bs.modal', function () { $('#dropBenefits').chosen(); }); }); }); function openPopup(fname, lname) { $('#lblBene').hide(); $('#txtFname').val(fname); $('#txtLName').val(lname); $('#addModalDates').modal('show');
$('#addModalDates').on('shown.bs.modal', function () {
$('#dropBenefits').chosen('destroy').hide();
}); } </script> </head> <body> <form id="form1" runat="server"> <button type="button" class="inline cboxElement button" data-toggle="modal" data-target="#addModalDates" id="btnAttachBenefit"> Attach Benefit </button> <asp:GridView ID="grdUsers" runat="server" Width="100%" CssClass="gridWraper dataTable" DataKeyNames="ID" Style="width: 100%; border-collapse: collapse; border-bottom: 1px solid #ababab; border-top: 1px solid #ababab;" AutoGenerateColumns="false"> <AlternatingRowStyle CssClass="even" /> <Columns> <asp:TemplateField HeaderText="Edit" HeaderStyle-Width="150px"> <ItemTemplate> <a href="#" class="btn btn-default btn-sm" onclick='openPopup("<%# Eval("FirstName")%>","<%# Eval("LastName")%>")'>Edit</a> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="firstName" HeaderText="First Name" ReadOnly="true" HeaderStyle-CssClass="text-align-left" ItemStyle-CssClass="text-align-left" /> <asp:BoundField DataField="lastName" ReadOnly="true" HeaderText="Last Name" HeaderStyle-CssClass="text-align-left" ItemStyle-CssClass="text-align-left" /> </Columns> </asp:GridView> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:UpdatePanel ID="UpAddEditBene" runat="server"> <ContentTemplate> <div class="modal fade" id="addModalDates" tabindex="-1" role="dialog" aria-labelledby="addModalDates"> <div class="modal-dialog" role="document" style="width: 600px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div> <asp:Label ID="lblBene" runat="server" Style="font-weight: bold; display: block; margin-bottom: 7px">Benefit Name <span style="color: red;">*</span></asp:Label> <asp:DropDownList runat="server" ID="dropBenefits" Width="300px" CssClass="chosen" AppendDataBoundItems="false" required="required"> <asp:ListItem>111</asp:ListItem> <asp:ListItem>222</asp:ListItem> <asp:ListItem>333</asp:ListItem> </asp:DropDownList> </div> <div style="margin-top: 10px;"> <label style="font-weight: bold; display: block;">First Name <span style="color: red;">*</span></label> <asp:TextBox runat="server" ID="txtFname"></asp:TextBox> </div> <div style="margin-top: 10px;"> <label style="font-weight: bold; display: block;">Last Name <span style="color: red;">*</span></label> <asp:TextBox runat="server" ID="txtLName"></asp:TextBox> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <asp:Button runat="server" ID="Button1" class="btn btn-success" Text="Save"></asp:Button> </div> </div> </div> </div> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html>result:
Regards,
Jenifer
