Twitter Bootstrap Question posted in

How to change button in twitter bootstrap using jquery

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

Tags:

2

Answers


  1. 0

    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");
    Login or Signup to reply.
  2. 0

    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>");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search