I'm trying to create an admin page and below is my code for it and its multiple panels, wherein clicking the respective images will result in changing the replaceThis
div
to its respective php file content.
<div class="left-container">
<img src="" id="Dashboard" alt="Dashboard">
<img src="" id="ManUse" alt="Manage Users">
<img src="" id="ManFile" alt="Manage Files">
<img src="" id="FfApprove" alt="Files for Approval">
</div>
<div class="right-container" id="replaceThis">
<?php
switch($_SESSION['admain']){
case 'Dashboard':
break;
case 'ManUse':
break;
case 'ManFile':
break;
case 'FfApprove':
break;
}
?>
</div>
This is my javascript code so far, and the contents of the respective PHP files are currently empty because I don't know if I need to print a function or just call the entire php file (I don't know how to do this yet) or should I incorporate the `$_SESSION['admain'] into the php file.
$(document).ready(function() {
$("#Dashboard").click(function() {
let selID = $(this).attr('id');
$("#replaceThis").load(".modular/dasbord.php", {
newDis : selID
});
});
});
$(document).ready(function() {
$("#ManUse").click(function() {
let selID = $(this).attr('id');
$("#replaceThis").load(".modular/manuser.php", {
newDis : selID
});
});
});
$(document).ready(function() {
$("#ManFile").click(function() {
let selID = $(this).attr('id');
$("#replaceThis").load(".modular/manfile.php", {
newDis : selID
});
});
});
$(document).ready(function() {
$("#FfApprove").click(function() {
let selID = $(this).attr('id');
$("#replaceThis").load(".modular/forapprove.php", {
newDis : selID
});
});
});
You need to be DRY (don't repeat yourself) and have just one php return stuff. The switch does not belong in the index.php but in the replacethis.php
You MAY want to wrap the images in a link (and change 'img' to 'a' in the on click, to add more accessibility to the page. When you do, remember to cancel the link with event.preventDefault.
Also make sure to spell everything correctly
$(function() { // when page elements are available
function loadPage(id) {
let selID = typeof id === "string" ? id : $(this).attr('id'); // if passed an ID use it
console.log(selID);
$("#replaceThis").load(".modular/replacethis.php", {
newDis: selID
});
}
const $nav = $(".left-container")
.on("click", 'img', loadPage); // any click on an image
loadPage($nav.find('img').eq(0).prop('id')); // initialise
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="left-container">
<img src="" id="Dashboard" alt="Dashboard">
<img src="" id="ManUse" alt="Manage Users">
<img src="" id="ManFile" alt="Manage Files">
<img src="" id="FfApprove" alt="Files for Approval">
</div>
<div class="right-container" id="replaceThis"></div>
then replacethis.php can have
<?php
switch($_POST['newDis']){
case 'Dashboard':
echo file_get_contents('dashboard.html');
break;
case 'ManUse':
echo file_get_contents('manuse.html');
break;
case 'ManFile':
echo file_get_contents('manfile.html');
break;
case 'FfApprove':
echo file_get_contents('ffapprove.html');
break;
}
?>