CODEWITHSUNDEEP
javascriptclipboardclipboard.js
marS
marS

Reputation: 389

can't get "clipboard.js" to work

I can't get the clipboard.js to work; I think it's a simple "misunderstanding" about how the whole thing works, since I'm not even able to get the most simple example to work properly like in this Fiddle...

My specific problem is getting this to work:

HTML:

<button class="copyButton" 
        id="copyButtonId" 
        data-id="@item.Type" 
        data-clipboard-action="copy" 
        data-clipboard-target="#[email protected]">
</button>

The div that should be copied is this: 

   <div id="[email protected]">
       @item.Type
       Name...: @item.Name
       Address: @item.Address
   </div>`

The JS is: 

$(function() {
$(document).on("click", ".copyButton", function() {
    var clipboard = new Clipboard(".copyButton"); 
    clipboard.destroy();
  });
});

I'm getting into the function, but nothing is happening. I tried:

clipboard.copy();

but that just throws me an exception...

I can get the text, that I want to copy

var id= "copy_" + $(this).attr("data-id"); var source = ($("#" + agent).html());

But I should be able only to work it out by using clipboard.js.

I can't get any examples to work, so I would be happy if someone shows me a complete example. I've really tried to understand and I may be overthinking the whole thing and making this more complicated than it is. I don't want any workarounds, as I used that before and think this is a great js-solution... If I could just understand it :)

Every hint into the right direction is appreciated!

Upvotes: 11

Views: 24575

Answers (3)

champion-runner
champion-runner

Reputation: 1647

Incase of API data use

import Clipboard from 'clipboard';
''''''
''''''
''''''
 var clipboard = new Clipboard('.class_name_of_the_div');
  clipboard.on('success', function (event) {});
  clipboard.on('error', function (evwnt) {});

data-clipboard-text={data.text}

Upvotes: 1

entymon
entymon

Reputation: 72

Sorry, I haven't got time to read all but for the library https://www.npmjs.com/package/clipboard you can use

import ClipboardJS from 'clipboard'

and then new ClipboardJS('.btn')

or check if this import Clipboard from 'clipboard' works specially for your solution

Upvotes: -2

Victoria S.
Victoria S.

Reputation: 559

Make sure you add the right library first ;)

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

Or your local min.js

I've altered your code to this:

<div id="copy">
    @item.Type
    Name...: @item.Name 
    Address: @item.Address
</div>

<button class="copyButton" id="copyButtonId" data-id="@item.Type"
 data-clipboard-action="copy" data-clipboard-target="div#copy">Copy!</button>

and the js:

var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});

With me it copies the div now. Let me know if it doesn't for you.

Upvotes: 12

Related Questions