javascript - Jquery .load not using stylesheet -
sorry bad english title, i'm making ase , want dynamic pages. 1 container , when clicked on navigation item load pages container.
however, if use jquery .load, style not correct. seems doesn't use stylesheet either main page content page. put stylesheet link on both. use bootstrap.
this main.php (the main page container):
<?php include('../includes/global.php'); ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title><?php echo core::getsettings()->getvalue('blogname'); ?> ase - dashboard</title> <!-- bootstrap core css --> <link href="../styles/bootstrap.min.css" rel="stylesheet"> <!-- custom styles template --> <link href="../styles/dashboard.css" rel="stylesheet"> <!-- debugging purposes. don't copy these 2 lines! --> <!--[if lt ie 9]><script src="../scripts/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../scripts/ie-emulation-modes-warning.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="script/ase_main.js"></script> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><?php echo core::getsettings()->getvalue('blogname'); ?></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">dashboard</a></li> <li><a href="#">settings</a></li> <li><a href="#">profile</a></li> <li><a href="#">help</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="search..."> </form> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <?php include ('headers/navigator.php'); ?> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="maincontent"></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="../scripts/bootstrap.min.js"></script> <script src="../scripts/docs.min.js"></script> <script src="../scripts/ie10-viewport-bug-workaround.js"></script> </body> </html> this dashboard.php (the page dynamically loaded):
<link href="../styles/dashboard.css" rel="stylesheet"> <h1 class="page-header">dashboard</h1> <div class="row placeholders"> <div class="col-xs-6 col-sm-3 placeholder"> <img data-src="../scripts/holder.js/200x200/auto/sky" class="img-responsive" alt="generic placeholder thumbnail"> <h4>label</h4> <span class="text-muted">something else</span> </div> <div class="col-xs-6 col-sm-3 placeholder"> <img data-src="../scripts/holder.js/200x200/auto/vine" class="img-responsive" alt="generic placeholder thumbnail"> <h4>label</h4> <span class="text-muted">something else</span> </div> <div class="col-xs-6 col-sm-3 placeholder"> <img data-src="../scripts/holder.js/200x200/auto/sky" class="img-responsive" alt="generic placeholder thumbnail"> <h4>label</h4> <span class="text-muted">something else</span> </div> <div class="col-xs-6 col-sm-3 placeholder"> <img data-src="../scripts/holder.js/200x200/auto/vine" class="img-responsive" alt="generic placeholder thumbnail"> <h4>label</h4> <span class="text-muted">something else</span> </div> </div> <h2 class="sub-header">section title</h2> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>header</th> <th>header</th> <th>header</th> <th>header</th> </tr> </thead> <tbody> <tr> <td>1,001</td> <td>lorem</td> <td>ipsum</td> <td>dolor</td> <td>sit</td> </tr> <tr> <td>1,002</td> <td>amet</td> <td>consectetur</td> <td>adipiscing</td> <td>elit</td> </tr> <tr> <td>1,003</td> <td>integer</td> <td>nec</td> <td>odio</td> <td>praesent</td> </tr> <tr> <td>1,003</td> <td>libero</td> <td>sed</td> <td>cursus</td> <td>ante</td> </tr> <tr> <td>1,004</td> <td>dapibus</td> <td>diam</td> <td>sed</td> <td>nisi</td> </tr> <tr> <td>1,005</td> <td>nulla</td> <td>quis</td> <td>sem</td> <td>at</td> </tr> <tr> <td>1,006</td> <td>nibh</td> <td>elementum</td> <td>imperdiet</td> <td>duis</td> </tr> <tr> <td>1,007</td> <td>sagittis</td> <td>ipsum</td> <td>praesent</td> <td>mauris</td> </tr> <tr> <td>1,008</td> <td>fusce</td> <td>nec</td> <td>tellus</td> <td>sed</td> </tr> <tr> <td>1,009</td> <td>augue</td> <td>semper</td> <td>porta</td> <td>mauris</td> </tr> <tr> <td>1,010</td> <td>massa</td> <td>vestibulum</td> <td>lacinia</td> <td>arcu</td> </tr> <tr> <td>1,011</td> <td>eget</td> <td>nulla</td> <td>class</td> <td>aptent</td> </tr> <tr> <td>1,012</td> <td>taciti</td> <td>sociosqu</td> <td>ad</td> <td>litora</td> </tr> <tr> <td>1,013</td> <td>torquent</td> <td>per</td> <td>conubia</td> <td>nostra</td> </tr> <tr> <td>1,014</td> <td>per</td> <td>inceptos</td> <td>himenaeos</td> <td>curabitur</td> </tr> <tr> <td>1,015</td> <td>sodales</td> <td>ligula</td> <td>in</td> <td>libero</td> </tr> </tbody> </table> </div> this .js (which loads 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 apply stylesheet?
Comments
Post a Comment