why "copy" is not being invoked after second time

Question

I am working on copy to clipboard first time its working as expected but on second time without page refresh copy is not working. Can any one one suggest me, where i am going wrong ?

js function

function selectElementContents(el) {
    var body = document.body, range, sel;
    if (document.createRange && window.getSelection) {
        range = document.createRange();
        sel = window.getSelection();
        sel.removeAllRanges();
        try {
            range.selectNodeContents(el);
            sel.addRange(range);
        } catch (e) {
            range.selectNode(el);
            sel.addRange(range);
        }
    } else if (body.createTextRange) {
        range = body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
    document.execCommand("Copy");
}

cshtml

<a href="#" onclick="selectElementContents(document.getElementById('tbody'));">
   <img alt="Copy Contents" style="height: 35px; width: 25px;" src="~/images/Copy_Contents.png" />
   @Renderer.Localize("CopyContents")
</a>

Table

<table id="tableIOD" class="table table-hover">
   <thead>
     <tr>
       <th scope="col">@Renderer.Localize("SearchUploadPopupValue")</th>
     </tr>
   </thead>
       <tbody id="tbody">
          @if (@Model.UploadSearchSummary != null && @Model.UploadSearchSummary.Count > 0)
           {
             foreach (var data in @Model.UploadSearchSummary.FindAll(c => c.Status.Equals(UploadSearchResultStatus.NotFound)))
              {
                <tr>
                  <td>@data.SearchValue</td>
                </tr>
              }
            }
         </tbody>
     </table>

Rendered HTML

<div id="modal-search-by-upload" class="modal fade hide show" tabindex="-1" role="dialog" aria-modal="true" style="padding-right: 17px; display: block;">
    <div id="modal-dialog" class="modal-dialog modal-lg">
        <div id="modal-content" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Search by upload - items not found</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div id="modal-body" class="modal-body">
                <div id="phase1">
                    <table id="tableIOD" class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col">Value</th>
                            </tr>
                        </thead>
                        <tbody id="tbody">
                                    <tr>
                                        <td>5500002207330</td>
                                    </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="tblfooter" class="modal-footer">
                
                <a href="#" onclick="selectElementContents(document.getElementById('tbody'));">
                    <img alt="Copy Contents" style="height: 35px; width: 25px;" src="/images/Copy_Contents.png">
                    Copy Contents
                </a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

above code is rendered html code copy to clipboard button is inside model and i am trying to copy the data on model popup

As your question is about [tag:javascript] (not jquery), please include the *rendered* HTML, not (what appears to be) server-side razor code. — freedomn-m, Oct 14 '22 at 08:12
[Works for me](https://jsfiddle.net/tjcrowder/f2wcj89g/). I can click the image/link, see the value copied to the clipboard, then if I ensure the clipboard has something else in it and click again, it copies the text to the clipboard a second time. — T.J. Crowder, Oct 14 '22 at 08:16
@T.J.Crowder for me if am trying click second time it's not thronging error not even getting copy — NitishKumar Patel, Oct 14 '22 at 08:34
on every click i am getting below error. Is this root cause? Error: "[Report Only] Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-2IGdrqWftUMMyGeiEjUv+8hOV4NvGEFr8XJ6F5qZrrw=' https://www.google-analytics.com". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. " — NitishKumar Patel, Oct 14 '22 at 08:38
Thanks - but it looks like the only **relevant information is the error** you're getting (which you've included in a comment). Is this in a "chrome app" or "extension"? Do you get the same error using @T.J.Crowder 's fiddle? — freedomn-m, Oct 14 '22 at 08:43
@freedomn-m i am using "chrome app" i tried in IE but same behaviour Now i have added rendered HTML please check in my question — NitishKumar Patel, Oct 14 '22 at 08:46
Does this answer your question? [Refused to execute inline event handler because it violates CSP. (SANDBOX)](https://stackoverflow.com/questions/36324333/refused-to-execute-inline-event-handler-because-it-violates-csp-sandbox) — freedomn-m, Oct 14 '22 at 08:48
@freedomn-m let me retrieve ID in another way Thanks for the above link i will go through that link — NitishKumar Patel, Oct 14 '22 at 09:00

why "copy" is not being invoked after second time

0 Answers0