I am trying to use ImageButton to fire Bootstrap modal popup but it is not firing for some reason. Please help. Here is my code
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/img/Delete.png" CausesValidation="false" ToolTip="Delete" data-toggle="modal" data-target="#myModal" />
here is my modal popup code
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<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">Delete Confirmation</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMessage" runat="server" />
</div>
<div class="modal-footer">s
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn btn-default" CausesValidation="false" >
<i aria-hidden="true" class="glyphicon glyphicon-ok"></i>No
</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="btn btn-primary" CausesValidation="false" >
<i aria-hidden="true" class="glyphicon glyphicon-ok"></i>Yes
</asp:LinkButton>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
here is JS
<script type="text/javascript">
function ShowPopup2() {
$("#btnShowPopup2").click();
}
</script>
Related
Good day!
I have been following this post for launching a bootstrap modal popup from my code behind but unfortunately it is not working.
Script
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
Button
<asp:LinkButton class="alert alert-warning" ID="LinkButton1" runat="server" OnClick="UpdateItem_click" CommandArgument='<%# Eval("Id") %>' >Update</asp:LinkButton>
Code Behind
protected void UpdateItem_click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}
Modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" 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="myModalLabel">title
</h4>
</div>
<div class="modal-body">
<asp:TextBox runat="server" ID="Username_Update" CssClass="form-control" />
<asp:TextBox runat="server" ID="bookId2" CssClass="form-control" />
<input type="text" runat="server" id="Username_Update2" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
close
</button>
<button type="button" class="btn btn-primary">
save
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
Instead of using a Button just like from the post, I used a LinkButton because I wanted a certain value to be passed in my code behind then select all data needed and populate the modal which will then be launched using this code behind code.
Unfortunately, the modal is not showing and I have no idea whether the code is working properly or not.
Thanks in advance
Ok. I have found the problem. I found out(with the help of a colleague) that my button's OnClick function was not working. Since I have a Validator in my page, I've tried adding each button with this code CausesValidation="false" and now the code works perfectly.
For my ASP Webforms Application I use a Modal from Bootstrap for the settings.
<asp:Button CssClass="btn btn-default" data-toggle="modal" data-target="#myModal" OnClientClick="return false;" runat="server" Text="Einstellungen" />
As you can see, I already have to prevent the Button for postback. Because if I click the button the Modal opens, postback starts and the Modal close.
So this problem I fixed.
But now if I open the modal and wanna click a Button in this Modal:
<asp:Button runat="server" ID="dropbox" Text="Mit Dropbox anmelden" CausesValidation="false" OnClick="dropboxButton" CssClass="btn btn-info" />
The Modal close... But I want that the user sees that the Accountinformation from him filled in.
Also I have a field for adding entries after clicking the "+" Button. After every click for adding, the modal will be closed...
I already tried data-backdrop="static" and something with Javascript and e.preventDefault();
Any ideas?
Clicking a server side ASP.NET Button control will cause a PostBack and your page will be re-loaded, therefore the modal will be closed.What you can do is call the code below in the click event to re-open the modal after the click event:
Code behind:
protected void btnClickMe_Click(object sender, EventArgs e)
{
lblTest.Text = DateTime.Now.ToString("dd MMM yyyy - HH:mm:ss");
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "showModal();", true);
}
.ASPX:
<head>
<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" />
<script type="text/javascript">
function showModal() {
$('#myModal').modal('show');
}
$(function () {
$("#btnShowModal").click(function () {
showModal();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnShowModal" value="Show Modal" />
<div id="myModal" class="modal fade"">
<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="myModalLabel">Modal popup</h4>
</div>
<div class="modal-body">
<asp:Label ID="lblTest" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="btnClickMe" runat="server" Text="Click Me" OnClick="btnClickMe_Click" />
</div>
</div>
</div>
</div>
</form>
</body>
Why not trying this
<asp:Button ID="btnSpareRequisition" CssClass="btn btn-primary" runat="server" Text="Request Spare" ClientIDMode="Static" data-toggle="modal" data-target="#requestSpareModalId" OnClientClick="return false"/>
Here is my complete code
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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.6/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<%-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>--%>
<asp:Button ID="btnSpareRequisition" CssClass="btn btn-primary" runat="server" Text="Request Spare" ClientIDMode="Static" data-toggle="modal" data-target="#myModal" OnClientClick="return false" />
<!-- Modal -->
<div class="modal fade" 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">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
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>
I am trying to hide a bootstrap alert via JavaScript. I have not been able to accomplish this yet... Here is my code I have :
<div class="bs-example text-center " id="myAlert" runat="server" visible="false">
<div class="alert alert-warning">
×My message here
</div>
</div>
<asp:Button ID="btnClose" data-dismiss="modal" runat="server" Text="Close" class="btn btn-danger" OnClientClick="Clear();"/>
function Clear() {
$(this).closest('#myAlert').hide();
}
try this
$('#myAlert').modal('toggle');