Ruby on Rails clipboard-rails dynamic url copy issue

Question

So I wanted to copy the url of each resource to the clipboard so I tried:

<% @posts.each do |post|%>
<script>
$(document).ready(function(){  

  var clipboard = new Clipboard('.clipboard-btn');
  console.log(clipboard);

});
</script>
<textarea id="bar"><%= post_path(post)%></textarea>

<button class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#bar">
    Copy to clipboard
</button>
<% end %>

But the problem with that was it only copied the url of the first resource. So I tried this:

<% @posts.each do |post|%>
<script>
$(document).ready(function(){  

  var clipboard = new Clipboard('.clipboard-btn<%=post.id%>');
  console.log(clipboard);

});
</script>
<textarea id="bar<%=post.id%>"><%= post_path(post)%></textarea>

<button class="clipboard-btn<%=post.id%>" data-clipboard-action="copy" data-clipboard-target="#bar<%=post.id%>">
    Copy to clipboard
</button>
<% end %>

without any luck

try this-[multiple copy clipboard](https://stackoverflow.com/questions/45472971/javascript-copy-text-buttons-for-multiple-textareas-on-one-page) — Anand, Oct 14 '17 at 19:38

score 1 · Answer 1 · answered Oct 14 '17 at 19:33

You can move your script outside the iteration, in order to create just one, not one for each of your posts inside @posts, and to use a way to match each element in the DOM with class starting with clipboard-btn, so you don't need to add the id, like:

<% @posts.each do |post|%>
  <textarea id="bar<%= post.id %>">
    <%= post_path(post) %>
  </textarea>

  <button 
    class="clipboard-btn<%= post.id %>"
    data-clipboard-action="copy"
    data-clipboard-target="#bar<%= post.id %>">
    Copy to clipboard
  </button>
<% end %>

<script>
  $(document).ready(function(){  
    var clipboard = new Clipboard('[class^="clipboard-btn"]');
  });
</script>

As example:

$(document).ready(function() {
  var clipboard = new Clipboard('[class^="clipboard-btn"]');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

<textarea id="bar1">Some content 1</textarea>
<button class="clipboard-btn1" data-clipboard-action="copy" data-clipboard-target="#bar1">
  Copy to clipboard
</button>
<br>
<textarea id="bar2">Some content 2</textarea>
<button class="clipboard-btn2" data-clipboard-action="copy" data-clipboard-target="#bar2">
  Copy to clipboard
</button>
<br>
<textarea id="bar3">Some content 3</textarea>
<button class="clipboard-btn3" data-clipboard-action="copy" data-clipboard-target="#bar3">
  Copy to clipboard
</button>
<br>

This is a good solution for copying text to the clipboard for each individual text field. However what if the question actually intends to copy all of the post's text with only a click of one button? — Cyzanfar, Oct 14 '17 at 20:28
I think it's something I'd like to know too, maybe K.Bro should add more info to the question. — Sebastián Palma, Oct 14 '17 at 20:49

score 1 · Answer 2 · answered Oct 14 '17 at 20:35

You cannot copy multiple target elements at once. However, you can use some more advanced options in the imperative api for that:

new Clipboard('.clipboard-btn', {
    text: function(trigger) {
        var a = document.querySelector('#a').value;
        var b = document.querySelector('#b').value;
        return a + b;
    }
});

Ruby on Rails clipboard-rails dynamic url copy issue

2 Answers2