ZeroClipboard gives error

Question

I'm using ZeroClipboard. I've loaded ZeroClipboard.js and ZeroClipboard.swf files in '/web-app/js/'. My code is as following,

 <span class="glyphicon glyphicon-file"></span><a id="copyLink" onclick="copyToClipboard();">Copy this url</a>
        <p id="hi">hi</p>

  <script src="${resource(dir: 'js', file: 'ZeroClipboard.js')}"></script>

<script>
function copyToClipboard(){

    ZeroClipboard.setMoviePath('/js/ZeroClipboard.swf');
        var clip = new ZeroClipboard.Client();
        clip.setText('');

        var pre = document.getElementById('hi').innerHTML;
        alert(pre);
        clip.setText(pre);
          //clip.glue( 'd_clip_button' );

        clip.glue('copyLink');
}

</script>

Both js and swf files are loaded in page. But it gives following error,

Uncaught Error: ERROR: ZeroClipboard SWF could not locate ZeroClipboard JS object!
Expected element ID: global-zeroclipboard-flash-bridge 

Where I'm doing wrong?

Answer 1

I did following code :

<script src="${resource(dir: 'js', file: 'jquery.zclip.js')}"></script>
<script src="${resource(dir: 'js', file: 'jquery.zclip.min.js')}"></script>

<script>
function copyToClipboard(){


$("#copyLink").zclip({
    path: "/js/ZeroClipboard.swf",
    copy: $("#genCampUrl").val(),
    afterCopy:function(){

        alert('copied');
        }
});

}


</script>

<a id="copyLink" onclick="copyToClipboard();">Copy this url</a>

On localhost it doesn't work. As the movie needs to be uploaded somewhere. But on server, it works.