CODEWITHSUNDEEP
jqueryclipboardzclip
DaveyBoy
DaveyBoy

Reputation: 435

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

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?

Upvotes: 1

Views: 428

Answers (1)

Roberto
Roberto

Reputation: 9080

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!");
            }
        });
});

Upvotes: 0

Related Questions