How to change button in twitter bootstrap using jquery

Question

I have a button:

<button
    class="btn btn-animated btn-default ban-user-btn"
    id="btn-ban-username" // the username is generated by twig
    data-nick="username"  // the username is generated by twig
    data-toggle="modal"
    data-target="#statusModal"
    >
    Ban user
    <i class="fa fa-ban"></i>
</button>

I need to change the button class from "btn-default ban-user-btn" to "btn-success unlock-user-btn". When I do following in my javascript:

var button = $('#btn-ban-username);
button.addClass("btn-default");
button.addClass("ban-user-btn");
button.removeClass("btn-success");
button.removeClass("unlock-user-btn");
button.attr('id', 'btn-unlock-'+nick);
button.html("Unlock user <i class='fa fa-check'></i>");

I get the following:

<button
    class="btn btn-animated btn-default ban-user-btn"
    id="btn-unlock-username"
    data-nick="username"
    data-toggle="modal"
    data-target="#statusModal"
>
    Unlock user
    <i class="fa fa-check"></i>
</button>

As you can see, the ID changes and the button content changes. The classes however do not.

Some ideas?

Cheers

james_bond · Accepted Answer · 2017-01-21 15:55:58Z

1

You're adding classes that the button has and removing classes that the button doesn't have.

Try this:

$("#btn-ban-username")
.addClass("btn-success unlock-user-btn")
.removeClass("btn-default ban-user-btn");

edited Jan 21, 2017 at 15:55

answered Jan 21, 2017 at 15:50

james_bond

6,9163 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LeBlobb Over a year ago

fml, thank you... hours of searching for the error -.-

james_bond Over a year ago

I've updated my answer, if you find my solution useful, please upvote and mark it as accepted. Thanks.

Devinder Yadav · Accepted Answer · 2017-01-21 16:13:12Z

1

In your JavaScript code you have to reverse the order of your addClass and removeClass. addclass function is used to add class to your html control and removeclass for removing class from an html contol.

You have to do this

 var button = $('#btn-ban-username');
        button.removeClass("btn-default");
        button.removeClass("ban-user-btn");
        button.addClass("btn-success");
        button.addClass("unlock-user-btn");
        button.attr('id', 'btn-unlock-dev');
        button.html("Unlock user <i class='fa fa-check'></i>");

answered Jan 21, 2017 at 16:13

Devinder Yadav

1342 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to change button in twitter bootstrap using jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related