Modal body disappears upon button click

Modal body disappears upon button click - javascript

I am facing an issue with modal. i have a modal that serves as sign up form and after I fill in the needed data to create account and click submit, the modal disappears. I later added a line of code on the server side to keep the modal appearing but it did not work. Please I need help. Here is my code:
<button type="button" runat="server" class="btn btn-primary navbar-btn" data-toggle="modal" data-target="#MyModal">New User?</button>
<!-- Modal -->
<div class="modal" 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">JosCheck - Sign Up</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="email">Email Address</label>
<asp:TextBox ID="mailtxtbx" CssClass="form-control" Width="300px" runat="server" placeholder="Email.." TextMode="email"></asp:TextBox>
<br />
</div>
<div class="form-group">
<label for="password">Password</label>
<asp:TextBox ID="pass" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
<br />
</div>
<div class="form-group">
<label for="Confirm_password">confirm Password</label>
<asp:TextBox ID="conpass" CssClass="form-control" Width="300px" runat="server" placeholder="Confirm Password" TextMode="password"></asp:TextBox>
<asp:CheckBox ID="check1" runat="server" />
<br />
</div>
<div class="form-submit">
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
</div>
<div>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Label ID="Label2" runat="server"></asp:Label>
<asp:Label ID="Label3" runat="server"></asp:Label>
<asp:Label ID="Label4" runat="server"></asp:Label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
SERVER SIDE CODE (aspx.cs)
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "$('#MyModal').modal('show')", true);

Related

how to create a bootstrap card using jquery/javascript?

I have a card created and defined in HTML. I want to get rid of it in the HTML and therefore create the same card using jquery/javascript, that way a new one can be created on the click of a button.
<div id="divEntryPanel" class ="col-sm-6" style="display:none">
<div class="card aircat-card-border">
<div class="card-header bg-info">
<h5 style="font-weight: bold">Additional Entry</h5>
</div>
<div id="pnlEntry" class="bg-secondary">
<div class="pt-2 form-group">
<asp:Label CssClass="row pl-3" runat="server" Text="Intended Action: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea1" runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="Intended completion date: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea2" runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="extra details: ">
<asp:Label CssClass="text-dark small" runat="server" Text="(200 Character Limit )"></asp:Label>
</asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea3" runat="server" cols="50" rows="2" maxlength="200"></textarea>
<div id="EntrySaveBtn" class="col-md-12 float-right">
<asp:Label runat="server" Text="Click to save the entry to this alert:"></asp:Label>
<a id="btnSaveEntry" class="btn btn-success btn-sm ml-2">Save</a>
</div>
</div>
</div>
</div>
</div>

Something like this should work.
In your HTML:
<div id="divEntryPanel" class ="col-sm-6" style="display:none">
</div>
<button id="myBtn">Click me</button>
In your javascript
const card = `
<div class="card aircat-card-border">
<div class="card-header bg-info">
<h5 style="font-weight: bold">Additional Entry</h5>
</div>
<div id="pnlEntry" class="bg-secondary">
<div class="pt-2 form-group">
<asp:Label CssClass="row pl-3" runat="server" Text="Intended Action: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea1"
runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="Intended completion date: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea2"
runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="extra details: ">
<asp:Label CssClass="text-dark small" runat="server" Text="(200 Character Limit )">
</asp:Label></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea3"
runat="server" cols="50" rows="2" maxlength="200"></textarea>
<div id="EntrySaveBtn" class="col-md-12 float-right">
<asp:Label runat="server" Text="Click to save the entry to this alert:"></asp:Label>
<a id="btnSaveEntry" class="btn btn-success btn-sm ml-2">Save</a>
</div>
</div>
</div>
</div>
`
const button = document.getElementById("myBtn")
const mainDiv = document.getElementById("divEntryPanel")
button.onclick = function () {
mainDiv.innerHTML += card
}

Bootstrap modal not working properly

