Why Bootstrap modal is closing after bsave button click in asp.net [Resolved]

Posted by Cpatil1000 under ASP.NET on 6/24/2016 | Points: 10 | Views : 919 | Status : [Member] | Replies : 3
Hi,
I have developed a form for comment confirmation. when i click add comment
my modal is going close. and also when i click save button is not checking validation
in asp.net
hi,
<asp:Content ID="Content1" ContentPlaceHolderID="cHead" runat="Server">
<script type="text/javascript">
$(document).ready(function () {
$('#<%=btnShowPopup.ClientID%>').live('click', function (e) {
$("#myModal").modal('show');
});
});
</script>
<script type="text/javascript">
function ValidComment() {
var Comment = document.getElementById('<%=btnShowPopup.ClientID%>').value;
if (Comment == "") {
alert("Hello");
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mBody" runat="Server">
<asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="bSave" />
<asp:PostBackTrigger ControlID="bNewComment" />
<asp:PostBackTrigger ControlID="btnShowPopup" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnShowPopup" runat="server" Text="Open Modal" OnClick="btnShowPopup_Click"
class="btn btn-primary btn-lg" />
<div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Confirmation</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 form-group">
<b>Comments</b>
<asp:Button ID="bNewComment" CssClass="btn btn-info" Text="Add Comment" runat="server"
data-toggle="modal" data-target="#myModal" OnClick="bNewComment_Click" />
</div>
</div>
<div class="row" id="dComment" runat="server" visible="false">
<div class="col-sm-6 form-group">
<b>Comments</b>
<asp:TextBox ID="tbComment" TextMode="MultiLine" Width="500px" runat="server" placeholder="Enter Comments.."
class="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="bClose" runat="server" CssClass="btn btn-primary" data-dismiss="modal"
Text="Close" />
<asp:Button ID="bSave" runat="server" CssClass="btn btn-primary&




Responses

Posted by: A2H on: 6/25/2016 [Member] [MVP] Bronze | Points: 50

Up
0
Down

Resolved
You wrote 'when i click add comment my modal is going close '
Problem here is your Addcomment button is having onclick event attached and this caused a postback to occur. This is reason modal popup is getting closed. As a solution what you can do is to open the popup from server side code also like below
Add a function like below to your page
//Add the function below
function openpopup() {
$("#myModal").modal('show');
}

Then call the function from serverside button click event
 protected void bNewComment_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "script", "openpopup();", true);
}


Complete Modified Code
 <asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="bSave" />
<asp:PostBackTrigger ControlID="bNewComment" />
<asp:PostBackTrigger ControlID="btnShowPopup" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnShowPopup" runat="server" Text="Open Modal"
class="btn btn-primary btn-lg" />
<div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 form-group">
<b>Comments</b>
<asp:Button ID="bNewComment" CssClass="btn btn-info" Text="Add Comment" runat="server"
data-toggle="modal" data-target="#myModal" OnClick="bNewComment_Click" />
</div>
</div>
<div class="row" id="dComment" runat="server" style="display: none">
<div class="col-sm-6 form-group">
<b>Comments</b>
<asp:TextBox ID="tbComment" TextMode="MultiLine" Width="500px" runat="server" placeholder="Enter Comments.."
class="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="bClose" runat="server" CssClass="btn btn-primary" data-dismiss="modal"
Text="Close" />
<asp:Button ID="bSave" runat="server" CssClass="btn btn-primary" Text="Save" OnClientClick="ValidComment()" />
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>


Modified Scripts

<script type="text/javascript">
$(document).ready(function () {
$('#<%=btnShowPopup.ClientID%>').on('click', function (e) {
$("#myModal").modal('show');
e.preventDefault();
});

});
function ValidComment() {
//Here you need to check the Textbox value instead of button
var Comment = document.getElementById('<%=tbComment.ClientID%>').value;
if (Comment == "") {
alert("Hello");
}
}
//Add the function below
function openpopup() {
$("#myModal").modal('show');
}
</script>



Thanks,
A2H
Please mark my reply as answer if it helps to resolve your problem

Cpatil1000, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 6/25/2016 [Member] [MVP] Bronze | Points: 25

Up
0
Down
There are couple of issues here so I will explain each is diferent thread so that it will be easy for you to understand

You wrote "when i click save button is not checking validation "
The reason for this issue is you have not attached the function using onclientclick of save button. You need to call the javasciipt function like below
<asp:Button ID="bSave" runat="server" CssClass="btn btn-primary" Text="Save" OnClientClick="ValidComment()" />


Thanks,
A2H
Please mark my reply as answer if it helps to resolve your problem

Cpatil1000, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 6/25/2016 [Member] [MVP] Bronze | Points: 25

Up
0
Down
Also a humble request from me, when you post your code.Please post complete code. You have missed some part of last section. I have to guess and finish those missing parts inorder to run the code in sample application

Thanks,
A2H
Please mark my reply as answer if it helps to resolve your problem

Cpatil1000, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response