How to load an Ajax response into clipboard using jQuery and ZeroClipboard?

Question

I need a way to copy dynamically (Ajax) loaded content into the clipboard in a Web browser. There are many libraries out there that will mimic the copy-to-clipboard functionality using Flash. However, with the new Flash 10 default security settings, copy-to-clipboard setting now requires explicit user confirmation. ZeroClipboard is a Javascript/Flash library that gets around this "limitation" (using flash movie click-jacking).

This is a simple JQuery plugin I wrote to integrate ZeroClipboard into my application:

// A jQuery plugin for copying Ajax content into clipboard
(function($) {
    $.fn.clickToClipboard = function() {
        $(this).each( function() {
            var link = $(this);
            if ( link.is('a') ) {
                var clip = new ZeroClipboard.Client();
                clip.glue(this);
                clip.addEventListener('onMouseDown', function(){
                    link.html('copying...');
                    clip.reposition();
                    $.ajax({ 
                        url: link.attr('href'),
                        success: function(content) { 
                            clip.setText(content);
                        },
                        async: false
                    });
                });

                clip.addEventListener('onComplete', function(){ 
                    link.html('copied!');
                    clip.reposition();
                });
            }            
        });
    }
})(jQuery);

Each anchor url points to a text file on the server. When the flash movie (click-jacked link) is clicked, it loads the anchor's corresponding text file into the clipboard through Ajax and ZeroClipboard.

This plugin works very well in Safari (even for a 4000+ line prototype.js text file). However, it's failing on FF3.0 even on a simple text file with one line: "hello". I've logged the content of my Ajax call into the console. The success callback does seem to work. It seems that clicking on the movie a second time will complete the copy (because browser caches the text file from the first Ajax call).

Note that I've used a synchronous Ajax call here in order to wait for the text to finish loading. Anyone knows why my code doesn't work as expected? (Not sure if it's relevant, my backend is done in Rails).

Answer 1

Same issue here, doesn't work with XHR callbacks.