CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
artworkjpm
artworkjpm

Reputation: 1337

bootstrap loading button state not working

I want my button to change to a loading state as per the boostrap documentation http://getbootstrap.com/javascript/#buttons

Why does my button not change to a loading state here?

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE>Bootstrap Example</TITLE>
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css ">
<STYLE>
</STYLE>
</HEAD>
<BODY>
    <button type="button" class="btn btn-primary" id="btnD" data-loading-text="=)">hola!!!</button>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>
    <script type="text/javascript">
        $(function(){
            $('#btnD').click(function(){
                  var btn = $(this); 
                  btn.button('loading');
            });
        });
    </script>
</BODY>
</HTML>

Upvotes: 0

Views: 5586

Answers (2)

Mohan Kumar
Mohan Kumar

Reputation: 102

I recommend you to download the bootstrap css and js files in your machine. It works fine when the bootstrap css and js files are placed inline or link to css and js files placed in client machine. The Bootstrap css and js Urls are not valid one. Download Bootstrap css and js files here

Upvotes: 1

FrancoisBaveye
FrancoisBaveye

Reputation: 1902

The bootstrap URLs are not correct, no JS or CSS were loaded. These will work :

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE>Bootstrap Example</TITLE>
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<STYLE>
</STYLE>
</HEAD>
<BODY>
    <button type="button" class="btn btn-primary" id="btnD" data-loading-text=":)">hola!!!</button>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btnD').click(function(){
                  var btn = $(this); 
                  btn.button('loading');
            });
        });
    </script>
</BODY>
</HTML>

The visual aspect of the button should change too.

Upvotes: 3

Related Questions