Title: Jquery .load not using stylesheet
Tags: javascript;jquery;html;css
Question: Sorry for bad English title, but I'm currently making my ASE and I want dynamic pages. One container and when clicked on a navigation item it will load the pages into the container.
However, if I use jQuery .load, the style is not correct. It seems it doesn't use the stylesheet from either the main page as the content page. I put the stylesheet link on both. I use Bootstrap.
This is my main.php (the main page with the container):
<?php
include('../includes/global.php');
?&gt;
<!DOCTYPE html&gt;
<html lang="en"&gt;
<head&gt;
<meta charset="utf-8"&gt;
<meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
<meta name="viewport" content="width=device-width, initial-scale=1"&gt;
<meta name="description" content=""&gt;
<meta name="author" content=""&gt;
<link rel="icon" href="../../favicon.ico"&gt;
<title&gt;<?php echo Cor75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0getSettings()-&gt;getValue('blogname'); ?&gt; ASE - Dashboard</title&gt;
<!-- Bootstrap core CSS --&gt;
<link href="../styles/bootstrap.min.css" rel="stylesheet"&gt;
<!-- Custom styles for this template --&gt;
<link href="../styles/dashboard.css" rel="stylesheet"&gt;
<!-- Just for debugging purposes. Don't actually copy these 2 lines! --&gt;
<!--[if lt IE 9]&gt;<script src="../scripts/ie8-responsive-file-warning.js"&gt;</script&gt;<![endif]--&gt;
<script src="../scripts/ie-emulation-modes-warning.js"&gt;</script&gt;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;</script&gt;
<script src="script/ase_main.js"&gt;</script&gt;
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
<!--[if lt IE 9]&gt;
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;</script&gt;
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;</script&gt;
<![endif]--&gt;
</head&gt;
<body&gt;
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
<div class="container-fluid"&gt;
<div class="navbar-header"&gt;
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"&gt;
<span class="sr-only"&gt;Toggle navigation</span&gt;
<span class="icon-bar"&gt;</span&gt;
<span class="icon-bar"&gt;</span&gt;
<span class="icon-bar"&gt;</span&gt;
</button&gt;
<a class="navbar-brand" href="#"&gt;<?php echo Cor75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0getSettings()-&gt;getValue('blogname'); ?&gt;</a&gt;
</div&gt;
<div class="navbar-collapse collapse"&gt;
<ul class="nav navbar-nav navbar-right"&gt;
<li&gt;<a href="#"&gt;Dashboard</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Settings</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Profile</a&gt;</li&gt;
<li&gt;<a href="#"&gt;Help</a&gt;</li&gt;
</ul&gt;
<form class="navbar-form navbar-right"&gt;
<input type="text" class="form-control" placeholder="Search..."&gt;
</form&gt;
</div&gt;
</div&gt;
</div&gt;
<div class="container-fluid"&gt;
<div class="row"&gt;
<div class="col-sm-3 col-md-2 sidebar"&gt;
<?php include ('headers/navigator.php'); ?&gt;
</div&gt;
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="mainContent"&gt;</div&gt;
</div&gt;
</div&gt;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;</script&gt;
<script src="../scripts/bootstrap.min.js"&gt;</script&gt;
<script src="../scripts/docs.min.js"&gt;</script&gt;
<script src="../scripts/ie10-viewport-bug-workaround.js"&gt;</script&gt;
</body&gt;
</html&gt;
This is the Dashboard.php (the page dynamically loaded):
<link href="../styles/dashboard.css" rel="stylesheet"&gt;
<h1 class="page-header"&gt;Dashboard</h1&gt;
<div class="row placeholders"&gt;
<div class="col-xs-6 col-sm-3 placeholder"&gt;
<img data-src="../scripts/holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
<h4&gt;Label</h4&gt;
<span class="text-muted"&gt;Something else</span&gt;
</div&gt;
<div class="col-xs-6 col-sm-3 placeholder"&gt;
<img data-src="../scripts/holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
<h4&gt;Label</h4&gt;
<span class="text-muted"&gt;Something else</span&gt;
</div&gt;
<div class="col-xs-6 col-sm-3 placeholder"&gt;
<img data-src="../scripts/holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
<h4&gt;Label</h4&gt;
<span class="text-muted"&gt;Something else</span&gt;
</div&gt;
<div class="col-xs-6 col-sm-3 placeholder"&gt;
<img data-src="../scripts/holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail"&gt;
<h4&gt;Label</h4&gt;
<span class="text-muted"&gt;Something else</span&gt;
</div&gt;
</div&gt;
<h2 class="sub-header"&gt;Section title</h2&gt;
<div class="table-responsive"&gt;
<table class="table table-striped"&gt;
<thead&gt;
<tr&gt;
<th&gt;#</th&gt;
<th&gt;Header</th&gt;
<th&gt;Header</th&gt;
<th&gt;Header</th&gt;
<th&gt;Header</th&gt;
</tr&gt;
</thead&gt;
<tbody&gt;
<tr&gt;
<td&gt;1,001</td&gt;
<td&gt;Lorem</td&gt;
<td&gt;ipsum</td&gt;
<td&gt;dolor</td&gt;
<td&gt;sit</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,002</td&gt;
<td&gt;amet</td&gt;
<td&gt;consectetur</td&gt;
<td&gt;adipiscing</td&gt;
<td&gt;elit</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,003</td&gt;
<td&gt;Integer</td&gt;
<td&gt;nec</td&gt;
<td&gt;odio</td&gt;
<td&gt;Praesent</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,003</td&gt;
<td&gt;libero</td&gt;
<td&gt;Sed</td&gt;
<td&gt;cursus</td&gt;
<td&gt;ante</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,004</td&gt;
<td&gt;dapibus</td&gt;
<td&gt;diam</td&gt;
<td&gt;Sed</td&gt;
<td&gt;nisi</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,005</td&gt;
<td&gt;Nulla</td&gt;
<td&gt;quis</td&gt;
<td&gt;sem</td&gt;
<td&gt;at</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,006</td&gt;
<td&gt;nibh</td&gt;
<td&gt;elementum</td&gt;
<td&gt;imperdiet</td&gt;
<td&gt;Duis</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,007</td&gt;
<td&gt;sagittis</td&gt;
<td&gt;ipsum</td&gt;
<td&gt;Praesent</td&gt;
<td&gt;mauris</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,008</td&gt;
<td&gt;Fusce</td&gt;
<td&gt;nec</td&gt;
<td&gt;tellus</td&gt;
<td&gt;sed</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,009</td&gt;
<td&gt;augue</td&gt;
<td&gt;semper</td&gt;
<td&gt;porta</td&gt;
<td&gt;Mauris</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,010</td&gt;
<td&gt;massa</td&gt;
<td&gt;Vestibulum</td&gt;
<td&gt;lacinia</td&gt;
<td&gt;arcu</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,011</td&gt;
<td&gt;eget</td&gt;
<td&gt;nulla</td&gt;
<td&gt;Class</td&gt;
<td&gt;aptent</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,012</td&gt;
<td&gt;taciti</td&gt;
<td&gt;sociosqu</td&gt;
<td&gt;ad</td&gt;
<td&gt;litora</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,013</td&gt;
<td&gt;torquent</td&gt;
<td&gt;per</td&gt;
<td&gt;conubia</td&gt;
<td&gt;nostra</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,014</td&gt;
<td&gt;per</td&gt;
<td&gt;inceptos</td&gt;
<td&gt;himenaeos</td&gt;
<td&gt;Curabitur</td&gt;
</tr&gt;
<tr&gt;
<td&gt;1,015</td&gt;
<td&gt;sodales</td&gt;
<td&gt;ligula</td&gt;
<td&gt;in</td&gt;
<td&gt;libero</td&gt;
</tr&gt;
</tbody&gt;
</table&gt;
</div&gt;
This is the .js (which loads the content):
$(document).ready(function()
console.log($('.nav.nav-sidebar').children());
$('.navItem').unbind('click').click(changeContentType);
function changeContentType()
$('.navItem').removeClass('active');
$(this).addClass('active');
$('#mainContent').load($(this).data('content') + '.php', function(){});
Why doesn't it apply the stylesheet?
Comment: Just out of curiosity, what's an "ASE"?

Comment: I meant housekeeping / staff panel something like that and the CSS not being applied are Bootstrap.min.css and dashboard.css.

Comment: What is the css that isn't being applied?



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:06/10/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><css>', 'Title': 'Jquery .load not using stylesheet', 'ViewCount': 82, 'id': 30758409, 'user_AboutMe': '<p>Blabla</p>\n', 'user_AccountId': 4418781.0, 'user_DisplayName': 'Joshua Bakker', 'user_Reputation': 2043.0, 'user_Views': 222.0, 'user_id': 3599496.0}}