Load contents of page depending on linked selected - php

Question

I am writing an admin dashboard in PHP at the moment.
To simplify things, as far as I think it simplifies, the page I structured has the typical areas Header, Aside with menu and MainContent page. The main content page should change when I click a different page in the aside menu.
So I created the page index.php which will hold the whole framework of the page.
<?php include('../includes/overall/overallHeader.php'); ?>
<section class="content-header">
<h1>Einsatzliste</h1>
</section>
<script type="text/javascript">
$('#pageIncidents').click(function(){
$('#mainContent').load('incidents.php');
});
</script>
<section class="content">
<div id="mainContent">
</div>
</section>
<?php include('../includes/overall/overallFooter.php'); ?>
Within this I created the section content, and gave the div inside the id mainContent. My idea was to load different subpages into this div, when I click a menu item in the aside menu:
aside menu
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav in" id="side-menu">
<li><div id="pageIncidents">Einsatzliste</div></li>
<li>Testseite 1</li>
</ul>
</div>
</div>
There I put the link inside a div with a unique ID which I want to use in jQuery to load the specific contents.
jQuery script
<script type="text/javascript">
$('#pageIncidents').click(function(){
$('#mainContent').load('incidents.php');
});
</script>
The script is supposed to load the page incidents.php into the div mainContent in the index.php page.
It totally does not work... Do you have a hint where to look for? I think the logic seems right I guess. Could it be a problem, that the id "pageIncidents" is not directly visible in the code but included by the php include overallHeader at the top of the page?

Answer 1

You can try doing it with ajax and make up the ajax response in html (string), onclick start ajax request.
$(document).on("click", ".delete-asset", function() {
var link = $(this).attr('[data-page]');
$.ajax({
type:'GET',
url:'http://www.example.com/index.php',
dataType: "json",
data: {
action: 'incidents',
data: { 'incidents': 'incidents' }
},
success:function(data) {
$('#mainContent').html("[your data]");
}
});
});