Jump to content

Loading page content using AJAX


Recommended Posts



I have the following setup:

main-page.php that is consisted of:

1) A header

2) A nav bar

3) Content (is loaded inside a <div id="dynamic-content"></div>)

4) Footer

Inside the nav bar you find several options (ex. About Us, Contact Us, etc..).

Lets say that the script responsible for "About Us" is called about-us.php.

What i want to achieve is to load the output of about-us.php page inside the content area (aka the dynamic-content div), as soon as i press the "About Us" button (#about-us div).

In order to achieve this i use the following AJAX call:

$("#about-us").on('click', function(){

              url: "about-us.php",
              success: function(output){




Both main-page.php and about-us.php include their own CSS and JavaScript files:

main-page.js and main-page.css included in main-page.php

about-us.js and about-us.css included in about-us.php



Initially the tabs inside nav bar (About us, Contact Us, etc) were stand alone pages, meaning when you clicked on the link it redirected you to a new URL (for example http://www.domain.com/about-us.php).

In this case about-us.php was consisted of a head where all CSS was included, a body where all JS was included, In other words it was a complete HTML/PHP page. The page was working properly.

When i tried to load this page into a div inside main-page.php, i started facing some problems. Sometimes CSS was overwritten by the CSS of Contact Us causing problems (at this point i have to mention that since about-us.php and contact-us.php were stand alone pages, sometimes we used the same classes/ids to target DOM elements). Problems started to happen with JS as well.



What is the correct way to use CSS and Javascript files of about-us.php? Should i include them inside the about-us.php script or include them inside the main-page.php?

Do i have to create one big CSS and one big JS file that will include all previously created CSS and JS that will target each element of each imported page?

Is there another way?

Thanks in advance.

Link to comment
Share on other sites



Lets say that i include all JS files on the main-page.php and i wait for the other pages to be called using AJAX inside main-page.php.


When about-us.php page is called, the JS responsible for that page DOES NOT work.


Is there a way to invoke the about-us.js file as soon as the about-us.php file is loaded? [other than including the JS file in about-us.php script].





Link to comment
Share on other sites

Based on what I see, you are loading the "about us" content into an element on the page (e.g. a div). Is it a full HTML page with a head section? If so, that won't work. You already have a valid HTML page and are just loading content into it. You will probably want to have one CSS file that contains all the styles for all your pages. Same goes with the JS.


But, I would think about what is being gained by not just opening the pages as normal links. It seems you are replacing most of the content anyway aside from the navigation and possibly a header/footer. What are you gaining by using AJAX to load the page? You are adding more complexity and possible errors to occur.

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.