Jquery ZeroClipboard or Zclip nothing in clipboard IE 8 and 7

Question

I'm using Jquery plugin ZClip or ZeroClipboard which copies content to the clipboard via a button or link. The data to copy and links/buttons to activate this are loaded using ajax which needs to use plugin, I attach the elements after they have loaded as so:

$('#ajaxbutton').live('click', function() {
   $.ajax({
    type: "POST",
    url: "ajax.php",
    success: function(msg){
      $('a.ajaxcopymulti').zclip({
         path:'js/ZeroClipboard.swf',
         copy:function(){
         return $('p#ajaxdescription').text();
      }
    });
  });
});

and in ajax.php for example:

<p id="ajaxdescription">Ajax description copied to clipboard</p>
<p><a href="#" id="ajaxcopy">Click here to copy the above text</a></p>

Works for all other browsers but IE 7 and IE 8. I get this error:

Unknown Runtime Error: ZeroClipboard.js, line 135 character 3

So in the plugin code I change:

this.div.innerHTML = this.getHTML(box.width, box.height);

to:

$(this.div).html( this.getHTML( box.width, box.height ) ); 

Which gets rid of the runtime error, but nothing appears to be copied into the clipboard for IE 7 and 8. Is anyone familiar enough with this to give some help? Thanks.

Answer 1

Ok, I found what's going wrong in my case. probably it will be the same problem as you expierience.

IE gives an error at this line

this.div.innerHTML = this.getHTML(box.width, box.height);

next line is

appendElem.appendChild(this.div);

here we append this.div to the element "appendElem". appendElem is an DOM object and depends from where you placed your html copy fields in your html code. to be precise it is the second level parent. the error is thrown when appendElem can't contain this.div as a child node. In my case my copy fields where in table cells. the appendELem is in this case a Row Object which obviously can not contain any divs (firefox is smart enough to clean up the code). I wrapped my copyfields in extra divs so appendElem will be a DIV object. to know what object your appendElem is containing just add and alert function, like this:

    alert(appendElem);
    appendElem.appendChild(this.div);

hope this helps!

Kasper Taeymans

Answer 2

Also do make sure that your Browser is updated with Flash Plugin for it to work correctly.

Answer 3

I just met this problem, and has solved it. This is because of the improper html tag, the jquery plug-in will add a flash layer with the div, so make sure the html tag outermost layer is div, that is ok.