Jquery .load() question. CSS not showing up.

emericana · 07-19-2011, 11:19 PM

Playing around with .load() and wrote a simple script.

User clicks on a link, and then a .php page gets called from that link.

The php page which is loaded has a bunch of different css styles on it.

The classes and ID's from the loaded php page is included on the parent page...

for example if the page is index.php and I am loading test.php, all of the necessary CSS for test.php is in the <head> of index.php.

However, when the page loads, the CSS does not get shown from the loaded page.... even tho the necessary classes are there. Any ideas?

Code:

<script>
$(document).ready(function () {
$("#test1").click(function () {
			$('#bodyContainer').fadeOut('slow', function () {
	$('#loader').load('test.php');
					}); 
			});
			
			});
			</script>

Any help would be greatly appreciated. Thanks!

kberry · 07-19-2011, 11:48 PM

Have you tried using the function with .live() rather than .click()?

$("#test1").live('click', function () {

....

});

http://api.jquery.com/live/

Just a thought - I'm not too experienced myself.

VIPStephan · 07-20-2011, 12:20 AM

No, I suspect live() won’t do anything here. It would help to actually see the entire code of the parent page where test.php is included.

emericana · 07-20-2011, 04:12 PM

Quote:

Originally Posted by VIPStephan

No, I suspect live() won’t do anything here. It would help to actually see the entire code of the parent page where test.php is included.

Yeah. Live didnt work. The test.php page is freaking huge and i need to get this file out later today so I think I will just use a less cool way of implementing the same functionality. thanks!

VIPStephan · 07-20-2011, 04:27 PM

Then provide a link to the page or post a stripped down version with the relevant parts of the code. I’m sure the solution is pretty simple.

devnull69 · 07-20-2011, 05:47 PM

The classes alone are not enough if the CSS style declarations are inside the loaded content and not inside the current page. CSS style definitions will not be applied when loaded via .load() (or any Ajax technique).

Solution: Move all your CSS to the current page (the one you are calling .load() from).