Copy clipboard is working after twice button click using zclip

Question

No idea why my below is not working on single click, It requires twice click to get copied.

<html>
<body>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript" src="zClip.js"></script>

<textarea id="fe_text" cols="50" rows="5"></textarea>

<input type="button" id="copyTxt" name="copyTxt" value="Copy Div to Clipboard" />

    <script language="JavaScript">
    $(document).ready(function()
    {       
        $('#copyTxt').click(function()
            {
               //alert($('#fe_text').val());
               $(this).zclip(
               {
                   path: 'ZeroClipboard.swf',
                   copy: $('#fe_text').val(),
                   afterCopy: function()
                   {
                       console.log($('#fe_text').val() + " was copied to clipboard");
                   }
               });
            });
    });


    </script>
</body>
</html>

Please suggest, what could be the reason

Thanks.

on first click, I did not get afterCopy and when i do second click I get the afterCopy alert — Manoj Singh, Dec 14 '12 at 14:40

Brigand · Accepted Answer · 2012-12-14T14:47:38.913

2

Your code sets up zclip to start watching for clicks, after it's clicked once.

$(document).ready(function()
{       
    //$('#copyTxt').click(function()
    //    {
           //alert($('#fe_text').val());
           $('#copyTxt').zclip(
           {
               path: 'ZeroClipboard.swf',
               copy: function(){ return $('#fe_text').val(); },
               afterCopy: function()
               {
                   console.log($('#fe_text').val() + " was copied to clipboard");
               }
           });
    //    });
});

If you look at their documentation, it shows the zclip plugin being called directly inside $(document).ready.

edited Dec 14 '12 at 14:47

answered Dec 14 '12 at 14:41

Brigand

84,529
20
165
173

yes I know that after implementing above solution, I am getting afterCopy alert, however text in textarea is not getting copied in clipboard. please suggest – Manoj Singh Dec 14 '12 at 14:45
1

Does this code work? If you just call `.val` when you set up zclip, it stores a string in `copy`. If you want it to be dynamic, create a function, which is called when it tries to copy. – Brigand Dec 14 '12 at 14:47
Thanks FakeRainBrigand, after adding function on copy it is working now, can you please suggest why it was not working without function or return – Manoj Singh Dec 14 '12 at 14:55
If you don't have the function, it only checks the value once: when `$(document).ready` fires. If you put a function there, it evaluates it every time `#copyTxt` is clicked. If a function doesn't have a return statement, the return value is undefined. Whatever the return value of `copy` is, determines the text to be copied. You want it to be the value of `#fe_text`, so you need to return it. Hope that makes sense :-) – Brigand Dec 14 '12 at 14:59
yeah thanks just one more question, can we call zclip copy on any button click, as I have button which does some work first and gets the value which needs to be copied on cliboard – Manoj Singh Dec 14 '12 at 15:09
Nope. The reason zclip exists is because a change to flash security a year or so ago, that requires a click on the swf to trigger clipboard interaction. [see paragraph-2 of overview](https://code.google.com/p/zeroclipboard/wiki/Instructions#Overview) – Brigand Dec 14 '12 at 15:25

Copy clipboard is working after twice button click using zclip

1 Answers1