I use the jquery ui dialog on my page, and, oddly enough, the zeroclipboard copy-to-clipboard function does not work from the jquery dialog box.
This is my whole code ...
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet"
type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://davidwalsh.name/dw-content/ZeroClipboard.js"></script>
<script type="text/javascript">
$(function(){
$('#ex1').click(function(){
var div = $('#div1');
div.dialog(
{
title:'Dialog1',
width: 300,
height: 150,
closeOnEscape: false
});
});
});
function toClipboard(me, msg_id) {
ZeroClipboard.setMoviePath('http://davidwalsh.name/dw-content/ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
var txt = $("#msg_p_span_"+msg_id).html();
console.log("Text: "+txt);
clip.addEventListener('mousedown',function() {
clip.setText(txt);
console.log("Copied");
});
clip.addEventListener('complete',function(client,text) {
alert('copied: ' + text);
});
clip.glue(me);
}
</script>
<title>jQuery UI dialog extra demo</title>
</head>
<body>
<span id="msg_p_span_1" style="display:none;">Testing the clipboard copy 1.</span>
<span title="Copy to clipboard" style="cursor: pointer; text-decoration:underline;" onmouseOver="toClipboard(this, 1)">Copy</span>
<button id="ex1">Launch dialog</button>
<div id="div1" style="display:none;">
<p style="padding: 10px 3px; font-size: 12px;" id="msg_p_2">
<span id="msg_p_span_2">Testing the clipboard copy 2.</span>
<span style="float: right; width: 25px; margin-right: 10px;">
<span title="Copy to clipboard" style="cursor: pointer; text-decoration:underline;" onmouseOver="toClipboard(this, 2)">Copy</span>
</span>
</p>
</div>
</body>
</html>
If I click on the first “Copy” link, the text will be copied well and a warning will be generated. But when I launch the jquery dialog and click on the "Copy" link inside it, the text is not copied.
Perhaps someone can reproduce the problem with the above code (copy-paste) and find it.
Note. I follow a prime example on the Davidwalsh website
source
share