Hello helpers and happy new year!
How can I highlight a section of page upon clicking a link and disabling other sections.
I have three sections within a form, each section is divided by a panel control. Those sections are: clientPanel, SermonPanel, LogPanel.
We have a menu to the left side of the page titled PROJECT REQUEST.
This menu has a link to each of the panels I described above.
When you click on any link, it takes you to the section of the panel control. This works well.
When you click on a menu, it is supposed to take you to that panel, highlight the entire section of that panel and disable the controls of the other two panels.
So far, the clientPanel control and the SermonPanel control get highlighted just fine. However, I cannot get the LogPanel control to highlight.
Secondly, when you go to a particular panel section, the controls of the other two panels are not getting disabled.
Any ideas what I am doing wrong?
Many thanks in advance for your help.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>XPHIAS Client Management System</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<!-- Boostrap CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css" />
<!-- Boostrap DatePciker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
function countChar(val) {
var len = val.value.length;
if (len >= 1000) {
val.value = val.value.substring(0, 1000);
} else {
$('.numbersofChart').text(1000 - len);
}
};
</script>
<style type="text/css">
.selected {
background-color: red !important;
}
</style>
<script type="text/javascript">
$(function () {
$("a").click(function (event) {
$("div").removeClass('selected');
$("div").children().prop('disabled', true);
var href = event.target.href;
var targetId = href.split("#")[1];
$("#" + targetId).addClass('selected');
$("#" + targetId).children().prop('disabled', false);
});
});
</script>
<script type="text/javascript">
jQuery("a").filter(function () {
return this.innerHTML.indexOf("Delete") == 0;
}).click(function () { return confirm("Are you sure you want to delete this record?");
});
</script>
<script type="text/javascript">
// if you use jQuery, you can load them when dom is read.
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
// Place here the first init of the DatePicker
$(".clientDate").datepicker();
$(".sermonDate").datepicker();
$(".logDate").datepicker();
});
function InitializeRequest(sender, args) {
// make unbind to avoid memory leaks.
$(".clientDate").unbind();
$(".sermonDate").unbind();
$(".logDate").unbind();
}
function EndRequest(sender, args) {
// after update occur on UpdatePanel re-init the DatePicker
$(".clientDate").datepicker();
$(".sermonDate").datepicker();
$(".logDate").datepicker();
}
</script>
<style type="text/css">
table.gridview td {
border: 1px solid #000;
}
.gridheader
{
background-image:url("images/bgBack.png");
background-repeat:repeat-x;
}
</style>
</head>
<body>
