Question

I am using Twitter Bootstrap and Codeigniter. I am also using a Template system.

In the header view, I load both jquery.min.js and bootstrap.min.js and the paths are found as I can click and see the code when I do view-source.

In my controller, I have the following to generate the view:

$this->template->set_partial('header', 'layouts/admin_header');
$this->template->set_partial('footer', 'layouts/admin_footer');
$this->template->set_partial('sidebar', 'layouts/admin_sidebar');
$this->template->build('admin/category/order', $this->data);

In the header layout view, I have:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="<?=base_url();?>assets/admin/js/bootstrap.min.js"></script>

Now, in the order.php view, if I just have the following, the button doesn’t work:

<script type="text/javascript"> 

$(document).ready(function(){
  $('#button').button();

  $('#button').click(function() {
    $(this).button('loading');
  });  
});

</script>

<button class="btn" id="button" data-text-loading="Loading...">Press Me</button>

If I change the view to this, it does work (the only changed is that I repeated the bootstrap.min.js from the header into the actual view above the jQuery):

<script src="<?=base_url();?>assets/admin/js/bootstrap.min.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){
  $('#button').button();

  $('#button').click(function() {
    $(this).button('loading');
  });  
});

</script>

<button class="btn" id="button" data-text-loading="Loading...">Press Me</button>

If I view-source after the whole page is generated, the bootstrap.min.js is found twice, once in the header, and again directly above the button jQuery.

I can put other jQuery into this page and it works perfectly fine. It’s only the Twitter Bootstrap javascript that has issues.

This is driving me absolutely nuts, does anyone know why it’s doing this? I really do not want to have to add the bootstrap.min.js to each individual view…

Answer 1

I had jquery-ui-1.8.21.custom.min.js loading after bootstrap.min.js. Apparently there’s some conflict.