Question 10721 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Replace label of a button and bring its default label after a moment

I want to change label of a button for a moment and then bring it the original state.
All the commented lines are my attempts to make it work but I’m struggling.
Can somebody show me the correct approach?
codepen

$(".btn").click(function() {
  //$(this).contents().remove();
  $(this).html('loading...');
  //$(this).html('<i class="fa fa-spinner fa-spin"></i> loading...'); //adding animation
  //$(this).attr('disabled', true); //disabling 
  setTimeout(() => {
    //how to reset default contents????????????????
    //$(this).children().find('fa').remove();
    //$(this).attr('disabled', false); //enabling
    //$(this).html('<i class="fa fa-plus"></i> Add Book'); //defaulting
    //$(this).children().show();
  }, 500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button class="btn btn-success btn-lg"><i class="fa fa-plus"></i> Edit Book</button>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Answer is to store initial value in variable:

    var initialValue =$(this).html();

    and then restoring it

     $(this).html(initialValue);

    All with 2 lines of code and I was going around like crazy. Entire code looks like this:

     $(".btn").click(function() {
       var initialValue =$(this).html();
      $(this).html('<i class="fa fa-spinner fa-spin"></i> loading...'); //adding animation
      setTimeout(() => {
     $(this).html(initialValue);
      }, 500);
    });

  2. 0

    Using data-attributes

    $(".btn").click(function() {
  const $btn = $(this);
  $btn.data("html", $btn.html())
  $btn.html('<i class="fa fa-spinner fa-spin"></i> loading...');
  setTimeout(() => {
    $btn.html($btn.data("html"))
  }, 500);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit"><i class="fa fa-plus"></i> Edit Book</button>
      </td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit"><i class="fa fa-plus"></i> Edit Book</button>
      </td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit"><i class="fa fa-plus"></i> Edit Book</button>
      </td>
    </tr>
  </tbody>
</table>

    With one button, two texts:

    $(".btn").click(function() {
  const $spans = $(this).find("span");
  $spans.eq(0).toggle();
  $spans.eq(1).toggle();
  setTimeout(() => {
    $spans.eq(0).toggle();
    $spans.eq(1).toggle();
  }, 500);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit">
          <span><i class="fa fa-plus"></i> Edit Book</span>
          <span hidden><i class="fa fa-spinner fa-spin"></i> loading...</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit">
          <span><i class="fa fa-plus"></i> Edit Book</span>
          <span hidden><i class="fa fa-spinner fa-spin"></i> loading...</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <button class="btn btn-success btn-lg edit">
          <span><i class="fa fa-plus"></i> Edit Book</span>
          <span hidden><i class="fa fa-spinner fa-spin"></i> loading...</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  3. 0

    Since you already use an arrow function, you can refer to this inside the callback of timeout, it will still mean the button which was clicked. Working example:

    $(".btn").click(function() {
  $(this).html('loading...');
  setTimeout(() => {
    $(this).html("Edit Book");
  }, 500);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button class="btn btn-success btn-lg"><i class="fa fa-plus"></i> Edit Book</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search