Help with Zeroclipboard


Can anyone help me with getting Zeroclipboard running with Meteor? I’ve not used it before, but it looks like it’s the best solution for what I need to do (put something on the clipboard).

I’ve tried using Propercursive’s package ( but because I’m not that good a JS coder I keep running into errors I can’t really seem to understand. Even trying to do it ‘statically’ - like getting a bit of test-text into the clipboard - seems to end with no result.

Does anyone have a working example out there for me to have a look at?

Thanks in advance!


So a little more info (sorry for omitting this. I was in a bit of a hurry earlier)

When I add the package mentioned above and add

var client = new ZeroClipboard();

to /client/main.js it comes back with the following error:

Uncaught TypeError: Cannot read property 'appendChild' of null
    _embedSwf @ ZeroClipboard.js:1224
    _create @ ZeroClipboard.js:636
    ZeroClipboard.create @ ZeroClipboard.js:1963
    _clientConstructor @ ZeroClipboard.js:2101
    ZeroClipboard._createClient @ ZeroClipboard.js:2455
    ZeroClipboard @ ZeroClipboard.js:1874
    (anonymous function) @ main.js?e1687cea1a97451376ea4621c45c52d02d60e961:1
    (anonymous function) @ main.js?e1687cea1a97451376ea4621c45c52d02d60e961:5

I think the .swf file is in the correct location when I trawl through the package code, but as I said, I’ve not got much JS/Meteor experience so I’m wondering if I’m making a rookie error here.

I haven’t used this package, so I may be completely off-base here :smile:

The github docs suggest that you need to supply a DOM element to ZeroClipboard (which may explain the Cannot read property 'appendChild' of null message.

// main.js
var client = new ZeroClipboard( document.getElementById(“copy-button”) );

If that’s the case, then your best bet for instantiating this may be in the onRendered function of a template.

<template name="copyToClipboard">
  <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>

Template.copyToClipboard.onRendered(function() {
  this.client = new ZeroClipboard(document.getElementById("copy-button"));

That’s a rather naive example, but it re-uses the github documented code.

Naive enough to actually work! Thank you very much!!

I was looking in the right direction (adding a DOM element) but obviously not putting everything in the right locations. The missing link for me was the onRendered() function.

Thanks again!

1 Like

in case of onRendered I would suggest creating it something like

var this.client 

to scope it on template level.

And in onDestroyed call that .destroy() to clean after yourself.

Errm, var this.client doesn’t actually make sense. Within onRendered, this.client is template scoped.

Good call to clean up with an onDestroyed callback :smile:

I dont know, I scope everything in template as @something in coffeescript.
Not sure what is correct JS equivalent.
And I want it to be template scoped, so if you render more instances of copy buttons, it would not touch each others “client” reference in global scope.