Twitter Bootstrap button js not working

Question

I am using Twitter Bootstrap and I can't seem to get the button states to change.

I am copying the js from http://jsfiddle.net/YCst4/1/ and I'm not getting a response. It's like I don't have jQuery loaded, but I have bootstrap.min.js loaded in my header. I don't have any problems with other javascript on the page.

This is what I have in my Codeigniter view:

<script>
$('#button').button();

$('#button').click(function() {
    $(this).button('loading');
});
</script>

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

Any ideas on what's causing this? is bootstrap-button.js not a part of the bootstrap.min.js that comes with Bootstrap?

http://twitter.github.com/bootstrap/javascript.html#buttons

EDIT:

When I view-source the page, I can see the bootstrap.min.js loaded in the header view, and I can click on it to see it's source, so the path is correct. However, the button js code only works when I repeat <script src="http://site.dev/assets/admin/js/bootstrap.min.js"></script> in the actual content view itself.

I have the jQuery loaded a line above the bootstrap.min.js and the jQuery elements in the same view as the button work perfectly. I'm stumped.

Answer 1

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

Answer 2

You need to put you code in a document ready function so that it will run after the page is ready, not before.

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

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

JS Fiddle seems to do this automatically for you, which is why it works there.