Not Able to Update Button Text and Font Icon on Click Event

Can you please take a look at this demo and let me know how to change/update the text and font icon of a button on click event properly

$(".btn-warning").click(function() {
      $(this).toggle(function() {
          $('.btn-warning').text("Remove Filter <i class='fa fa-filter'></i>");
      }, function() {
          $('.btn-warning').text("Apply Filter <i class='fa fa-remove'></i>"); 
      });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>

4 answers

  • answered 2018-12-05 20:27 Tanner_Gram

    Try this. I think this will more-or-less get you started.

    https://jsfiddle.net/3bq9fuwz/

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
    
                $(".btn-warning").click(function() {
                  $(this).html('It is a new name bro');
                  $(this).find($(".fa")).removeClass('fa-filter').addClass('fa-remove');
                });
    

  • answered 2018-12-05 20:31 Aravindan Ve

    Here You go.

    $(".btn-warning").click(function() {
        var $btn = $(this);
        if ($btn.hasClass('x-on')) {
            $btn.removeClass('x-on').html("Apply Filter <i class='fa fa-filter'></i>");
        } else {
            $btn.addClass('x-on').html("Remove Filter <i class='fa fa-remove'></i>");
        }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>

  • answered 2018-12-05 20:31 zfrisch

    toggle doesn't work how this code would like it to. It doesn't mean do this or do something else - When you toggle you cause JQuery to fade-out/in the element and the function call is performed when the animation completes.

    So you click and fade out the element, but now there's nothing to click on to bring it back and your changes will not be seen.

    To change the code on click we can simply set a variable on the function itself (this.clicked) and toggle the html of the element based on whether it's the first or second click. This will be determined by checking if this.checked is true or false.

    $(".btn-warning").click(function() {
      if (this.clicked == undefined) this.clicked = false;
      this.clicked = !this.clicked;
    
      (this.clicked) ?
      $('.btn-warning').html("Remove Filter <i class='fa fa-filter'></i>") :
      $('.btn-warning').html("Apply Filter <i class='fa fa-remove'></i>");
    });
    

    $(".btn-warning").click(function() {
      let btn = $(".btn-warning");
      if (this.clicked == undefined) this.clicked = false;
      this.clicked = !this.clicked;
    
      (this.clicked) ?
      btn.html("Remove Filter <i class='fa fa-filter'></i>") :
      btn.html("Apply Filter <i class='fa fa-remove'></i>");
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>

  • answered 2018-12-05 20:34 Shidersz

    (1) The JQuery toggle() method will toggle the button visibility, you don't need this one.

    (2) If you need to change the html of an element, do not use the text() method, instead use the html() method. The text() method will not recognize the html markup as you want.

    One approach you can use is detecting if the <i> tag inside the button has some class (Read about hasClass()), and then act based on this condition:

    $(".btn-warning").click(function()
    {
        if ($(this).find("i").hasClass("fa-filter"))
            $(this).html("Remove Filter <i class='fa fa-remove'></i>");
        else
            $(this).html("Apply Filter <i class='fa fa-filter'></i>");
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    
    <button type="button" class="btn btn-warning">
      Apply Filter <i class="fa fa-filter"></i>
    </button>