locked
document.execCommand('Copy') failing RRS feed

  • 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

    Monday, May 14, 2018 5:10 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 15, 2018 12:37 PM

All replies

  • 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

    Tuesday, May 15, 2018 7:15 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 15, 2018 12:37 PM