0

The CMS I'm using is dependent on a certain version of Bootstrap. However, I need features of Bootstrap 3.3.6 depending on which page is loaded in the browser.

I had thought to use javascript or jQuery to dynamically include whichever Bootstrap version I needed based on the URL of the page. But, because Bootstrap is loaded in the <head> tag, I can't figure out how to make the javascript run since (from what I'm reading, but maybe misunderstanding) Javascript won't run in <head> tags.

Is there a way to dynamically select which version of Bootstrap to include using only Javascript or jQuery?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
NMP
  • 25
  • 2
  • 2
    Which features are you needing that aren't present in the old version? Which version is the old version? If it's just because of the grid syntax (e.g. `span12` as opposed to `col-sm-12`), could it possibly be easier to just update the CMS templating/views? – Joseph Marikle Apr 19 '16 at 13:31
  • 1
    Possible duplicate of [Dynamically add script tag with src that may include document.write](http://stackoverflow.com/questions/13121948/dynamically-add-script-tag-with-src-that-may-include-document-write) – zero298 Apr 19 '16 at 13:44

3 Answers3

1

I think jQuery.getScript() might work for this.

https://api.jquery.com/jquery.getscript/

GrahamJ
  • 528
  • 4
  • 15
1

You could use a function, like:

<?php 
function get_path() {
$path = array();
 if (isset($_SERVER['REQUEST_URI'])) {
$request_path = explode('?', $_SERVER['REQUEST_URI']);

$path['base'] = rtrim(dirname($_SERVER['SCRIPT_NAME']), '\/');
$path['call_utf8'] = substr(urldecode($request_path[0]), strlen($path['base']) + 1);
$path['call'] = utf8_decode($path['call_utf8']);
if ($path['call'] == basename($_SERVER['PHP_SELF'])) {
  $path['call'] = '';
}
$path['call_parts'] = explode('/', $path['call']);

$path['query_utf8'] = urldecode($request_path[1]);
$path['query'] = utf8_decode(urldecode($request_path[1]));
$vars = explode('&', $path['query']);
foreach ($vars as $var) {
  $t = explode('=', $var);
  $path['query_vars'][$t[0]] = $t[1];
}
}
return $path; 
}

?>

You can than call the function like:

<?php 
$path = get_path();  // I forgot to add this 1st time
if($path['call_parts'][0] == 'your page'){ 
//do something 
} else { 
 //do something else
 } ?>

You could echo the $path['call_parts'] array to see what exactly you need to call.

<?php 
 echo '<pre>'; 
 print_r($path); 
 echo '</pre>'; 
?>
Marin N.
  • 366
  • 3
  • 12
1

I know you asked for specifically JS or JQuery but could you tackle this in a different way. If your CMS is PHP driven you could just add a switch in the header/footer of the page to load the bootstrap version you need when teh page loads

$v2_pages = array('about_us','shop_page');

$v2_pages = array('index','portfolio');

<?php if(in_array($current_page,$v2_pages)){ ?>

   <script src"your bootstrap v2 js/css here">

<?php }elseif(in_array($current_page,$v3_pages)){ ?>

   <script src"your bootstrap v3 js/css here">

<?php } ?>

And your page identifiers could be an array of page names or ids as above or pulled from a table or whatever.

Keith Ivison
  • 387
  • 4
  • 11