CODEWITHSUNDEEP
jqueryclipboard.js
joshmoto
joshmoto

Reputation: 5088

Clipboard.js change button text on copy success with multiple buttons

I'm a trying to change the text on clipboard.js buttons to say 'copied' upon success.

But the problem I have is that I have multiple buttons on the same page, and i'm struggling to target the clicked button. I'm getting an error Uncaught TypeError: Illegal constructor

I would love to know how to handle this better.

jQuery

$('.copy-link').on('click', function() {

  var copy_id = $(this).attr('id');

  var clipboard = new Clipboard( '#' + copy_id );

  clipboard.on('success', function(e) {
    $(this).text('Copied');
    setTimeout(function() {
      $(this).text('Copy link')
    }, 2000);
  });

});

HTML

<button id="copy_1" data-clipboard-text="Test 1" class="copy-link">Copy link</button><br/>
<button id="copy_2" data-clipboard-text="Test 2" class="copy-link">Copy link</button><br/>
<button id="copy_3" data-clipboard-text="Test 3" class="copy-link">Copy link</button><br/>
<button id="copy_4" data-clipboard-text="Test 4" class="copy-link">Copy link</button><br/>
<button id="copy_5" data-clipboard-text="Test 5" class="copy-link">Copy link</button><br/>

jsFiddle

See my code above as a fiddle https://jsfiddle.net/joshmoto/akh39dtc/

Any advice would be much appreciated thanks.

Upvotes: 1

Views: 2591

Answers (3)

Pheonix2105
Pheonix2105

Reputation: 1011

let cb = new ClipboardJS('.copy-link');
$('.copy-link').on('click', function() {
  //get a reference to the JQUERY object of the current button
  let theButton = $(this);
  var copy_id = $(this).attr('id');

  var clipboard = new ClipboardJS( '#' + copy_id );

  clipboard.on('success', function(e) {
    //use the .text method of the Jquery object
    theButton.text('Copied');
    setTimeout(function() {
    //same again
      theButton.text(e.text);
    }, 2000);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="copy_1" data-clipboard-text="Test 1" class="copy-link">Copy link</button><br/>
<button id="copy_2" data-clipboard-text="Test 2" class="copy-link">Copy link</button><br/>
<button id="copy_3" data-clipboard-text="Test 3" class="copy-link">Copy link</button><br/>
<button id="copy_4" data-clipboard-text="Test 4" class="copy-link">Copy link</button><br/>
<button id="copy_5" data-clipboard-text="Test 5" class="copy-link">Copy link</button><br/>

var clipboard = new Clipboard( '#' + copy_id );

Needs to be 

var clipboard = new ClipboardJS( '#' + copy_id );

Edit: I'm a little confused I have the correct library, if you mean

https://clipboardjs.com/

My above code should work.

I am sorry I quite busy I will update the answer a final time with an explanation of how/why.

Upvotes: 3

bit15
bit15

Reputation: 1

    $(document).ready( function() {
        $(".copy-link").click(function(){
            $(this).html("copied");
        });
    });
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<button id="copy_1" data-clipboard-text="Test 1" class="copy-link">Copy link</button><br/>
<button id="copy_2" data-clipboard-text="Test 2" class="copy-link">Copy link</button><br/>
<button id="copy_3" data-clipboard-text="Test 3" class="copy-link">Copy link</button><br/>
<button id="copy_4" data-clipboard-text="Test 4" class="copy-link">Copy link</button><br/>
<button id="copy_5" data-clipboard-text="Test 5" class="copy-link">Copy link</button><br/>

Upvotes: 0

Saurabh Yadav
Saurabh Yadav

Reputation: 3386

This is due to the scope i have use arrow function. ES6 arrow functions can’t be bound to a this keyword, so it will lexically go up a scope, and use the value of this in the scope in which it was defined. May this helps you

$('.copy-link').on('click', function() {

  var copy_id = $(this).attr('id');

  var clipboard = new Clipboard( '#' + copy_id );

  clipboard.on('success', (e)=> {        // use arrow function
    $(this).text('Copied');
    setTimeout(()=> { // use arrow function

      $(this).text('Copy link')
    }, 2000);
  });

});

Upvotes: 1

Related Questions