JQuery Copy text & paste into textarea

Question

I've created a javascript function that will take a hidden span, copy the text within that span and insert it into a single textarea tag on a website. I've written a function in JavaScript that does this (well, kinda, only after a few clicks), but I know there's a better way - any thoughts? The behavior is similar to a Retweet for twitter, but using sections of a post on a blog instead. Oh, and I'm also calling out to jquery in the header.

<script type="text/javascript">
function repost_submit(postID) {    
    $("#repost-" + postID).click(function(){
        $("#cat_post_box").empty();
        var str = $("span#repost_msg-" + postID).text();
        $("#cat_post_box").text(str);
    });
}
</script>

Answer 1

Based on the comment in your question, I am assuming you have something like this in your HTML:

<a href="#" onclick="repost_submit(5);">copy post</a>

And I am also assuming that because you are passing a post ID there can be more than one per page.

Part of the beauty of jQuery is that you can do really cool stuff to sets of elements without having to use inline Javascript events. These are considered a bad practice nowadays, as it is best to separate Javascript from your presentation code.

The proper way, then, would be to do something like this:

<a href="#" id='copy-5' class='copy_link'>copy post</a>

And then you can have many more that look similar:

<a href="#" id='copy-5' class='copy_link'>copy post</a>
<a href="#" id='copy-6' class='copy_link'>copy post</a>
<a href="#" id='copy-7' class='copy_link'>copy post</a>

Finally, you can write code with jQuery to do something like this:

$(function() { // wait for the DOM to be ready
    $('a.copy_link').click(function() { // whenever a copy link is clicked...
        var id = this.id.split('-').pop(); // get the id of the post
        var str = $('#repost_msg-' + id); // span not required, since it is an ID lookup
        $('#cat_post_box').val(str); // empty not required, and val() is the proper way to change the value of an input element (even textareas)
        return false;
    });
});

This is the best way to do it even if there is only one post in the page. Part of the problem with your code is that on the first click it BINDS the function, and in the subsequent clicks is when it finally gets called. You could go for a quick and dirty fix by changing that around to just be in document.ready.

Answer 2

$("#repost-" + postID).click(function(){
  $("#cat_post_box").val(''); // Instead of empty() - because empty remove all children from a element.
    $("#cat_post_box").text($("#repost_msg-" + postID).text());//span isn't required because you have and id. so the selector is as efficient as it can be.
});

And wrap everything in a $(document).ready(function(){ /Insert the code here/ }) so that it will bind to $("#repost-" + postID) button or link when the DOM is loaded.

Answer 3

I had a problem with Paolo's example when I clicked on the link the text that appeared in #cat_post_box was "object Object". Once I added ".text()" to the end of that statement I worked.

var str = $('#repost_msg-' + id).text();

Thanks for you example Paolo!