Clipboard.js: How to set data-clipboard-target's value after ajax?

[ken8203]

Hello,

Is it possible to set data-clipboard-target's value after an ajax request?
Because the value I need to copy would be created after an ajax request.

like below:

<!-- Target -->
<input id="foo" value=" ">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

$('.btn').click(function() {
    $.ajax({
        url: '/get_text',
        type: 'POST',
        dataType:'text'
    }).done(function (resp){
        $('#foo').attr('value', resp);
    });
});

That is, I hope I can copy the value after I click button with an ajax request.

Thanks a lot!!

[zenorocha]

You can try using the advanced options documented on https://github.com/zenorocha/clipboard.js/blob/master/readme.md#advanced-options. Also check the demos folder for some inspiration. Thanks!

[dima1985]

I can not understand the documentation. Show an example please.

[zenorocha]

https://github.com/zenorocha/clipboard.js/tree/master/demo

[dima1985]

Please show me an example of ajax, example

<a href="#" onclick="copy();">copy</a>

function copy(someText) {
$.ajax({
  url: "https://api.github.com/repos/zenorocha/clipboard.js/readme",
  dataType: "jsonp"
}).done(function(result) {
    COPY TO BYFFER: result.data.content
});
}

[zenorocha]

That's not how Clipboard.js is supposed to work. But you can use execCommand('copy') directly in order to achieve your specific use case.

[leandroafonso]

This is a powerful but crippled tool.
Made to work just the way the author finds it interesting to use.

[zenorocha]

First of all, about this issue, I'm investigating the best way to include Ajax request on this, probably with a Promise-like API which will require a major version bump.

Secondly, what a sad comment @leandroafonso. I don't know you understand how open source works. This a project that I maintain on my spare time, with super restricted resources. It's intended to be a generic sugar layer on top of an existing API. It's available for free and nobody is forced to use it. If it doesn't fit your needs you have two options: 1) build your own 2) send a pull request. By offending an open source author you're just discouraging their contributions. What you're doing is distasteful.

[rxtphan]

Just found this issue — i'm trying to do this exact thing. @zenorocha have you had a chance to solve this?

[daohung2u]

my solution
clipboard.on('success', function(e) {
e.text = $('#foo').val();
console.info('Text:', e.text);
e.clearSelection();
});

[marcleimvs]

I have solved such a problem with the code below and it is working... see my example, and hope it helps:

<!-- Trigger -->
<button class="btn-clipboard" data-clipboard-text="" onclick="ClipboardCopy();>
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

var clipboard; // clipboard object

jQuery(document).ready(function($){
    clipboard = new ClipboardJS(".btn-clipboard");

    clipboard.on("success", function(e) {
        alert( "Copied!" );
    });

    clipboard.on("error", function(e) {
        alert( "Error!!!" );
    });
});

My function "ClipboardCopy()" is triggered by the button "btn-clipboard".
It will grab some checked ids from my form and call a remote routine with ajax().
jQuery.ajax() will execute with "async" mode = false.
After returning, the function with update btn-clipboard "data-clipboard-text"
which will be caught later by clipboard object

function ClipboardCopy() {
    // grab my form ids in checkboxes
    // this is used to call my remote routine
    var values = jQuery("input[name^='cid']").map(function (idx, ele) {
        if (jQuery(ele).attr('checked')) {
            return jQuery(ele).val();
        }
    }).get();
    var cid = values.join(',');

    // run ajax
    jQuery.ajax({
        url: 'http://localhost/intraer/administrator/index.php?option=com_sadpess&view=contatos&layout=clipboard&format=json&tmpl=component&filter[contato_id]=' + cid,
        dataType: 'json',
        method: 'GET',
        async: false,
        success: function (data, textStatus, jqXHR) {
            if(data){
                var text = data.join("\n");
                jQuery('.btn-clipboard').attr('data-clipboard-text', text);
                console.log(text);
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log($errorThrown);
        }
    });
}

[pagelab]

Thanks for offering a possible solution, @marcleimvs but unfortunately async: false has been deprecated for 8 years now.