Hoping for some assistance that's been bugging me for hours. I'm not 100% familiar with Javascript/jQuery however I can try build stuff together with some templates/examples. Just now I have a database and html site using bootstrap to populate a table. I am looking to implement a 'Copy to clipboard' button for each entry in the table.
Using the latest version of ZeroClipboard (v2.2), I have found it difficult to create the javascript to cope with multiple buttons. Starting with the basic example provided by ZeroClipboard, I tried altering it to work but found it wasn't working with multiple buttons. I have set the id field to the data generated from the database however even changing this a static value still wasn't working for me.
I am totally lost now and tried so many different options around the web that I can't even remember what was from the example and what I tried using the different examples.
Any help would save me hours of tedious troubleshooting.
Cheers
Code Snippet below:
HTML:
<html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/dist/ZeroClipboard.js"></script>
<script src="js/main.js"></script>
<body>
<tbody>
<tr >
<td>{{data.userdata1}}</td>
<td><button id="{{data.userdata2}}" data-clipboard-text="{{data.userdata2}}">Copy to clipboard</button></td>
</tr>
</tbody>
</body>
</html>
Tried changing the id to but still nothing:
<td><button id="{{data.userdata2}}_copy" data-clipboard-text="{{data.userdata2}}">Copy to clipboard</button></td>
<td><button id="copy-text" data-clipboard-text="{{data.userdata2}}">Copy to clipboard</button></td>
Javascript:
// main.js
// var client = new ZeroClipboard( document.getElementById("copy-text") );
var client = new ZeroClipboard($(".copy"));
client.on( "ready", function( readyEvent ) {
// alert( "ZeroClipboard SWF is ready!" );
client.on( "aftercopy", function( event ) {
// `this` === `client`
// `event.target` === the element that was clicked
// event.target.style.display = "none";
// alert("Copied text to clipboard: " + event.data["text/plain"] );
} );
} );