Can't get zclip to actually copy to the clipboard, yet it seems to be grabbing the right data

StackOverflow https://stackoverflow.com/questions/22509230

  •  17-06-2023
  •  | 
  •  

Question

I have a web app that I'd like to add the ability to copy HTML and text from... copy it to the clipboard.

So, I fiddled around with Zeroclipboard, couldn't get that to work, and then discovered it's no longer being supported / developed anyways. So, I went with a fork of that, called Zclip.

I wanted a single function that I could pass two divs to... where the div/button that says "copy text" is... and where the target div we want to copy text to was. I inserted "alerts" to tell me how far I was getting / to try to debug it. The alerts suggested we were handing off the proper div / text to zclip. But every time I checked my clipboard, the text wasn't there!

Trying this on FF, IE, and Chrome.

So, I started stripping down my files to try to figure this out. Here's a test page I have:

<html>
<head>
     <script src="js/vendor/jquery-1.10.2.min.js"></script>
    <script src="http://www.steamdev.com/zclip/js/jquery.zclip.min.js"></script>
<script>

 $(document).ready(function(){

    var click_div_id = 'copy_results_table_to_CB';
    var source_div_id = 'results';

        alert("SetCopyableDiv was called for:   click_div_id = " + click_div_id + "     source_div_id to copy = " + source_div_id);

        $('#'+ click_div_id).zclip({
            path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
            copy: function(){ 
                var text = $('#' + source_div_id).text();
                alert("Copy attempt made.   Text = " + text);
                console.log(text);
                return  text;
            },
            beforeCopy:function(){
            alert("Copy was pressed!");
            },
            afterCopy:function(){
                alert("Done with copy to clipboard!");
            }
        });
}); 

</script>
</head>
<body>

<div id="results" class="results">

<table class="data">
  <tr>
    <th>Entry Header 1</th>
    <th>Entry Header 2</th>
    <th>Entry Header 3</th>
    <th>Entry Header 4</th>
  </tr>
  <tr>
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>
    <td>Entry First Line 3</td>
    <td>Entry First Line 4</td>
  </tr>
  <tr>
    <td>Entry Line 1</td>
    <td>Entry Line 2</td>
    <td>Entry Line 3</td>
    <td>Entry Line 4</td>
   </tr>
  <tr>
    <td>Entry Last Line 1</td>
    <td>Entry Last Line 2</td>
    <td>Entry Last Line 3</td>
    <td>Entry Last Line 4</td>
  </tr>
</table>

</div>

<button id="copy_results_table_to_CB">Copy to clipboard?</button>

</body>

I've got a JSFiddle of this over at: http://jsfiddle.net/DR4296/V52eK/

What's odd is, the "copy" alert pops up, THEN the "beforecopy" alert, and the "aftercopy" one never appears, which makes me think something's really choking.

Any thoughts?

Was it helpful?

Solution

Remove the alert() in copy handler and It should work:

http://jsfiddle.net/V52eK/2/

$(document).ready(function(){

    var click_div_id = 'copy_results_table_to_CB';
    var source_div_id = 'results';

        $('#'+ click_div_id).zclip({
            path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
            copy: function(){ 
                var text = $('#' + source_div_id).text();
                //alert("Copy attempt made.   Text = " + text);
                console.log(text);
                return  text;
            },
            beforeCopy:function(){
                //alert("Copy was pressed!");
            },
            afterCopy:function(){
                //alert("Done with copy to clipboard!");
            }
        });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top