Loading page content using AJAX

[tsangaris]

Hi,

 

I have the following setup:

A 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(){

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

                   $("#dynamic-content").html(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

 

THE PROBLEM I FACE:

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.

 

THE QUESTION:

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.

[tsangaris]

**

 

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].

 

Regards,

 

Chris

[Psycho]

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.

[Muddy_Funster]

I'm with Psycho, nothing about what you're doing makes me think AJAX.  At most iframe's could get the effect you are looking for, but if it's not broken, why fix it?  

[CroNiX]

I hope this isn't a site that will need to be indexed by search engines. They don't execute javascript, or most don't and the ones that do are very limited.