Copy to clipboard in jquery

Question

I am trying to make copy to clipboard. It's working on div element but if i use it in datatable that time not working

here is my code

->editColumn('value', function ($data) {
            return '<span>'.$data->value.'</span> <i class="fa fa-copy" title="Copy to Clipboard" data-toggle="tooltip" onclick="copyToClipboard(this,'.$data->value.')"></i>';
        })

  function copyToClipboard(em,text) {
            var dummy = document.createElement("textarea");
            dummy.style.display = 'none'
            document.body.appendChild(dummy);
            dummy.value = text;
            dummy.select();
            document.execCommand("copy");
            document.body.removeChild(dummy);
            $(em).attr('data-original-title', 'Copied')
                .tooltip('fixTitle')
                .tooltip('show');
        }

it shows Uncaught SyntaxError: missing ) after argument list . How can i fix ?

Please post pure HTML and JS in a [mcve] using the `[<>]` snippet editor — mplungjan, Apr 19 '21 at 16:35

mplungjan · Accepted Answer · 2021-04-19T17:21:46.133

Change to this to not have issues with content

->editColumn('value', function ($data) {     
  return '<span>'.$data->value.'</span> <i class="fa fa-copy" title="Copy to Clipboard" data-toggle="tooltip"></i>';
  })

using

$('.fa-copy').on('click', function() {
  copyToClipboard(this,$(this).prev().text());
})

you cannot have display none on the textarea if you want to create a copy

$('.fa-copy').on('click', function() {
  const text =  $(this).prev().text();
  console.log(text)
  copyToClipboard(this, $(this).prev().text());
})

function copyToClipboard(em, text) {
  var dummy = document.createElement("textarea");
 // dummy.style.display = 'none'; // cannot be display none
  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
//  document.body.removeChild(dummy);
//  $(em).attr('data-original-title', 'Copied')
//    .tooltip('fixTitle')
//    .tooltip('show');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" >
<span>Data value from span</span> <i class="fa fa-copy" title="Copy to Clipboard" data-toggle="tooltip"></i>

“Not working” is a USELESS comment. Console errors ? What? Show a [mcve] like we ask do we can help you better — mplungjan, Apr 19 '21 at 17:08
@Kabir Works for me if I remove all the stuff you did not bother to show us AND make the text area display — mplungjan, Apr 19 '21 at 17:22

score 0 · Answer 2 · answered Apr 19 '21 at 16:37

0

The error message tells you what is wrong. There is a missing closing parenthesis here

->editColumn('value', function ($data) { return '<span>'.$data->value.'</span> <i class="fa fa-copy" title="Copy to Clipboard" data-toggle="tooltip" onclick="copyToClipboard(this,'.$data->value.')"></i>'; })

answered Apr 19 '21 at 16:37

C. Peck

3,641
3
19
36

still same error..... – Kabir Apr 19 '21 at 16:41

Copy to clipboard in jquery

2 Answers2