I'm using the Bootstrap modal to display details on button click window.
Now facing a problem whenever the page loading or refreshing the Model is also showing up. How can I prevent this from happening.?
<script type="text/javascript">
function showPopup() {
$('#myModal').modal('show');
}
</script>
ASP
<section class="content">
<div class="row">
<div class="col-lg-12" style="margin: 20px 0 20px;">
<div class="box">
<div class="box-header">
<h3 class="box-title">Orders</h3>
</div>
<!-- /.box-header -->
<div class="box-body table-responsive ">
<asp:ListView ID="lvCustomers" runat="server" >
<LayoutTemplate>
<table id="product-master" class="table table-bordered table-striped">
<tr>
<th>Order #</th>
<th></th>
</tr>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td><%# Eval("OrderNo") %></td>
<td>
<asp:Button ID="btnDetails" runat="server" Text="Products" class="btn btn-primary btn-flat" CommandName="ViewDetails" CommandArgument='<%# Eval("OrderNo") %>' OnCommand="btnDetails_Command" />
</ItemTemplate>
</asp:ListView>
</div>
</div>
</div>
</div>
<div class="modal fade modal-primary" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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>
<h4 class="modal-title">Products List</h4>
</div>
<div class="modal-body">
<div class="box-body table-responsive no-padding">
<%# Eval("OrderNo") %>
<asp:ListView ID="LvDetails" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table id="products" class="table">
<tr>
<th>Order #</th>
</tr>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td><%# Eval("OrderNo") %></td>
</ItemTemplate>
</asp:ListView>
</div>
<!-- /.box-body -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
</section>
Not sure where is calling .showPopup(). That detail is important. But if its being called in any sort of page_load or anything that gets called from page_load then that would cause that problem.
Also if you're calling .showPopup() from some javascript code, then all javascript code gets run when the page is loaded/reloaded. You'd want to include some kind of conditional to make it call .showPopup() only when you need it to.
Do you have something like this in your project?
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
If so it might be the root of your issue, as this js function will set the modal to show on page load. You'll be able to find a lot simply by googling this issue as well.
Related
I have a bootstrap popup displaying student results but it opens and closes immediately. my master page file has following included js files
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
and my webpage has no file included for bootstrap only a jquery timer file
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="css/jquery.countdownTimer.css" rel="stylesheet" type="text/css" />
</asp:Content>
The code for modal is as below
<div class="modal fade" id="myModalTest" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<%-- <button type="button" class="close" data-dismiss="modal">×</button>--%>
<h4 class="modal-title text-center">RESULT</h4>
</div>
<div class="modal-body">
<table class="table table-bordered" style="background-color:White" cellpadding="10" cellspacing="10">
<tr>
<td class="style1">
<p class="text-justify"><asp:Label runat="server" ID="Label1" Text="Test Name :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbltest"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="lblName" Text="Student Name :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbluname"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="lblmks" Text="Total marks scored :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblmarksscored"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="Label2" Text="Total questions attempted :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbltot"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="Label3" Text="Total questions in Test :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbltotalTestQ"></asp:Label>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Button class="btn btn-default" runat="server" ID="btnBackModal" Text="back" OnClick="btnBackModal_Click"/>
</div>
</div>
</div>
</div>
Even the back button's ie btnBackModal OnClick event does not fire. When I debugged the code the control does not go to that event on the server side.
public void btnBackModal_Click(object sender, EventArgs e)
{
if (isSaved == 0)
saveAnswer();
Response.Redirect("StudentHome.aspx");
}
I solved the problem by writing javascript function to open modal instead of using data-toggle attribute for button.
I removed the code
<button input="button" class="btn btn-info" id="btnshowmodal" data-toggle="modal" data-target="#myModalTest">View Result</button>
and instead wrote a javascript function to handle onclick event.
HTML:
<button input="button" class="btn btn-info" id="btnshowmodal" onclick="popup();return false;" runat="server">View Result</button>
JS:
function popup() {
$('[id*="myModalTest"]').modal('show');
}
i'm working on bootstrap modal when the modal is opened it has two buttons one for print the modal content, second to close the modal.
code for modal in aspx page:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PD checks details</h4>
</div>
<div id="printArea" class="modal-body">
<asp:Repeater ID="rptPDC" runat="server">
<HeaderTemplate>
<table class="table table-bordered table-condensed table-hover table-responsive table-striped">
<tr>
<th>IDVC</th>
<th>Check Number</th>
<th>Check Date</th>
<th>AMTRMITHC</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("idvc") %> </td>
<td><%#Eval("checkNo") %> </td>
<td><%#Eval("checkDa") %> </td>
<td><%#Eval("art") %> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="PrintElem('printArea')">Print</button>
<button type="button" id="closemodal" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
the problem is when the user click print button every thing is ok and modal content will be printed, but when the user click in close button to close the modal after print the content nothing happen the modal doesn't closed?
i tried to use the following javascript code to hid the modal:
$("#closemodal").click(function () {
$("#myModal").modal("hide");
});
but also nothing the same problem still?
You no need to bind event to close explicitly. It's inbuilt in bootstrap itself. Look at the sample code carefully at http://getbootstrap.com/javascript/#modals
its working with your code
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PD checks details</h4>
</div>
<div id="printArea" class="modal-body">
<asp:Repeater ID="rptPDC" runat="server">
<HeaderTemplate>
<table class="table table-bordered table-condensed table-hover table-responsive table-striped">
<tr>
<th>IDVC</th>
<th>Check Number</th>
<th>Check Date</th>
<th>AMTRMITHC</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("idvc") %> </td>
<td><%#Eval("checkNo") %> </td>
<td><%#Eval("checkDa") %> </td>
<td><%#Eval("art") %> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="PrintElem('printArea')">Print</button>
<button type="button" id="closemodal" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
https://jsfiddle.net/m1tL84gw/
bootstrap finds the element with attribute data-dismiss="modal" and trigger click on it to close modal dialog
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
You can even check this Demo http://jsfiddle.net/h3WDq/ . Closing of modal is handled by bootstrap itself. Or just double check your code of PrintElem('printArea') function. It might be possible that something inside the function is breaking the close functionality of modal.
Update: Use below script for printing and it will work:
<script>
function PrintElem(elem) {
var toPrint;
toPrint=window.open();
toPrint.document.write(document.getElementById(elem).innerHTML);
toPrint.print();
toPrint.close();
}
</script>
Try getting a console.log('test') when you hit the modal close button, if you get it then you can able to trigger the modal close button. For Eg:
$("#closemodal").click(function () {
console.log('MOdal CLose Layer');
setTimeout(function(){$("#myModal").modal("hide");},1000);
});
I am trying to create a page that has multiple tabs. In each tab, there is a table and on each row there is a button that opens up a modal. My code works fine as long as only one of my tabs have a modal. However, once I have 2 tabs or more with modals, the content of both tabs will show up on one page, instead of being separated into separate tabs.
Here is my code:
edit-profile.ejs:
<ul class="nav nav-tabs tabs-left">
<li class="active">Edit 1</li>
<li>Edit 2</li>
</ul>
<!-- Tab content -->
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="edit1">
<div id="edit1">
<% include ./partials/edit-profile/_edit1%>
</div>
</div>
<div class="tab-pane" id="edit2">
<div id="edit2">
<% include ./partials/edit-profile/_edit2%>
</div>
</div>
<center><button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button></center>
In my _edit1.ejs partial, I have:
<table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit1-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Edit 1 </h4>
</div>
<div class="modal-body">
<% include ./_edit1-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#edit1-table').DataTable();
} );
</script>
In _edit2.ejs, I have similar content:
<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span>User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit2-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Edit 2 </h4>
</div>
<div class="modal-body">
<% include ./_edit2-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#edit2-table').DataTable();
} );
</script>
Can anybody help me figure out why my tables are showing up on the same page when both tabs have modals? The modals have different IDs.
Here, it's working
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs tabs-left">
<li class="active">Edit 1</li>
<li>Edit 2</li>
</ul>
<!-- Tab content -->
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="edit1">
<div id="edit1">
<table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<div id="edit1-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Edit 1 </h4>
</div>
<div class="modal-body">
<% include ./_edit1-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="edit2">
<div id="edit2">
<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> Microsoft</td>
<td> User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit2-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Edit 2 </h4>
</div>
<div class="modal-body">
<% include ./_edit2-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<center>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button>
</center>
</div>
</body>
</html>
I am working on a asp.net c# project which has a input box and a button. Input box has some validation and on successful validation I would like to open a bootstrap modal to fill further information. Is there any way to do this?
I tried using the JavaScript but its not working for me. Below is the code for same.
Default.aspx file code:
<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" data-toggle="modal" data-target="#sell_request" />
Bootstrap Modal code:
<div class="modal fade" id="sell_request" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<a class="btn pull-right" data-dismiss="modal"><span>×</span></a>
<h3 class="register_header"><strong>Request Details</strong></h3>
<h6>Please fill below detials for submit a request</h6>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-success" data-dismiss="modal">Skip</a>
<span class="hidden-xs hidden-sm">OR</span>
<a class="btn btn-success" data-dismiss="modal">Submit</a>
</div>
</div>
</div>
</div>
CS Code on button click:
protected void btnSell_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}
I took your code as is and made the following changes:
Removed data-toggle="modal" data-target="#sell_request" from btnSell
Added CDN references to jQuery,bootstrap.js and bootstrap.css (in that order).
It works now!
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSell_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}
.ASPX:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="modal fade" id="sell_request" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<a class="btn pull-right" data-dismiss="modal"><span>×</span></a>
<h3 class="register_header"><strong>Request Details</strong></h3>
<h6>Please fill below detials for submit a request</h6>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-success" data-dismiss="modal">Skip</a>
<span class="hidden-xs hidden-sm">OR</span>
<a class="btn btn-success" data-dismiss="modal">Submit</a>
</div>
</div>
</div>
</div>
<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" />
</form>
</body>
Output:
Your bootstrap modal .aspx code looks good as far as I can tell. I am doing something similar, but I have the javascript defined in my .aspx file, and I just call it from code behind using script manager. Here is a sample of my code from default.aspx.cs:
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openContactModal();", true);
This calls a java script function that is defined in default.aspx:
<!--Modal Popup for Contacts-->
<script type="text/javascript">
/* Allows us to open and close the Address Book modal from code behind */
function openContactModal() {
$('#contactModal').modal('show');
}
function closeContactModal() {
$('#contactModal').modal('hide');
}
</script>
You can substitute openSellRequest() and #sell_request into this code and see if it works for you.
EDIT: Here is a sample of the default.aspx code for my modals - there are several extra elements in here, although I am not sure that they are required:
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<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="contactModalLabel">Contact Info for <asp:Label ID="lblContactHeaderName" runat="server"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Table ID="contactTable" runat="server" Width="95%">
<asp:TableRow>
... your content here ...
</asp:TableRow>
</asp:Table>
</div>
<div class="modal-footer">
<asp:Button ID="deleteContact" CssClass="btn btn-danger" runat="server" Text="Delete" OnClick="deleteContact_Click" Visible="false" />
<asp:Button ID="editContact" CssClass="btn btn-primary" runat="server" Text="Edit" onclick="editContact_Click" />
<asp:Button ID="saveContact" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="saveContact_Click" Visible="false" />
<asp:Button ID="cancelContact" CssClass="btn btn-default" data-dismiss="modal" runat="server" Text="Close" />
</div>
</div>
</div>
</div>
And here is my button code:
<asp:Button ID="btnShowContact" CssClass="btn btn-primary btn-sm dont-print" runat="server" OnClick="showContact" Text="Show Contact Details" data-toggle="modal" data-target="#contactModal" />
I have 3 pop ups inside an UpdatePanel. The first pop up contains RadioButtonList selecting which generates the RadioButtonList in the 2nd Pop Up. Upon selecting the radio button from 2nd pop populates the CheckBoxList "chkListSafetyStandards". On clicking the close button of this 3rd pop up I wish to get the text and value of the check boxes that are checked.
The ASPX Markup is as follows:
<!--MODAL POP FOR SELECTING OBS ACTION TAKEN [END]-->
<asp:UpdatePanel ID="updtPnlPopUpsObsCatAndSubCat" runat="server">
<ContentTemplate>
<!--MODAL POP FOR SELECTING OBS CATEGORY [START]-->
<asp:LinkButton ID="lnkBtnObservationCategory" PostBackUrl="#" CssClass="btn btn-large btn-primary"
Style="display: none;" data-toggle="modal" data-backdrop="static" data-keyboard="false"
data-target="#modalSelectObsCat" runat="server"></asp:LinkButton>
<div class="modal fade" id="modalSelectObsCat">
<div class="modal-dialog modal-dialog-center">
<div class="modal-content">
<div class="modal-header bg-blue">
<div class="bootstrap-dialog-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"> × </span></button>
<div class="bootstrap-dialog-title">
<label>
Select Observation Category
</label>
</div>
</div>
</div>
<div class="modal-body">
<div class="bootstrap-dialog-body">
<div class="bootstrap-dialog-message">
<div class="row modalBodyHeightForVisitedWith">
<div class="col-md-12 col-xs-12">
<asp:RadioButtonList ID="rdbListObservationCategory" onclick="getObsCategory();showLoader();closeModal();return true;"
CssClass="radio-list-custom" OnSelectedIndexChanged="rdbListObservationCategory_SelectedIndexChanged"
AutoPostBack="true" RepeatLayout="Flow" RepeatDirection="Vertical" runat="server">
</asp:RadioButtonList>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<!-- /.modal -->
<!--MODAL POP FOR SELECTING OBS CATEGORY [END]-->
<!--MODAL POP FOR SELECTING OBS SUB CATEGORY [START]-->
<asp:LinkButton ID="lnkBtnObservationSubCategory" PostBackUrl="#" CssClass="btn btn-large btn-primary"
Style="display: none;" data-toggle="modal" data-backdrop="static" data-keyboard="false"
data-target="#modalSelectObsSubCat" runat="server"></asp:LinkButton>
<%-- <a id="lnkBtnObservationSubCategory" href="#" class="btn btn-large btn-primary" style="display: none;"
data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#modalSelectObsSubCat" />--%>
<div class="modal fade" id="modalSelectObsSubCat">
<div class="modal-dialog modal-dialog-center">
<div class="modal-content">
<div class="modal-header bg-blue">
<div class="bootstrap-dialog-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"> × </span></button>
<div class="bootstrap-dialog-title">
<label>
Select Observation Sub Category
</label>
</div>
</div>
</div>
<div class="modal-body">
<div class="bootstrap-dialog-body">
<div class="bootstrap-dialog-message">
<div class="row modalBodyHeightForVisitedWith">
<div class="col-md-12 col-xs-12">
<asp:RadioButtonList ID="rdbListObservationSubCategory" onclick="getObsSubCategory();closeModal();"
CssClass="radio-list-custom" OnSelectedIndexChanged="rdbListObservationSubCategory_SelectedIndexChanged"
AutoPostBack="true" RepeatLayout="Flow" RepeatDirection="Vertical" runat="server">
</asp:RadioButtonList>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<!-- /.modal -->
<!--MODAL POP FOR SELECTING OBS SUB CATEGORY [END]-->
<!--MODAL POP FOR SELECTING OBS SAFETY STANDARDS [START]-->
<asp:LinkButton ID="lnkBtnSafetyStandards" PostBackUrl="#" CssClass="btn btn-large btn-primary"
Style="display: none;" data-toggle="modal" data-backdrop="static" data-keyboard="false"
data-target="#modalSelectSafetyStandards" runat="server"></asp:LinkButton>
<%-- <a id="lnkBtnObservationSubCategory" href="#" class="btn btn-large btn-primary" style="display: none;"
data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#modalSelectObsSubCat" />--%>
<div class="modal fade" id="modalSelectSafetyStandards">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-blue">
<div class="bootstrap-dialog-header">
<button type="button" class="close" data-dismiss="modal" onclick="getObsSafetyStandards();closeModal();"
aria-label="Close">
<span aria-hidden="true"> × </span></button>
<div class="bootstrap-dialog-title">
<label>
Select Safety Standards
</label>
</div>
</div>
</div>
<div class="modal-body">
<div class="bootstrap-dialog-body">
<div class="bootstrap-dialog-message">
<div class="row modalBodyHeightForVisitedWith">
<div class="col-md-12 col-xs-12">
<asp:CheckBoxList ID="chkListSafetyStandards" CssClass="chk-list-custom" runat="server">
</asp:CheckBoxList>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<!-- /.modal -->
<!--MODAL POP FOR SELECTING OBS SAFETY STANDARDS [END]-->
</ContentTemplate>
</asp:UpdatePanel>
Upon selecting the checkboxes the [checked="checked"] markup does not reflect on the page and so I am unable to capture the checked checkbox using JavaScript. I cannot remove the UpdatePanel as that causes the entire page to reload loading the first tab (I am using this check box in the 2nd Tab). Please suggest a possible solution.
Exmaple of how you can get checked values:
<asp:CheckBoxList ID="chkListSafetyStandards" CssClass="chk-list-custom" runat="server">
<asp:ListItem Text="option 1"></asp:ListItem>
<asp:ListItem Text="option 2" Selected="True"></asp:ListItem>
<asp:ListItem Text="option 3"></asp:ListItem>
</asp:CheckBoxList>
<script>
function getChecked() {
var checked = $('input[id*="chkListSafetyStandards"]:checked');
checked.each(function (index, value) {
console.log($(value).attr("id"));
});
}
</script>