Search code examples
datatableszeroclipboard

Using ZeroClipboard with Jquery.DataTables

I have a Jquery.DataTables instance that has a list of Users with two buttons; One for Auto logging a user in and another to copy a user's login url to the clipboard.

I began using ZeroClipboard to make the copy button auto copy the link instead of the old way of using the confirm() method. One issue I'm having is to get the zeropclipboard to find the click event to wire up the copy event from zeroclipboard.

the only way I got it to work is to do the following:

$('#userLogins').on('click', '.copy', function () {
    var client = new ZeroClipboard($('button[data-clipboard-text]'));

    client.on('aftercopy', function () {
        setBusy('Successfully Copied Login Link.');
        setTimeout(function() {
            setBusy(false);
        }, 2000);
    });

which works but the issue is the user has to click on the button twice for the copy event to work, which is just horrible UX.

I'm curious if anyone can help me make it a one click operation like it should be?

Solution

  • I used your example and tweaked it so that on hover the links were converted to the zeroclipboard flash thing, then when you click, it copies. One hover, one click.

    $("#elementid").on('hover', '.class_of_button', function(){
    var zc = new ZeroClipboard($(".class_of_button"));
     zc.on('copy', function(event){
       event.clipboardData.setData('text/plain',   
       event.target.getAttribute('data-attribute-name'));
     });
});