MDB4 change button to loading...

Topic: MDB4 change button to loading...

matthias_deox pro asked 6 years ago

Does this work with MDB4? http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=stateful-button I think I read somewhere .button('loading') isn't supported anymore by newer versions of bootstrap.

Add comment

Michal Szymanski staff answered 6 years ago

0 0 Best answer

There isn't such a functionality in MDB.

Add comment

matthias_deox pro answered 6 years ago

0 0 Best answer

Strange, works perfectly for me.

Basically it only displays this code:

<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Stateful Buttons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">  
$(function() { 
    $(".btn").click(function(){
        $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
            $(this).dequeue();
        });        
    });
});   
</script>
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default" data-loading-text="Loading ...">Default</button>
    <button type="button" class="btn btn-primary" data-loading-text="Loading...">Primary</button>
    <button type="button" class="btn btn-info" data-loading-text="Loading...">Info</button>
    <button type="button" class="btn btn-success" data-loading-text="Loading...">Success</button>
    <button type="button" class="btn btn-warning" data-loading-text="Loading...">Warning</button>
    <button type="button" class="btn btn-danger" data-loading-text="Loading...">Danger</button>
    <button type="button" class="btn btn-link" data-loading-text="Loading...">Link</button>
</div>
</body>
</html>                                		</code></pre>

Please insert min. 20 characters.

Strange, works perfectly for me. Basically it only displays this code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Stateful Buttons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">  
$(function() { 
    $(".btn").click(function(){
        $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
            $(this).dequeue();
        });        
    });
});   
</script>
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default" data-loading-text="Loading ...">Default</button>
    <button type="button" class="btn btn-primary" data-loading-text="Loading...">Primary</button>
    <button type="button" class="btn btn-info" data-loading-text="Loading...">Info</button>
    <button type="button" class="btn btn-success" data-loading-text="Loading...">Success</button>
    <button type="button" class="btn btn-warning" data-loading-text="Loading...">Warning</button>
    <button type="button" class="btn btn-danger" data-loading-text="Loading...">Danger</button>
    <button type="button" class="btn btn-link" data-loading-text="Loading...">Link</button>
</div>
</body>
</html>

Add comment

Michal Szymanski staff answered 6 years ago

0 0 Best answer

Provided link doesn't work, at least right now.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

matthias_deox

Pro User 14Support score
9Questions 5Answers 0Snippets