I am using bootstrap modal for one of the comment/feedback forms, It works working sometime and sometime it only shows the black overlay & no modal.
Not sure where it is wrong as i don't get any error in the console also.
I am facing two issues, When it works then it closes the form when i click the save button without saving or validating.
and second issue with i am facing now is that when i click on button/link to open the modal it only show the black overlay and no modal window
<a id="btnPostComment" class="btn btn-com-po" >POST COMMENT</a>
$(window).load(function() {
$("#btnPostComment").click(function() {
$("#modalPostComment").modal({
backdrop: 'static',
keyboard: false
});
});
});
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="modalPostComment">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="category-headding ">POST A COMMENT</h3>
</div>
<div class="modal-body" style="padding:25px;">
<asp:UpdatePanel ID="updPanelForm" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlForm" runat="server">
<div class="row">
<div class="col-sm-12">
<p>[*] required field.</p>
<asp:ValidationSummary ID="vsCommentForm" runat="server" CssClass="validation-sum" ValidationGroup="vgCommentForm" />
<asp:RequiredFieldValidator ID="rfvFullName" runat="server" ErrorMessage="Name field can't be left blank" CssClass="css-validator" ControlToValidate="txtFullName" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvtxtEmail" runat="server" ErrorMessage="Email field can't be left blank" CssClass="css-validator" ControlToValidate="txtEmail" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rfevtxtEmail" runat="server" ErrorMessage="Enter correct email" ControlToValidate="txtEmail" CssClass="css-validator" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="vgCommentForm"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="rfvddlCountry" runat="server" InitialValue="0" ErrorMessage="Select Country" CssClass="css-validator" ControlToValidate="ddCountry" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfMessage" runat="server" ErrorMessage="Message field can't be left blank" CssClass="css-validator" ControlToValidate="txtMessage" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtValidate" CssClass="hidden" runat="server"></asp:TextBox>
</div>
<div class="col-sm-12">
<span class="input">
<asp:TextBox ID="txtFullName" CssClass="input_field" runat="server"></asp:TextBox>
<label class="input_label" for="input-1">
<span class="input_label_content" data-content="Full Name">Full Name *</span>
</label>
</span>
</div>
<div class="col-sm-12">
<span class="input">
<asp:TextBox ID="txtEmail" CssClass="input_field" runat="server"></asp:TextBox>
<label class="input_label" for="input-2">
<span class="input_label_content" data-content="Email Address">Email Address *</span>
</label>
</span>
</div>
<div class="col-sm-12">
<span class="input">
<asp:TextBox ID="txtMessage" runat="server" CssClass="input_field" TextMode="MultiLine" MaxLength="10" TabIndex="4"></asp:TextBox>
<label class="input_label" for="message">
<span class="input_label_content" data-content="Your Email">Your Message *</span>
</label>
</span>
</div>
<div class="col-sm-12">
<asp:Button ID="btnSaveComment" CssClass="btn btn-stylex" runat="server" Text="Post Your Comment" CausesValidation="true" ValidationGroup="vgCommentForm" UseSubmitBehavior="False" OnClientClick="ValidateCommentForm(this);" OnClick="btnSaveComment_Click"
/>
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlMessage" runat="server" Visible="false">
<asp:Label ID="lblSuccess" CssClass="lbl-com-success" runat="server" Text="Comment posted"></asp:Label>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>

Try this
Bump for a bit of an explanation? I thought it might have been because jQuery wasn’t being loaded until later...
I’ve seen the workarounds but i’d like to understand in case I come across this again

Boostrap Modal Popup is not showing after page referesh using asp.net C#

