document.execCommand('Copy') failing

Question

User-111014074 posted

Hi,

I have a grid populated with the data and in one of the column I have a hyperlink that calls a JavaScript method to copy the content displayed in the row to clipboard.

The grid goes like this:

<asp:UpdatePanel runat="server" ID="upClipboard" UpdateMode="Conditional" ClientIDMode="Static">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cbTimer" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:GridView runat="server" ID="dgClipboardList" AllowPaging="true"
PagerSettings-Mode="NumericFirstLast" PagerSettings-Position="Bottom" PageSize="25"
GridLines="None" AlternatingRowStyle-Wrap="true" RowStyle-Wrap="true" CssClass="gridder"
ShowHeaderWhenEmpty="true" Width="1170px" AutoGenerateColumns="false"
OnPageIndexChanging="LoadCBNewPage" OnSorting="SortCBGridData"
OnRowCreated="AttachCBSortOrder" OnRowDataBound="SelectCBRow" AllowSorting="true"
EmptyDataText="Query returned no results. Please try again.">
<AlternatingRowStyle Wrap="True" CssClass="gridAlternator"></AlternatingRowStyle>
<PagerSettings Mode="NumericFirstLast"></PagerSettings>
<PagerStyle HorizontalAlign="Center" CssClass="gridPager" />
<RowStyle HorizontalAlign="Left" Wrap="True"></RowStyle>
<SortedAscendingHeaderStyle CssClass="sortasc" />
<SortedDescendingHeaderStyle CssClass="sortdesc" />
<Columns>
<asp:BoundField HeaderText="Date/Time " ItemStyle-Width="20%" HeaderStyle-BackColor="#52A017"
HeaderStyle-Height="40px" HeaderStyle-Font-Size="14px"
HeaderStyle-ForeColor="White" HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" DataField="Date/Time" SortExpression="Date/Time"></asp:BoundField>
<asp:BoundField ItemStyle-CssClass="breakWord" HeaderText="Clipboard Text " ItemStyle-Width="70%" ItemStyle-Wrap="true" DataField="Clipboard Text"
HeaderStyle-BackColor="#52A017" HeaderStyle-Height="40px" HeaderStyle-Font-Size="14px" HeaderStyle-ForeColor="White"
HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Left" SortExpression="Clipboard Text"></asp:BoundField>
<asp:TemplateField ItemStyle-Width="10%" HeaderText="Action" ItemStyle-HorizontalAlign="Center"
ItemStyle-VerticalAlign="Top">
<HeaderStyle HorizontalAlign="Center" BackColor="#52A017" ForeColor="White" Font-Size="14px" Font-Bold="true" Height="40px" />
<ItemTemplate>
<center><a href="#" title="Delete Text" class="gridViewToolTip" onclick="return delComment('<%# Eval("CommentId")%>')" ><img src="Images/trash-URL.png" alt="Delete Text" /></a><a href="#" title="Copy text to Clipboard" class="gridViewToolTip" onclick="return CopyToClipBoard('<%# Eval("CommentId")%>')"><img src="Images/add-Clipboard.png" alt="Copy text to Clipboard" /></a></center>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

The highlighted text above calls the Javascript method that communicates with a web service to fetch the content (the grid data shows only partial text). The code is given below:

function CopyToClipBoard(cmntId) {
var cbData = "{'commentId':'" + cmntId + "'}";
var serviceURL = $("#hdnServiceURL").val();
$.support.cors = true;
$.ajax({
type: "POST",
url: serviceURL + "/GetCopyClipboardText",
data: cbData,
crossDomain: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
xhrFields: {
withCredentials: true
},
success: ShowcopyData,
error: copyerror
});
return false;
}

function ShowcopyData(data, status) {
addtoCB(data.d);
}

function copyerror(request, status) {
toastr.options.timeOut = 3000;
toastr.error(request.statusText);
}

function addtoCB(text) {
var result = true;
var clipboardText = htmlDecode(text);
if (window.clipboardData)
window.clipboardData.setData('text', clipboardText);
else {

// UniversalXPConnect privilege is required for clipboard access in Firefox
try {

var supported = true;

//debugger;
var textarea = document.getElementById("<%=txtComments.ClientID%>");
textarea.value = clipboardText;
textarea.textContent = clipboardText;
textarea.select();

result = document.execCommand("copy", false, "test");
textarea.value = '';
}
catch (e) {
result = false;
}
}

if (result) {
toastr.options.timeOUt = 5000;
toastr.success("Clipboard content successfully copied.")
}
else {
toastr.options.timeOUt = 3000;
toastr.error("Your browser doesn't allow clipboard access!");
}
}

In the script above, the highlighted line of execCommand always fails with "false" for chrome/edge/safari.

The same script I copy pasted in a separate application with a textarea and a link with static text passed to the addtoCB method and it passed.

Can anyone assist what might be the reason for the code fails only in this application?

Thanks in advance.

Regards,

Senthil Kumar

Answer 1

User36583972 posted

HI SK8 Rider,

To troubleshoot this issue, we really need the source code to reproduce the problem. You will get much better answers if you provide a running(Use as little code as possible that still produces the same problem) sample people can use to reproduce the problem.

Thank you for your understanding.

Best Regards,

Yong Lu

Answer 2

User-111014074 posted

Hi Yong,

Thanks for the reply.

I fixed the issue. The issue was due to the asynchronous call.

My method tried to access the DOM objects before the asynchronous call ended.

Now I separated the asynchronous call and the DOM object call and it resolved the issue.

Thanks and Regards,

Senthil Kumar