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;
}
Related
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
}
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);
I have a button created inside a cell in my aspx.cs file like so:
tcedit.Text = "<button id='btnClr' onclick="func1(document.getElementById('sysconfig" + count + "'));return false;" class='ButtonNoWidth' style='height:19px;'>edit</button>";
Here's the corresponding function in .aspx
function func1(row, ignoreList) {
//code
func2(row.getAttribute("key"), row.getAttribute("val"), row.getAttribute("dispval") == "true", row.getAttribute("dontencrypt") == "true");
}
function func2(key, val, display, dontencrypt) {
document.getElementById("txtKey").value = key;
document.getElementById("txtValue").value = val;
document.getElementById("chkDisplayValue").checked = display;
document.getElementById("chkDontEncryptValue").checked = dontencrypt;
//code
}
In the .asp file, I have a standard form dataTable that is static on the page and whenever a button is clicked from a list of elements, it updates the form with the data from that element, allowing the editing and saving of any changes to the data.
<form id="Form1" method="post" runat="server">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr id="dataTable" runat="server" visible="true">
<td>
<table border="0" cellpadding="0" cellspacing="10">
<tr>
<td class="FieldPromptText">
Key:
</td>
<td>
<asp:DropDownList ID="ddKey" runat="server" CssClass="Field" Width="450" onchange="LoadKeyValueFromList(this)"></asp:DropDownList>
<br />
<asp:TextBox ID="txtKey" runat="server" CssClass="Field" Text="" Width="450" onkeyup="SetKeyList(this.value);"></asp:TextBox>
</td>
</tr>
<tr>
<td class="FieldPromptText">
Value:
</td>
<td>
<asp:TextBox ID="txtValue" runat="server" CssClass="Field" Text="" Width="450" TextMode="MultiLine" Height="60"></asp:TextBox>
</td>
</tr>
<tr>
<td class="FieldPromptText" style="white-space: nowrap;">
Display Value:
</td>
<td style="white-space:nowrap;" class="FieldPromptText">
<asp:checkbox id="chkDisplayValue" runat="server" CssClass="Field" checked="false"></asp:checkbox>
Don't Encrypt:
<asp:checkbox id="chkDontEncryptValue" runat="server" CssClass="Field" checked="false"></asp:checkbox>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" id="btnAddKeyValue" runat="server" onclick="AddKeyValue();" class="ButtonNoWidth" value="Submit" />
<button id="btnClr" onclick="ClearKeyVal();" class="ButtonNoWidth">Clear</button>
</td>
</tr>
<tr>
<td id="tdConfirmation" runat="server" colspan="2" class="FieldPromptText" style="color: #0026ff"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
What I'm trying to do is move that form that is currently static on the page, to a modal popup of the same form. A huge majority of the examples I've seen online all use the ajaxcontroltoolkit, I would like to avoid any additional packages and do this with only javascript/jquery. I tried using bootstrap, but the css messed with mine
You can use Twitter Bootstrap and to make sure that the bootstrap CSS doesn't mess with the other elements on your page you can try the following work around:
Create a new empty style sheet e.g.modal.css.
Move all.modal style rules from bootstrap.css to modal.css.
Move all.fade style rules from bootstrap.css to modal.css.
Move all.close style rules from bootstrap.css to modal.css.
Add a reference to modal.css on your web page.
Complete example:
<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 href="Content/modal.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<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 Header</h4>
</div>
<div class="modal-body">
<h1>Modal Body</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</body>
I am working on a piece of code and since I dont have too much experience with jquery or javascript I need your help. I want to take the data from the row when button EditBtn is clicked and set those values to modal. I tried the code below but It was not working.
Below is my code
Table :
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th>Ödeme Türü</th>
<th>Ödeme Başlığı</th>
<th>İçerik</th>
<th>Son Ödeme Tarihi</th>
<th>Tutarı</th>
<th>Ödeme Durumu</th>
<th>Düzenle</th>
</tr>
</thead>
<tbody>
#foreach (OdemeList item in Model)
{
<tr id="#item.Odeme.OdemeID">
<td>#item.Odeme.OdemeType</td>
<td>#item.Odeme.OdemeTitle</td>
<td>#item.Odeme.OdemeContent</td>
<td>#item.Odeme.SonOdemeTarih</td>
<td>#item.Odeme.OdemeTutar</td>
#if (#item.KullaniciOdeme.isPay == true)
{
<td>Odendi</td>
}
else
{
<td>Odenmedi</td>
<td>
<form>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="#item.Odeme.OdemeTutar"
data-name="#item.Odeme.OdemeTitle"
data-image="/Content/LoginCssJs/pay.png"
data-locale="auto">
</script>
</form>
</td>
#*<td>
<a data-toggle="modal" data-target=".bootstrapmodal3"><button class="btn btn-success">Öde</button></a>
</td>*#
}
<td>
<a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"><img src="#Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /></a>
</td>
<td>
<a data-toggle="modal" data-target=".bootstrapmodal2"><img src="#Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /></a>
</td>
</tr>
}
</tbody>
</table>
My modal:
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class="modal-title">
<h3>Ödeme Düzenle</h3>
</div>
</div>
<div class="modal-body">
<form>
<label>Ödeme Türü</label>
<select class="form-control" id="OdemeTuru">
<option>Aidat</option>
<option>Isınma</option>
<option>Bina Gideri</option>
</select><br />
<div class="form-group">
<label for="odemebasligi">Ödeme Başlığı</label>
<input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle">
</div>
<div class="form-group">
<label for="comment">Ödeme içeriği</label>
<textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"></textarea>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Tutar</label>
<div class="input-group">
<div class="input-group-addon">TL</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="form-group">
<label for="odemetarihi">Son Ödeme Tarihi</label>
<input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Kaydet</button>
<button class="btn btn-danger" data-dismiss="modal"> Vazgeç</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('a.edit').on('click', function() {
var myModal = $('.bootstrapmodal');
//// now get the values from the table
//var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();
//// and set them in the modal:
//$('#', myModal).val(OdemeTuru);
$('#odemebasligi', myModal).val(OdemeBaslik);
$('#comment', myModal).val(OdemeIcerik);
$('#exampleInputAmount', myModal).val(OdemeTutar);
$('#odemetarihi', myModal).val(SonOdemeTarihi);
// and finally show the modal
myModal.modal({ show: true });
return false;
});
</script>
In script you are targeting <td> class .find('td.OdemeTitle') and in table there are no class defined <td>#item.Odeme.OdemeTitle</td> what you only need is define class which you are targeting e.g
For
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
HTML
<td class="OdemeTitle">#item.Odeme.OdemeTitle</td>
follow above example and set all <td> classes and you will be all set.
minimal fiddle example
<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" />  
<asp:Button ID="btnMkeBook" runat="server" align="center" OnClientClick="return invalidInfo(this)" onclick="btnMkeBook_Click"
Text="Accept" Width="80px" />  
<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" />  
<asp:Button id="btnDelBooking" align="center" runat="server" Text="Delete Booking" Width="102px" OnClick="btnDelBooking_Click" />  
<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" />  
<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" />  
<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" />  
<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" />  
<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.