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>
Related
A complete button is there . I have some Toggle buttons that are placed in a table . This toggle button can have no value, Yes / No or NA values. When the complete button is clicked, i like to change the colour of toggle button or atleast the div. I have following code . When i check in the Developer console and run the commands, it is changing the div colour, but not when running it(not updating from console) .
$(document).ready(function() {
$(document).on('click', '#btnComplete', function() {
if ($('#btnToggleIntro1').val().trim().length < 1) {
$('#divIntro').attr('style', 'background-color: blue');
//css('background-color', 'blue');
// $('#btnToggleIntro1').css('background-color', '#A497E5');
} else {
$('#btnToggleIntro1').css('background-color', '#ffffff');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divIntro">
<telerik:RadToggleButton ID="btnToggleIntro1" runat="server" AutoPostBack="False" Font-Size="14px" meta:resourcekey="btnToggle11Resource1" class="RecomenderButton" ClientIDMode="Static">
<ToggleStates>
<telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource1" />
<telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource2" />
<telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource3" />
<telerik:ButtonToggleState Text="N/A" />
</ToggleStates>
</telerik:RadToggleButton>
</div>
Following is the rendered sample fo the table where i want the colour to be changed
<div id="divIntroduction">
<table class="table table-bordered table-hover table-striped" id="tbIntroduction">
<tr>
<td class="light-blue-background text-center" colspan="4">INTRODUCTION </td>
</tr>
<tr class="text-left">
<td class="text-center col-xs-1"></td>
<td class="col-xs-5 ">Is this a Staff or instruction.
</td>
<td class="text-center col-xs-2" style="vertical-align: middle">
<div id="divIntro">
<button type="submit" name="btnToggleIntro1" value="Yes" id="btnToggleIntro1" class="RadToggleButton RadButton RadButton_Bootstrap rbButton rbRounded rbIconButton" class="RecomenderButton" style="font-size:14px;"><span class="rbText">Yes</span><input id="btnToggleIntro1_ClientState" name="btnToggleIntro1_ClientState" type="hidden" /></button>
</div>
</td>
<td class="text-center col-xs-2" style="vertical-align: middle">
<button type="submit" name="btnToggleIntroAprv" value=" " id="btnToggleIntroAprv" class="RadToggleButton RadButton RadButton_Bootstrap rbButton rbRounded rbIconButton" style="font-size:14px;"><span class="rbText"> </span><input id="btnToggleIntroAprv_ClientState" name="btnToggleIntroAprv_ClientState" type="hidden" /></button>
</td>
</tr>
</table>
</div>
One of the easiest solution is to use css and on button click for toggle button, change the colour
<style type="text/css">.Checked {
background-color: white !important;
}
.notChecked {
background-color: indianred !important;
}
</style>
<div id="divIntro">
<telerik:RadToggleButton ID="btnToggleIntro1" runat="server" AutoPostBack="False" Font-Size="14px">
<ToggleStates>
<telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource1" CssClass="notChecked" />
<telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource2" CssClass="Checked" />
<telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource3" CssClass="Checked" />
<telerik:ButtonToggleState Text="N/A" CssClass="Checked" />
</ToggleStates>
</telerik:RadToggleButton>
</div>
I am using ASP.NET MVC 4.0 to build my web application and jQuery Dialog plugin for the popup. I intend to put my HTML elements in the div element with id 'addDialog' onto a popup. The popup should be shown on a button click with id 'add' but it's not working. Whenever I click the button nothing happens.
This is my View:
#{
ViewBag.Title = "TimeSlotDetails";
}
<head>
<title>TimeSlot</title>
<link href="~/Scripts/DataTables/datatables.min.css" rel="stylesheet" />
<link href="#Url.Content("~/Content/Common.css")" rel="stylesheet" type="text/css" />
<link href="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery.unobstrusive-ajax.min.js"></script>
<script src="~/Scripts/DataTables/datatables.min.js"></script>
<script src="~/Scripts/TimeSlotDetails.js"></script>
</head>
<body>
<form>
<div id="addDialog" style="display:none">
Name<input type="text"/><br/><br/>
Duration<input type="text"/><br/><br/>
Type<input type="text"/><br/><br/>
Frequency<input type="text"/><br/><br/>
</div>
<div class="title">Automatic Timetable Generator</div>
<div class="title-down"></div>
<table class="option_list">
<tr>
<td class="title-down" rowspan="16" colspan="3"></td>
<td rowspan="16" colspan="5">
<div></div>
<div></div>
<div>#Html.ActionLink("Home", "Home")</div>
<div>#Html.ActionLink("Preferred Time Slot", "PreferredTimeslot")</div>
<div>Time Slot Details</div>
<div>Department Details</div>
<div>Subject Details</div>
<div>ClassRoom Details</div>
<div>Lab Details</div>
<div>Allot the Slots for each classRoom as per your need</div>
<div>Teacher Details</div>
<div>Allot Subjects to Teachers</div>
<div>Allot Subjects to Labs</div>
<div>Check ot the Final Result</div>
<div></div>
<div></div>
</td>
<td rowspan="16" colspan="12">
<div>Enter the Time slot Details</div>
<div>
<span><input id="add" type="button" value="Add" /></span> <span><input id="edit" type="button" value="Edit" /></span> <span><input id="delete" type="button" value="Delete" /></span>
</div>
<table id="timeslotdetails">
<thead>
<tr>
<td colspan="3">Name</td>
<td colspan="3">Duration</td>
<td colspan="3">Type</td>
<td colspan="3">Frequency</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div> <button id="slotAllottmentSubmit" type="Submit" value="Submit the Data">Submit the Data</button></div>
</td>
<td rowspan="16" colspan="3"></td>
</tr>
</table>
</form>
</body>
This is my JavaScript code:
$(document).ready(function () {
$('#timeslotdetails').DataTable();
$('.option-list #add').click(function () {
$('#addDialog').css('display:inline');
$('#addDialog').dialog();
});
});
I have included all the dependent files in the right order.
I think the jQuery selector $('.option-list #add') is wrong.
I checked and I did not see any element having the .option-list class in the HTML.
You can try $('#add').
after spending a fair amount of time researching and debugging the issues, I am finally at my wits' end and would appreciate some help:
Problem:
Modal does not display variables insert into its INPUT fields.
Background info:
I am pulling records from a MySQL table which is displayed line by line, with an "EDIT" button placed in the last column of each row. The EDIT button is supposed to launch a modal populated with the records data in each INPUT field, allowing the user to edit the record.
What I've tried so far:
checked whether the generated variables are empty by looking at what's printed in the source. All variables are generated correctly and have indeed values printed.
I copied the #MyModal JS and <div> from the official documentation but cannot get it work either (Link)
copied the #EDIT modal from another thread on the web which worked for another user
included references from Google and MaxCDN instead of my own local copies of JS Bootstrap / jQuery / CSS
tried to run the code on my XAMPP server without success, showing the some symptoms
opened the website in IE / Chrome / Firefox / Safari (MAC), all with the same result
ran a JS Fiddle successfully handing over the variables which makes me think that there might be a server issue / configuration requirement that I am not aware of (LINK)
The code:
<html>
<head>
<!-- include jQuery 3.1.0 + jQuery CSS + min JavaScript -->
<!-- latest jQuery 3.1.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JavaScript for Modal, #MyModal is straight from the documentation, #edit is a solution I got off the web -->
<script>
$('#edit').on('show.bs.modal', function(e) {
var dataID = $(e.relatedTarget).data('id');
$(e.currentTarget).find('input[name="dataID"]').val(dataID);
var dataDate = $(e.relatedTarget).data('date');
$(e.currentTarget).find('input[name="dataDate"]').val(dataDate);
});
$('#myModal').on('show.bs.modal', function(e) {
var dataID = $(e.relatedTarget).data('id');
$(e.currentTarget).find('input[name="dataID"]').val(dataID);
var dataDate = $(e.relatedTarget).data('date');
$(e.currentTarget).find('input[name="dataDate"]').val(dataDate);
var dataTime = $(e.relatedTarget).data('time');
$(e.currentTarget).find('input[name="dataTime"]').val(dataTime);
var dataStaff = $(e.relatedTarget).data('staff');
$(e.currentTarget).find('input[name="dataStaff"]').val(dataStaff);
var dataDept = $(e.relatedTarget).data('dept');
$(e.currentTarget).find('input[name="dataDept"]').val(dataDept);
var dataProb = $(e.relatedTarget).data('prob');
$(e.currentTarget).find('input[name="dataProb"]').val(dataProb);
var dataGuest = $(e.relatedTarget).data('guest');
$(e.currentTarget).find('input[name="dataGuest"]').val(dataGuest);
var dataRoom = $(e.relatedTarget).data('room');
$(e.currentTarget).find('input[name="dataRoom"]').val(dataRoom);
});
</script>
<!-- End of Modal Javascript -->
</head>
<body>
<table>
<tr>
<td>
<label>Button for Modal #MYMODAL"</label>
</td>
<td>
<button type="button" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#myModal" data-keyboard="true"
data-id="1234"
data-date="2001-01-31"
data-time="13:00"
data-staff="Some Name"
data-dept="Some Department"
data-prob="Problem"
data-guest="Guest Name"
data-room="1111" >Modal 1</button>
</td>
</tr>
<tr>
<td>
<label>Button for Modal #EDIT"</label>
</td>
<td>
<button type="button" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#edit" data-keyboard="true"
data-id="1234"
data-date="2001-01-31">Modal 2</button>
</td>
</tr>
</table>
<!-- Modal MYMODAL -->
<div class="modal modal-primary modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">Edit Record</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>ID No.: </td>
<td>
<input type="text" id="dataID" name="dataID" value="" disabled />
</td>
</tr>
<tr>
<td>Date: </td>
<td>
<input type="date" id="dataDate" name="dataDate" value="" />
</td>
</tr>
<tr>
<td>Time: </td>
<td>
<input type="time" id="dataTime" name="dataTime" value="" />
</td>
</tr>
<tr>
<td>Staff: </td>
<td>
<input type="text" name="dataStaff" value="" />
</td>
</tr>
<tr>
<td>Department: </td>
<td>
<input type="text" name="dataDept" value="" />
</td>
</tr>
<tr>
<td>Problem: </td>
<td>
<input type="text" name="dataProb" value="" />
</td>
</tr>
<tr>
<td>Guest: </td>
<td>
<input type="text" name="dataGuest" value="" />
</td>
</tr>
<tr>
<td>Room No.: </td>
<td>
<input type="text" name="dataRoom" value="" />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /.Modal MYMODAL -->
<!-- Modal EDIT-->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">Edit Details</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>ID No.: </td>
<td>
<input type="text" id="dataID" name="dataID" value="" disabled />
</td>
</tr>
<tr>
<td>Date: </td>
<td>
<input type="date" id="dataDate" name="dataDate" value="" />
</td>
</tr>
</table>
</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 changes</button>
</div>
</div>
</div>
</div>
<!-- /.Modal EDIT -->
</body>
</html>
Your script needs to be at the bottom, after the html. I believe that when your script is executing, the html does not yet exist.
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;
}
<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.