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 : 2080 | 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] Silver | 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
My Blog

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

Posted by: A2H on: 6/25/2016 [Member] [MVP] Silver | 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
My Blog

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

Posted by: A2H on: 6/25/2016 [Member] [MVP] Silver | 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
My Blog

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

Login to post response