Loading content with css via ajax
Hi there. I've got a basic setup where there's a menu, and on each menu item there's a click function to .load() that pulls the html content from the server and places it in a div. However, even though h1 and li tags etc are styled and the content is dropped into a div on a page that links to the stylesheet, they are not coming out fully styled. I've become aware that .load() can't call full html docs, so no <head> or css etc.
The current code is this:
- $('#home_click').click(function(){$('#ajax_content').load('business_units_content/people_development/index.php')});
with the menu item like this:
- <li><a id="home_click">Home</a></li>
This loads the content into the right place but minus the full styling of the css. When the exact same content is placed into the area where the dynamic content is loaded manually, it's styled as required.
What's the best way to achieve what I'm after? I need content from the server to load into a certain div when a menu item is clicked, fully styled as per the css file(s).
Regards.