CODEWITHSUNDEEP
jqueryajaxclipboard.js
Darius Varnelis
Darius Varnelis

Reputation: 93

Clipboardjs not working inside jQuery.get().done()

I'm trying to do some actions on user button click:

  1. Get some data from server using jQuery AJAX call.
  2. On success, save this data us button attributes data-clipboard-text value.
  3. Copy this value to clipboard using clipboardjs.

Problem: step 3 perfectly works outside jQuery.get().done() using dummy text, but not inside done(). This is not what I expect, because clipboardjs fires copy while there is no target value yet.

(function ($) {
var root = {};
root = {
    get_client_addresses_from_server: function (btn) {

        var url = btn.attr('data-src');
        $.get(url, function (data) {
            }
        ).done(function (data) {
            btn.attr('data-clipboard-text', data.text);

            // here clipboardjs is unable to copy
            var clipboard = new Clipboard('.btn', {
                text: function (trigger) {
                    return trigger.getAttribute('data-clipboard-text');
                }
            });

            clipboard.on('success', function (e) {
                console.info('Action:', e.action);
                console.info('Text:', e.text);
                console.info('Trigger:', e.trigger);

                e.clearSelection();
            });

            clipboard.on('error', function (e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });


        });


    },
};

$('#client-action-form .form-actions button[value="copy_addresses"]').click(function (event) {
    event.preventDefault();
    root.get_client_addresses_from_server($(this));
});
})(jQuery);

Upvotes: 1

Views: 845

Answers (1)

Darius Varnelis
Darius Varnelis

Reputation: 93

Found solution myself: http://jsfiddle.net/zenorocha/n5pLh1rk/2/

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

function copy(someText) {
    var clipboard = new Clipboard('.btn', {
        text: function() {
            return someText;
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
}

Upvotes: 1

Related Questions