CODEWITHSUNDEEP
jqueryzeroclipboard
JorgeV44
JorgeV44

Reputation: 71

Trouble with ZeroClipboard

I'm trying to use Zeroclipboard to copy stuff to the clipboard, but it doesn't seem to be working. My code:

HTML:

<textarea name="texter" id="texter"></textarea>
<input type="button" value="Copy to clipboard" id="copy-button" />

Javascript:

<script type="text/javascript">
jQuery(document).ready(function(){

  var clip = new ZeroClipboard.Client();
  clip.setText('');  

   jQuery('#copy-button').click(function(){
  clip.setText(jQuery('#texter').val());
 }


});
</script>

What's wrong with this? Thansk!

Upvotes: 0

Views: 8159

Answers (2)

Rafiq
Rafiq

Reputation: 1

<!-- <script type="text/javascript" src="http://davidwalsh.name/demo/ZeroClipboard.js"></script> -->
    function copyText(fieldName,buttonName){
        var fieldNameTemp =fieldName;
        var buttonNameTemp =buttonName;
        var val = "";
        try{
            val = navigator.userAgent.toLowerCase();
        }catch(e){}
        var swfurl = "js/ZeroClipboard.swf";
        setTimeout(function () {
            ZeroClipboard.setMoviePath(swfurl);
            var clip = new ZeroClipboard.Client();
            clip.addEventListener('mousedown', function () {
                clip.setText(document.getElementById(fieldNameTemp).value);
            });
            clip.addEventListener('complete', function (client, text) {
                try{
                    if(val.indexOf("opera") > -1 || val.indexOf("msie") > -1 || val.indexOf("safari") > -1 || val.indexOf("chrome") > -1){
                        alert('Your text has been copied');
                    }
                }catch(e){
                    alert('Please alert: not use on fireFox');
                }
            });
            clip.glue(buttonNameTemp);
        }, 2000);
    }

Upvotes: 0

Kamal
Kamal

Reputation: 2522

A few things.

Firstly, your brackets are slightly off. It should be:

jQuery(document).ready(function(){

  var clip = new ZeroClipboard.Client();
  clip.setText('');  

   jQuery('#copy-button').click(function(){
  clip.setText(jQuery('#texter').val());
 });
});

But that won't solve your problem.

Refer to ZeroClipBoard instructions

you need to 'glue' or link the flash movie to a dom element on the page. This is where the copied text will be stored. Then, you can't use jQuery for the click event (or if you can, I'm misunderstanding the documentation), but you can register a mousedown event to your button and bind it to the clip.

Applying this to your code.

    <script type="text/javascript">
        $(document).ready(function () {
            var clip = new ZeroClipboard.Client();

            clip.setText(''); // will be set later on mouseDown

            clip.addEventListener('mouseDown', function (client) {
                // set text to copy here
                clip.setText(jQuery('#texter').val());

                // alert("mouse down"); 
            });

            clip.glue('copy-button');
        });
</script>

This should work.

You can use this example completely without jQuery, but having it in the document ready is a nice compact place to make sure it executes only after the DOM is ready. And also using jQuery in place of getElementById.

Hope that helps.

Upvotes: 4

Related Questions