Bootstrap modal remote with ZeroClipboard

Question

Im using twitter bootstrap 3.0s modal view to show an html which has zerclipboard implemented. [https://github.com/zeroclipboard/ZeroClipboard]

This html has a button on click of which certain content is supposed to be copied to the clipboard via zeroclipboard.

ZeroClipboard.setDefaults({
    moviePath : '../js/lib/ZeroClipboard.swf',
    hoverClass : "zeroclipboard-is-hover", // The class used to hover over the object
    activeClass : "zeroclipboard-is-active",
});

var clip = new ZeroClipboard($('#btn-copy-cb'));

clip.on('dataRequested', function(client, args) {
    clip.setText($("#text-code").text());
});

clip.setHandCursor(true);

The html by itself works fine. but when it is called via the modal view as

$('#my-modal').modal({
    show: false,
    remote: "copytoclipboard.html"
});

Gives me an error when ever i hover on the button or click on it.

TypeError: this.htmlBridge is undefined


...e._singleton},p.detectFlashSupport=function(){var a=!1;if("function"==typeof Act...

score 0 · Answer 1 · answered Oct 10 '13 at 13:35

Try to set zerclip board after your modal content has load:

$('#my-modal').on('shown.bs.modal', function () {

var clip = new ZeroClipboard($('#btn-copy-cb'));

clip.on('dataRequested', function(client, args) {
    clip.setText($("#text-code").text());
});

clip.setHandCursor(true);

});

When remote URL is provided, content will be loaded via jQuery's load. Cause the loading is asynchronous, you also could try to overwrite this and add "complete".

Bootstrap modal remote with ZeroClipboard

1 Answers1