0

I've tried many ways to copy some text returned from a PHP function called through an ajax call to the clipboard.

I've tried 2 options:

  • create the text element inside the function as described here

    const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

    from this post: https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f

  • and then a second approach, by putting an input text with visibility set to none.

In both cases I'm not able to set the attribute value and then using the function select(). As you can see in my code there are even js and jQuery approaches to set value, but no hope!

$("#idStories").change(function() {


  $("#bottone").click(function(event) {
    event.preventDefault();
    var idStory2 = $("#idStory").val();
    $.ajax({
      type: "POST",
      url: "/copia",
      data: {
        "_token": "{!! csrf_token() !!}",
        "idStory": idStory2
      },
      dataType: "json",
      success: function(msg) {
        var textC = JSON.stringify(msg.txt);
        $('#xxx').val('marione');
        var el = document.querySelector("#xxx");
        //el.value='aaaaaaaaaaaaaa';
        console.log(el);
        el.select();
        document.execCommand("copy");
        alert('testo copiato');

      },
      error: function() {
        alert("Chiamata fallita, si prega di riprovare...");
      }
    });
  });
});
JahStation
  • 726
  • 2
  • 9
  • 25
  • See here https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery – Hassan Voyeau Oct 09 '18 at 16:34
  • Possible duplicate of [Click button copy to clipboard using jQuery](https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery) – Heretic Monkey Oct 09 '18 at 16:36
  • my question more specific is: "its possible to copy text inside/after an ajax function?" – JahStation Oct 10 '18 at 12:25
  • what goes wrong when you try? Any errors in the console? Which browser(s) are you testing with? – ADyson Oct 10 '18 at 13:37
  • im on chrome and chromium, ive problem to select() the text, because when i try to do append() inside my ajax call i cant see any child append, and if i try to set a value to an hidden input text i cannot set it! – JahStation Oct 10 '18 at 13:41
  • I can't see any code to append anything in your example. – ADyson Oct 10 '18 at 13:46
  • What is wrong with doing `el.value(textC);` (or whatever data it is which you wish to place into the textarea)? What does "cannot" mean? You get an error? – ADyson Oct 10 '18 at 13:49
  • thanks @ADyson you spot the problem el.value dont set value... in this case i put just the input/text case – JahStation Oct 10 '18 at 13:52
  • please show me the HTML for this "xxx" element. Thanks. – ADyson Oct 10 '18 at 13:52
  • '' – JahStation Oct 10 '18 at 13:53
  • Demo: http://jsfiddle.net/u7o9tpn0/ - your code should work to add the value to the textbox. – ADyson Oct 10 '18 at 13:58
  • maybe the problem could be the ajax then? i cannot really understand – JahStation Oct 10 '18 at 14:03
  • try to use select() inside ajax, thats the problem for me, i try different approach but it fails again and again on this istruction that do not select anything even if i put the text in a textarea on a modal – JahStation Oct 10 '18 at 14:41
  • are you sure the element actually exists in the page at the time you are trying to access it? That's the only thing I can maybe think of. I can't see how else AJAX could be playing any part. – ADyson Oct 10 '18 at 15:51
  • ive tried 2 way...create append set value and put hidden field in the dom, set value but for both approach select() wont work... now i write even some code that put the text in a modal, but still no selecting the text... – JahStation Oct 10 '18 at 16:31

0 Answers0