I'm developing a web application using asp.net and bootstrap v3. On my page, there is a modal which contains two twxt boxes and an asp dropdownlist. My problem is that the dropdownlist SelectedIndexChanged is not firing. When I put a dropdownlist outside the Modal, its SelectedIndexChanged fires without any problem. I have set the EnableViewState="true" for the Page and the DDL. I have also set AutoPostBack = "True". Note: The page postback when i change the selected item in the DDL inside the modal but it don't go to the SelectedIndexChanged event as i have put a break point and it doesn't work. I have notices also that the HTML of the DDL (Option, Select) is also that the (Selected="Selected") property is always set for the first element.
this is how I loadt the DDL
protected void Page_Load(object sender, EventArgs e)
{
if(!isPostBack)
{
DataSet ds2 = MainModule.GetTableSQLBySP(new Dictionary<string, string>(), "SP_Stand_GetSectorTypes");
ddlMdlAreaInvitedSecType.DataSource = ds2.Tables[0];
ddlMdlAreaInvitedSecType.DataValueField = "Set_ID";
ddlMdlAreaInvitedSecType.DataTextField = "Set_LongName";
ddlMdlAreaInvitedSecType.DataBind(); }
}
and this is the Modal code
<div class="modal fade" id="modalAreaInvitedSearch" style="margin-top: 155px" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel2">Please enter product data </h4>
</div>
<div class="modal-body" style="height:auto">
<input type="text" class="form-control" placeholder="MM" style="display: none" runat="server" id="Text1" />
<div class="form-group">
<label for="inputEmail1" class="col-lg-3 control-label">Short Name</label>
<div class="col-lg-8">
<asp:TextBox enableviewstate="true" class="form-control " runat="server" id="txtMdlAreaInvitedShortName" />
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-lg-3 control-label">Long Name</label>
<div class="col-lg-8">
<asp:TextBox enableviewstate="true" class="form-control " runat="server" id="txtMdlAreaInvitedLongName" />
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-lg-3 control-label">Sector Type</label>
<div class="col-lg-8">
<asp:DropDownList EnableViewState="true" class="form-control" OnSelectedIndexChanged="ddlMdlAreaInvitedSecType_SelectedIndexChanged" AutoPostBack="true" runat="server" ID="ddlMdlAreaInvitedSecType" />
</div>
</div>
<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="grdMdlAreaInvitedResult" runat="server" HorizontalAlign="Center"
AutoGenerateColumns="false" AllowPaging="true"
DataKeyNames="Sec_Id" CssClass="table table-hover table-striped table-bordered centerGridHead">
<Columns>
<asp:TemplateField HeaderText="" ShowHeader="false" ItemStyle-Width="17%">
<ItemTemplate>
<%--<asp:LinkButton id="btnRemove" runat="server" CausesValidation="false" Text="<i aria-hidden='true' class='icon-plus'></i>" CssClass="btn btn-info btn-xs "/>--%>
<asp:CheckBox ID="chkGrdMdlAreaInvitedResult" runat="server" CssClass="btn btn-primary btn-xs " />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Sec_Id" HeaderText="Sec_Id" Visible="false" />
<asp:BoundField DataField="Sec_ShortName" HeaderText="Sector" />
<asp:BoundField DataField="Sec_LongName" HeaderText="Sector Long Name" />
<asp:BoundField DataField="Sec_Id_Master" HeaderText="Sec_Id_Master" Visible ="false" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnMdlAreaInvitedSearch" EventName="Click" />
<%-- <asp:AsyncPostBackTrigger ControlID="ddlMdlAreaInvitedSecType" EventName="SelectedIndexChanged" />--%>
</Triggers>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-lg-12">
<asp:Button ID="btnMdlAreaInvitedClear" OnClientClick="clickCodeBtn()" runat="server" class="btn btn-primary col-lg-2" Text="Clear"></asp:Button>
<asp:Button ID="btnMdlAreaInvitedGet" OnClientClick="clickCodeBtn()" runat="server" OnClick="btnMdlAreaInvitedGet_Click" class="btn btn-primary col-lg-2" Text="Get"></asp:Button>
<asp:Button ID="btnMdlAreaInvitedSearch" UseSubmitBehavior="false" runat="server" OnClick="btnMdlAreaInvitedSearch_Click" class="btn btn-primary col-lg-2" Text="Search"></asp:Button>
<asp:Button ID="btnMdlAreaInvitedClose" OnClientClick="clickCodeBtn()" runat="server" class="btn btn-primary col-lg-2" Text="Close"></asp:Button>
</div>
</div>
</div>
and this is how i open the Modal
function popAreaInvitedSearch() {
$('#modalAreaInvitedSearch').appendTo('body').modal({
show: true,
keyboard: false,
backdrop: 'static'
});
}
any help will be appreciated.
