Trouble using ZeroClipboard to copy text with zClip library

Question

I am having trouble copying text using zeroclipboard. This is my html code:

<dl class="codebox"><dt>Code: <a href="#" onclick="selectCode(this); return false;">Select all</a> | <a id="copytxt" href="#" onclick="return false;" class="">Copy to clipboard</a><div class="zclip" id="zclip-ZeroClipboardMovie_1" style="position: absolute; width: 97px; height: 15px; z-index: 99; left: 196px; top: 1032px; "><embed id="ZeroClipboardMovie_1" src="code/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="97" height="15" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=97&amp;height=15" wmode="transparent"></div></dt><dd><code>This is my code that I want to copy</code></dd></dl>

This is my jQuery code to copy the text:

<script type="text/javascript">
$(document).ready(function(){
        $("#copytxt").zclip({
            path: "code/ZeroClipboard.swf",
            copy: function(){return jQuery(".codebox").find(".prettyprint");}
      });
});
</script>

This is where I am having trouble, because when i click the Copy to Clipboard link it gives me a alertbox but it says that it has copied nothing which means everything is okay except this part:

copy: function(){return jQuery(".codebox").find(".prettyprint");}

I have tried everything to solve it. I also have another problem, the code above only embeds the zeroclipboard to the first element with the 'copytxt' ID and not all of them.

Here is one of the places where the problem occurs (at my forum): -removed-

I don't know if it will help but i'm using phpBB. And im also using zclip: http://www.steamdev.com/zclip/ for the zeroclipboard.

Thanks.

Answer 1

The reason that it only attaches to one item with the copytxt id is that you can only have one element per page with a given id. Ids must be unique.

It probably isn't copying anything to the clipboard because the copy: option takes a function that returns: "any string, or any javascript expression or function that returns a string". Your function returns a jQuery object which is not a string. If you want the text out of the .prettyprint element (which you have not shown in your example HTML), then you need to get the text out of it like this:

 copy: function(){return jQuery(".codebox").find(".prettyprint").text();}

If you want it to work in more than one place, then use class names instead of ids and use a selector that will fetch all the objects with that class name.

If you want it to fetch text that is relative to the link that was clicked on, you will need to change the text retrieval code to fetch text from an object that is relative to what was clicked on.

To fetch it relative to what was clicked on and to allow multiple ones to work, you could change id="copytxt" to class="copytxt" and use code like this:

<script type="text/javascript">
$(document).ready(function(){
        $(".copytxt").zclip({
            path: "code/ZeroClipboard.swf",
            copy: function() {
                return jQuery(this).closest(".codebox").find(".prettyprint").text();
            }
      });
});
</script>

The addition of jQuery(this).closest(".codebox") starts the search for the .prettyprint object at the closest ancestor that has class="codebox" to the point of the click. So, it will go up the ancestor tree from where the click happened, find the parent codebox and then find the prettyprint in that codebox.

The change to $(".copytxt").zclip allows it to return all objects with class="copytxt" rather than only one object with id="copytxt".