CODEWITHSUNDEEP
jquerytwitter-bootstrapbutton
Xauxatz
Xauxatz

Reputation: 143

How to set title of bootstrap loading button?

I have the following code:

            var submit_button = $(t.find(":submit"));
            submit_button.button("loading");

I want the title of the button to be "Please wait...", but how can I achieve this? If I set use "text" or "html" before the above call, the title is reset to "loading".

This was the solution - as provided below by Nimish Gupta:

var submit_button = $(t.find(":submit"));
submit_button.attr('data-loading-text', "Please wait...");
submit_button.button("loading");

Upvotes: 0

Views: 468

Answers (2)

Nimish Gupta
Nimish Gupta

Reputation: 3175

You can add data-loading-text="Loading..." to your submit button along with js code

$("form").on("submit", function(){
    $(this).find(':submit').button("loading...");
})

Upvotes: 1

Mujthaba Ibrahim
Mujthaba Ibrahim

Reputation: 208

You can simple use ladda bootstrap button.

HTML: 

<a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">Submit</span></a>

$(document).ready(function(){
Ladda.bind( 'input[type=submit]' );
});

$(function() {
    $('#form-submit').click(function(e){
        e.preventDefault();
        var l = Ladda.create(this);
        l.start();
        $.post("your-url", 
            { data : data },
          function(response){
            console.log(response);
          }, "json")
        .always(function() { l.stop(); });
        return false;
    });
});

It will show a loader beside your button.

See more at : https://msurguy.github.io/ladda-bootstrap/

Upvotes: 0

Related Questions