Ajax Data Sources

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.

[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#

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

[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?