I want to display modal popup if user is not exist but modal popup is disappearing if user is not exist.
<i class="fa fa-key" aria-hidden="true" style="margin-right: 8px;"></i>Login
<div id="login-form">
<div class="modal-body">
<asp:TextBox ID="txt_UserName" runat="server" ValidationGroup="login" CssClass="form-control" autocomplete="off" placeholder="Enter Email ID"></asp:TextBox>
<div class="error-msg text-left">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Please Specify Your Email Id" ControlToValidate="txt_UserName" ValidationGroup="gr_in" ForeColor="Red"></asp:RequiredFieldValidator></div>
<asp:TextBox ID="txt_Password" runat="server" CssClass="form-control" ValidationGroup="login" TextMode="Password" autocomplete="off" placeholder="Enter Password"></asp:TextBox>
<div class="error-msg text-center">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter your Password" ControlToValidate="txt_UserName" ValidationGroup="gr_in" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
<div class="error-msg text-center">
<asp:Label ID="lbl_errormsg" runat="server" Visible="false" ForeColor="red"></asp:Label>
</div>
</div>
<div class="modal-footer">
<div>
<asp:Button ID="btn_Login" runat="server" Text="Login" OnClick="btn_Login_Click" CssClass="btn btn-primary btn-lg btn-block" ValidationGroup="gr_in" />
</div>
<div>
<asp:Button ID="btn_LostPassword" runat="server" Text="Forgot password?" OnClick="btn_LostPassword_Click" CssClass="btn btn-link" />
<asp:Button ID="btn_Register" runat="server" Text="New User?" OnClick="btn_Register_Click" CssClass="btn btn-link pull-right" />
</div>
</div>
</div>
Below is button Click code, I want to show modal popup if status is not success, I wrote script code in else condition but pop pup is showing, I tring If user is not exist then modal pop up should not go.
protected void btn_Login_Click(object sender, EventArgs e)
{
string StatusMsg = string.Empty;
bo.Para1 = txt_UserName.Text;//UserName
bo.Para2 = txt_Password.Text;//Password
bo.Para3 = this.Page.Request.ServerVariables["REMOTE_ADDR"]; // SystemIp
HttpBrowserCapabilities browserInfo = Request.Browser;
bo.Para4 = browserInfo.Browser; //BrowserType
bo.Para5 = browserInfo.Version;//Browser Version
bo.Para6 = browserInfo.Platform;//OperatingSystem
bl.Get_User_Login(bo, out LoginDetails, out StatusMsg);
if (StatusMsg == "Success")
{
ShowResult();
}
else
{
lbl_errormsg.Visible = true;
lbl_errormsg.Text = StatusMsg;
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "none", "<script>$('#login-modal').modal('show');</script>", true);
}
}

How to Save Modal Popup values in Main Page

I am trying to save the data which is entered in the modal popup to the main page.
here is the code for the main page.
Company Info
<div id="AddMoreDetails">
<div class="table" runat="server" id="AddMore">
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<table style="width:200%;">
<tr>
<td>Company Name</td>
<td>Company Address</td>
<td>Contact</td>
<td>Company HO</td>
<td>HO Contact</td>
<td>Email ID</td>
</tr>
<tr>
<td>
<textarea id="TextArea1"></textarea>
</td>
<td>
<textarea id="TextArea2"></textarea>
</td>
<td>
<textarea id="TextArea3"></textarea>
</td>
<td>
<textarea id="TextArea4"></textarea>
</td>
<td>
<textarea id="TextArea5"></textarea>
</td>
<td>
<textarea id="TextArea6"></textarea>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-12" style="text-align: right">
<div class="row">
<div class="col-md-12">
Here is the code for Modal popup window
<div id="myModalPopup" class="modal fade" role="dialog" data-keyboard="false"> // modal popup window
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color: orangered; border-top-left-radius: 4px; border-top-right-radius: 4px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Company Details</h4>
</div>
<div class="modal-body">
<asp:Panel ID="Panel2" runat="server" class="tab-pane">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4">
<asp:Label runat="server" ID="lblNmeComp" Text="Name of Company" AssociatedControlID="txtNmeComp" CssClass="control-label" />
<asp:TextBox runat="server" ID="txtNmeComp" CssClass="form-control" />
<br />
</div>
<div class="col-sm-4">
<asp:Label runat="server" ID="lblAdrComp" Text="Adress of Company" AssociatedControlID="txtAdrComp" CssClass="control-label" />
<asp:TextBox runat="server" ID="txtAdrComp" CssClass="form-control" />
<br />
</div>
<div class="col-sm-4">
<asp:Label runat="server" ID="lblConctComp" Text="Contact Number" AssociatedControlID="txtConctComp" CssClass="control-label" />
<asp:TextBox runat="server" ID="txtConctComp" CssClass="form-control" />
<br />
</div>
</div>
</div>
Here is the button code for opening Modal popup window
<button id="AddMore_Button" class="btn btn-primary" data-target="myModalPopup">Add More</button> </div>
Here is the button code for saving data from modal popup window.
<button type="button" runat="server" onclick="savepopupdata()">
To get the values from modal popup window I have written a javascript function.
<script type="text/javascript"> //Java script function
function savepopupdata()
{
document.getElementById.valueOf(txtNmeComp) = document.getElementById.valueOf(TextArea1);
document.getElementById.valueOf(txtAdrComp) = document.getElementById.valueOf(TextArea2);
document.getElementById.valueOf(txtConctComp) = document.getElementById.valueOf(TextArea3);
}
</script>
But unfortunately it is not saving the data. Any wrong in this code.

