Reload content in div with switch case include - php

Question

I am kinda new in Ajax and jQuery the problem is that I have a folder pages and in it are php pages with content divs. I want to reload the container div with the content instead of the whole page i tried many things but nothing seems to help. this is a part of how my index.php looks like:
<?php include ('inc/nav.php'); ?>
<div id="container">
<?
$type = $_GET["type"];
switch ($type) {
case "about" :
include "pages/about-us.php";
break;
case "contact":
include "pages/contact.php";
break;
default :
include "pages/homepage.php";
}
?>
</div>
In the navigation the link looks like this:
<ul class="main-menu">
<li class="url">Homepage</li>
<li class="url">About us</li>
<li class="url">Contact</li>
</ul>
I tried to get the content that's in pages/about-us.php into the <div id="container"></div> but it's not working. this is how my ajax script looks like:
//run on page load
$(function(){
//bind a click event to the nav links
$(".url a").on("click", function(e){
//keep the links from going to another page by preventing their default behavior
e.preventDefault();
//this = link; grab the url
var pageLocation = this.href;
console.log(pageLocation);
//fire off an ajax request
$.ajax({
url: pageLocation,
//on success, set the html to the responsetext
success: function(data){
$("#container").html(data.responseText);
}
});
});
});

Answer 1

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
Consider the following example.
$(function() {
$(".url a").click(function(e) {
e.preventDefault();
var pageLocation = this.href + " #container";
console.log(pageLocation);
$("#container").load(pageLocation)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
<li class="url">Homepage</li>
<li class="url">About us</li>
<li class="url">Contact</li>
</ul>
<div id="container">
</div>
This is untested. You will want to test this in your own code.
See More: https://api.jquery.com/load/