Do I need to return anything important from the switch cases or is just having it like this enough to differentiate different PHP?

Question

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
    });
  });
});

Answer 1

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;
    }
?>