We can get input elements values by it attributes only like ID, Class ...
try with
document.getElementById("TextArea1").value;
...

if you want to find elements by ids and change their values, then try this code
function savepopupdata() {
document.getElementById('txtNmeComp').value = document.getElementById('TextArea1').value;
document.getElementById('txtAdrComp').value = document.getElementById('TextArea2').value;
document.getElementById('txtConctComp').value = document.getElementById('TextArea3').value;
}

My div disappears after first execution

<link rel="Stylesheet" type="text/css" href="Styles/EIStyling.css" />
</head>
<body>
<form id="BookOperator" runat="server" visible="True">
<asp:HiddenField ID="hfGlobal_UserSelectedStartBookingTime" runat="server" ></asp:HiddenField>
<asp:HiddenField ID="hfGlobal_UserSelectedEndBookingTime" runat="server" ></asp:HiddenField>
<asp:HiddenField ID="hfGlobal_SelectedUserID" runat="server" ></asp:HiddenField>
<asp:HiddenField ID="hfSelectedBookingCancelID" Value="0" runat="server" ></asp:HiddenField>
<ul>
<li class="ul" ><a href="Home.aspx" class="Mnu" >Home</a></li>
<li class="ul" ><a class="Mnu" style="cursor:pointer" >Bookings</a>
<ul class="dropdown">
<li class="li" ><a href="BookVehicle.aspx" class="MnuItem" >Book Vehicle</a></li>
</ul>
</li>
<li class="ul" ><a class="Mnu" style="cursor:pointer" >Account </a>
<ul class="dropdown">
<li class="li" ><a href="Change_Password.aspx" class="MnuItem" >Change Password</a></li>
<li class="li" ><a id="LogOut" runat="server" href="LogIn.aspx" onclick="fncLogout()" class="MnuItem" >Log Out</a></li>
</ul>
</li>
</ul>
<div class="divCalPosition">
<asp:Calendar ID="clndrBookings" runat="server"
BackColor="White" BorderColor="Black" Font-Names="Verdana"
Font-Size="8pt" ForeColor="Black" Height="180px"
onselectionchanged="Calendar1_SelectionChanged" Width="230px"
FirstDayOfWeek="Monday" BorderStyle="Solid" CellSpacing="1"
NextPrevFormat="ShortMonth">
<DayHeaderStyle Font-Bold="True" Height="8pt" Font-Size="8pt"
ForeColor="#333333" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Size="9pt" ForeColor="White" Font-Bold="True" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TitleStyle BackColor="#333399"
Font-Bold="True" Font-Size="11pt" ForeColor="White" BorderStyle="Solid"
Height="12pt" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
</asp:Calendar>
</div>
<div id="confirmBooking" runat="server" style="display: none" align="center">
<p class="p" >Please enter a Destination and Project Code, and
<br /> click "Accept" to complete booking, or press "Cancel" to return to previous screen.</p>
<table>
<tr>
<td><asp:Label ID="lblDestination" runat="server" CssClass="lblBook" >Destination:</asp:Label></td>
<td><asp:TextBox ID="txtDestination" runat="server" align="center" Width="230px" ></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblProjCode" runat="server" CssClass="lblBook" >Project Code:</asp:Label></td>
<td><asp:TextBox ID="txtProjCode" runat="server" align="center" Width="230px" ></asp:TextBox></td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnCstm" runat="server" align="center" onclick="btnCstm_Click"
Text="Custom Booking" Width="110px" /> &nbsp
<asp:Button ID="btnMkeBook" runat="server" align="center" OnClientClick="return invalidInfo(this)" onclick="btnMkeBook_Click"
Text="Accept" Width="80px" /> &nbsp
<asp:Button ID="btnCancel" runat="server" align="center" onclick="btnCancel_Click"
Text="Cancel" Width="80px" />
</td>
</tr>
</table>
</div>
<!--Invalid Date Modal -->
<div class="modal fade" id="InvalidDateModal" role="dialog" style="display:none;">
<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">Warning!</h4>
</div>
<div class="modal-body">
<p> End date cannot be less than Start date.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Invalid Custom Info Modal -->
<div class="modal fade" id="InvalidCusInfoModal" role="dialog" style="display:none;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-header">
<h4 class="modal-title">Warning!</h4>
</div>
<div class="modal-body">
<p> Destination and Project Code fields cannot be left empty! Make sure all information is filled out properly. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!--Invalid Info Modal -->
<div class="modal fade" id="InvalidInfoModal" role="dialog" style="display:none;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-header">
<h4 class="modal-title">Warning!</h4>
</div>
<div class="modal-body">
<p> Destination and Project Code fields cannot be left empty! Make sure all information is filled out properly. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!--Invalid Missing Date Modal -->
<div class="modal fade" id="MissingDateModal" role="dialog" style="display:none;">
<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">Warning!</h4>
</div>
<div class="modal-body">
<p> End date cannot be left empty! Make sure all information is filled out properly.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="cnclOrEditBooking" runat="server" style="display:none;" align="center" onclick="lblOnClickEvent_Click">
<p class="p" align="center" >Would you like to Delete or Edit your booking?</p>
<asp:Button id="btnUpdateBooking" align="center" runat="server" Text="Edit Booking" OnClick="btnUpdateBooking_Click" Width="100px" /> &nbsp
<asp:Button id="btnDelBooking" align="center" runat="server" Text="Delete Booking" Width="102px" OnClick="btnDelBooking_Click" /> &nbsp
<asp:Button id="btnEditBack" align="center" runat="server" Text="Back" OnClick="btnCancel_Click" Width="100px" />
</div>
<div id="divBookingCnclCnfrm" runat="server" style="display:none;" align="center" >
<p class="p" align="center" > Are you sure you want to delete your booking?</p>
<asp:Button id="btnYes" align="center" runat="server" Text="Yes" OnClick="btnYes_Click" Width="50px" /> &nbsp
<asp:Button ID="btnNo" align="center" runat="server" Text="No" OnClick="btnNo_Click" Width="50px" />
</div>
<div id="CustomBooking" runat="server" style="display:block;" align="center" >
<p class="p" >PLEASE NOTE THAT CUSTOM BOOKING ONLY APPLIES FOR FULL DAY (08:00 - 17:00) BOOKINGS! <br />
<br /> Enter Destination and Project Code, <br /> and then pick the Start date and the End date, and
<br /> click "Accept" to complete booking, or click "Cancel" to return to previous screen.</p>
<table>
<tr>
<td>
<asp:Label ID="lblCustomDestination" runat="server" CssClass="lblBook" >Destination:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtCustomDestination" runat="server" align="center" Width="230px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCusProjCode" runat="server" CssClass="lblBook" >Project Code:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtCusProjCode" runat="server" align="center" Width="230px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblStartDate" runat="server" CssClass="lblBook" >Start Date:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtStartDate" runat="server" align="center" Width="150px"
ReadOnly="True" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEndDate" runat="server" CssClass="lblBook" >End Date:</asp:Label>
</td>
<td>
<input type="text" id="calCustomBookEndDate" size="17" runat="server"
readonly="readonly" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnCustomBook" runat="server" align="center"
OnClientClick="return invalidInfoCustom(this)" onclick="btnCustomBook_Click"
Text="Accept" Width="80px" /> &nbsp
<asp:Button ID="btnCustomCancel" runat="server" align="center" onclick="btnCancel_Click"
Text="Cancel" Width="80px" />
</td>
</tr>
</table>
</div>
<div id="OpsEditBooking" runat="server" style="display:block; height:400px" align="center" >
<table style="height: 119px">
<tr>
<td>
<asp:Label ID="lblEditDestination" runat="server" CssClass="lblBook" >Destination:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtEditDestination" runat="server" align="center" Width="230px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEditProjCode" runat="server" CssClass="lblBook" >Project Code:</asp:Label>
</td>
<td>
<asp:TextBox ID="txtEditProjCode" runat="server" align="center" Width="230px" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEditStartTime" runat="server" CssClass="lblBook" >Start Time:</asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlStartTimes" runat="server" AutoPostBack="True"
onselectedindexchanged="ddlStartTimes_SelectedIndexChanged" >
<asp:ListItem>08:00</asp:ListItem>
<asp:ListItem>08:30</asp:ListItem>
<asp:ListItem>09:00</asp:ListItem>
<asp:ListItem>09:30</asp:ListItem>
<asp:ListItem>10:00</asp:ListItem>
<asp:ListItem>10:30</asp:ListItem>
<asp:ListItem>11:00</asp:ListItem>
<asp:ListItem>11:30</asp:ListItem>
<asp:ListItem>12:00</asp:ListItem>
<asp:ListItem>12:30</asp:ListItem>
<asp:ListItem>13:00</asp:ListItem>
<asp:ListItem>13:30</asp:ListItem>
<asp:ListItem>14:00</asp:ListItem>
<asp:ListItem>14:30</asp:ListItem>
<asp:ListItem>15:00</asp:ListItem>
<asp:ListItem>15:30</asp:ListItem>
<asp:ListItem>16:00</asp:ListItem>
<asp:ListItem>16:30</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEditEndTime" runat="server" CssClass="lblBook" >End Time:</asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlEndTimes" runat="server" >
<asp:ListItem>08:30</asp:ListItem>
<asp:ListItem>09:00</asp:ListItem>
<asp:ListItem>09:30</asp:ListItem>
<asp:ListItem>10:00</asp:ListItem>
<asp:ListItem>10:30</asp:ListItem>
<asp:ListItem>11:00</asp:ListItem>
<asp:ListItem>11:30</asp:ListItem>
<asp:ListItem>12:00</asp:ListItem>
<asp:ListItem>12:30</asp:ListItem>
<asp:ListItem>13:00</asp:ListItem>
<asp:ListItem>13:30</asp:ListItem>
<asp:ListItem>14:00</asp:ListItem>
<asp:ListItem>14:30</asp:ListItem>
<asp:ListItem>15:00</asp:ListItem>
<asp:ListItem>15:30</asp:ListItem>
<asp:ListItem>16:00</asp:ListItem>
<asp:ListItem>16:30</asp:ListItem>
<asp:ListItem>17:00</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnAcceptEdit" runat="server" align="center"
OnClientClick="return invalidInfoEditBooking(this)" onclick="btnAcceptEdit_Click"
Text="Accept" Width="80px" /> &nbsp
<asp:Button ID="btnEditCancel" runat="server" align="center" onclick="btnCancel_Click"
Text="Cancel" Width="80px" />
</td>
</tr>
</table>
</div>
<asp:Panel ID="pnlEmpDisp" runat="server" BackColor="Transparent" ScrollBars="Auto" >
<div id="dvInfo" runat="server" style="display:block" >
</div>
</asp:Panel>
<asp:Button id="btnLogOut" runat="server" onclick="btnLogOut_Click" style="display:none;" />
</form>
</body>
</html>
I have a booking system that allows you to book, delete or edit your booking.When clicking the delete button,
a <div> with the delete confirmation pops up with the two buttons, Yes and No. If you click Yes,
the booking gets deleted and the user is redirected back to the Home page, where you can view and make other bookings as well.
This works well during first execution, but if you make another booking and try to delete it, the confirmation <div>,
the one with Yes and No doesn't appear at all until you click the Home button and begin the delete process,
then it will show. This is my .aspx and .cs code
</div>
<div id="divBookingCnclCnfrm" runat="server" style="display:none;" align="center" >
<p class="p" align="center" > Are you sure you want to deleted your booking?</p>
<asp:Button ID="btnYes" align="center" runat="server" Text="Yes" OnClick="btnYes_Click" Width="50px" /> &nbsp
<asp:Button ID="btnNo" align="center" runat="server" Text="No" OnClick="btnNo_Click" Width="50px" />
</div>
protected void btnDelBooking_Click(object sender, EventArgs e)
{
divBookingCnclCnfrm.Style["display"] = "block";
dvInfo.Visible = false;
VehEditBooking.Visible = false;
BuildVechGrid();
}

Since you're using server side controls, lets just keep it simple and use properties that are available for the control.
Change this line:
<div id="divBookingCnclCnfrm" runat="server" style="display:none;" align="center" >
to
<div id="divBookingCnclCnfrm" runat="server" visible="false" align="center" >
Then in the delete button event write:
protected void btnDelBooking_Click(object sender, EventArgs e)
{
divBookingCnclCnfrm.Visible = true;
dvInfo.Visible = false;
VehEditBooking.Visible = false;
BuildVechGrid();
}
Please test and see if it helps.

Develop Reference

JavaScript is the programming language of the Web.

Modal body disappears upon button click - javascript

Related

how to create a bootstrap card using jquery/javascript?

Bootstrap modal not working properly

Boostrap Modal Popup is not showing after page referesh using asp.net C#

How to Save Modal Popup values in Main Page

My div disappears after first execution

Categories

Resources