Clipboard.js: Ajax Data Sources

[Nikey646]

While you provide access to existing DOM data, it appears that there is no way to load the data on demand for it to be copied.

It would be great if you were able to send an Ajax request automatically by using data-clipboard-ajax="http://example.com/" on the target attribute.

This can be further customized by allowing for a custom xhr object to be passed to the constructor, allowing for user-level events to be created without modifying the library itself.

The main reason i'm suggesting this, is because I want to be able to copy a possibly large Base64 encoded string without having to have it in the DOM all of the time, but it seems that no matter what i do (using jQuery, atleast) i cannot get your text callback function to work using ajax based functions.

[zenorocha]

Hey @Nikey646,

Good question! There is a way to copy loaded data by using the imperative API described here.

Here's an example in practice using jQuery's ajax and Base64 copying: http://jsfiddle.net/zenorocha/n5pLh1rk/2/

[Nikey646]

Ahh i see, rather than trying to return the ajax result from within the "imperative API", you create a new Clipboard class from the success function of the Ajax call. Thank you very much!

[janrhansen]

Hi
I have - kind of - the same issue, and I don't see how the solution above solves the issue regarding not having the clipboard content in the dom at the beginning. At page load, the ajax request loads data, and attaches the result to the button, so when the button is clicked, data is already in the dom, and is just returned.
I have a list with, say, 50 or 100 buttons, which will each generate unique clipboard content - and I would like that done on demand. Is there a way to approach this with clipboard.js?

[AlexH269]

I have the same problem as @janrhansen. The data i want to copy to the clipboard isn't in the dom by the time the page is displayed. It should only be loaded from the server if the user clicks the button. Any ideas?

[janrhansen]

@MrCrankHank : I have used a workaround where I hook up to the text event from clipboard.js. When the function is called, I retrieve the clipboard content from the server with an synchronous ajax call, providing relevant parameters. The code below works, but is a bit.. well.. rude. Errorhandling etc. to come in the very near future, but it should help you move along.
However, synchronous ajax requests (in jquery) are "deprecated because of its detrimental effects to the end user's experience." - quote Chrome developer console. So you'll get a warning about that, but I guess it won't go away anytime soon, at least not without something to replace it.

Hope this helps!

Javascript

var clipboardItems = new Clipboard('.clipboardCopyButton2', {
      text: function (trigger) {
          var customerId = trigger.getAttribute('data-customerid');
          var cpv = GetClipboardData(customerId);
          return cpv;
      }
  });

function GetClipboardData(customerId) {
    var retval = "";

    var month = 12; // get from UI element

    var args = {};
    args.customerId = customerId;
    args.monthNumber = month;

    $j.ajax({
        type: "POST",
        async: false,
        url: "invoicing.aspx/GetInvoiceContent",
        data: JSON.stringify(args),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            retval = msg.d;
        }
    });
    return retval;
}

Server side C#
C# [WebMethod] public static string GetInvoiceContent(int customerId, int monthNumber) { return "generated clipboard content"; }

[AlexH269]

Hi!

Thank you very much. This gives me a great starting point.

[NerdGuruDevelopers]

This unfortunately doesn't seem to work for me?

Suggestions appreciated:

var clipboardItems = new Clipboard('.action_share_file', {
text: function (trigger) {
var result = '';
$.ajax({
type: "POST",
async: false,
url: '/files/change/permissions/' + $('#contextMenu-item').attr('data-id'),
data: 'permissions=' + JSON.stringify({'read' : 'link'}),
dataType: "json",
success: function (msg) {
result = msg.url;
}
});

  return result;

}
});

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

The error event fires on both chrome and firefox. No idea how to work around this.

[Nikey646]

Psst.. This issue was resolved by the code example provided zenorocha. If that solution does not work for you, stop commenting on a now closed issue and make a new one.

[jamilatta]

I use 2 events to resolve it, look:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Copy Ajax</title>

    <link
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous">
    </link>
  </head>
  <body>

    <div class="container">

      <div class="row">

        <div class="col-md-12 text-center">

          <a class="copy">
            <i class="glyphicon glyphicon-link" style="font-size: 24px;"></i>
          </a>

        </div>

      </div>

    </div>

  </body>

  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous">
  </script>
  <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous">
  </script>

  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js">
  </script>

  <script type="text/javascript">
      var result = '';

      $('.copy').mouseenter(function(event) {

        if (!result){
          $.ajax({
              type: "GET",
              async: false,
              url: 'http://another.url.com',
              data: 'url=' + escape(document.URL),
              dataType: "jsonp",
              success: function(data){
                result = data;
              }
              //error:
            });
        }

      });

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

      clipboard.on('success', function(e) {
          // success message here
          console.log('Sucess: ' + e);
      });

      clipboard.on('error', function(e) {
          // error message here
          console.log('Error: ' + e);
      });

  </script>

</html>