I have set up the following structure:
A main-page.php consisting of:
1) A header
2) A navigation bar
3) Content (loaded inside a
<div id="dynamic-content"></div>4) Footer
The navigation bar contains various options (e.g. About Us, Contact Us, etc..).
Let's assume that the script handling "About Us" is named about-us.php.
My goal is to load the output of about-us.php page into the content area (the dynamic-content div) when I click the "About Us" button (#about-us div).
To achieve this, I utilize the AJAX call below:
AJAX Call
$("#about-us").on('click', function(){
$.ajax({
url: "about-us.php",
success: function(output){
$("#dynamic-content").html(output);
}
});
});
Both main-page.php and about-us.php have their own CSS and JavaScript files:
main-page.js and main-page.css are included in main-page.php
about-us.js and about-us.css are included in about-us.php
THE QUESTION:
What is the proper way to utilize the CSS and Javascript files of about-us.php? Should I include them within the about-us.php file or incorporate them into the main-page.php?
When I include them in about-us.php, I receive a console alert stating "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience".
It should also be noted that about-us.js contains additional AJAX requests.
Thank you for your assistance.