Search code examples
jqueryzclip

Copying <tbody> text using zclip when running as a file


I'm trying to copy the text from the body of a html table using zclip. Should be a simple thing to do (I can copy a paragraph's text, for example, but not a table body's text). Any idea what I'm doing wrong? Here's the fiddle code:

http://jsfiddle.net/LNd6p/5/

<button id="copy-description">Copy table data</button>
&nbsp;
<table>
    <thead><tr><th>Q1</th><th>Q2</th><th>Q3</th></tr></thad>
        <tbody id="surveyResultsTable"><tr><td>Blah1</td><td>Blah2</td><td>Blah3</td>  </tr></tbody>
    </table>|

Javascript:

$(document).ready(function(){
    //copy the contents of surveyResultTable
    $('#copy-description').click(function(){
        $('#copy-description').zclip({
            path:'http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf',
            copy:function(){return $('#surveyResultsTable').text();}
        });
    });
});

Edit Not sure why it's not working locally. I'm trying to run it as a file (that is, not served through a localhost webserver).

Here's the exact code from the html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><script type="text/javascript" src="head.load.min.js"></script></head>
<body>
  <button id="copy-description">Copy table data</button>
  &nbsp;
  <table>
    <thead><tr><th>Q1</th><th>Q2</th><th>Q3</th></tr></thead>
    <tbody id="surveyResultsTable"><tr><td>Blah1;</td><td>Blah2;</td><td>Blah3;</td></tr></tbody>
  </table>
<script type="text/javascript">head.load("jquery-2.1.1.min.js", "jquery.zclip.min.js", "test.js");</script>
</body>
</html>

Here's test.js

$('#copy-description').zclip({
  path:'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
  copy:function(){return $('#surveyResultsTable').text();}
});

Here's the working fiddle with the same code (html head stuff stripped). http://jsfiddle.net/LNd6p/8/ Eventually, I'll have to run this as a file on a tablet not connected to the internet, so remotely serving it isn't an option. I'm running Firefox 32. Firebug isn't giving any javascript errors. The swf file is loading (I'm not even trying to serve that locally at the moment), but clicking it doesn't do anything. I'm running this as a file, with file:///D:/projets/test.html in the address bar of the browser. It's not working in IE either - haven't got any webkit browsers to test; my intention was to run this in Firefox anyway.


Solution

  • You are trying to call zclip on the click event, but zclip library is using flash for copy text.. so dependent flash resource can't load instantly, no need click event, you should use only <selector> in zclip function see below code

    $(document).ready(function(){
    //copy the contents of surveyResultTable
        $('#copy-description').zclip({
           path:'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
           copy:function(){
              return $('#surveyResultsTable').text();
           }
        });
    })    
    

    PS: zlip swf file path was wrong in your fiddle code,

    DEMO