I have multipule "copy code" buttons on one page. Each code has its own button.

here is my basic html:

<a id="1" href="#" class="small-white-btn copyme">Copy Source</a>    
<div id="code-1" style="display:none;">html source code goes here</div>
<div class="msg1"></div>

<a id="2" href="#" class="small-white-btn copyme">Copy Source</a>   
<div id="code-2" style="display:none;">html source code goes here</div>
<div class="msg2"></div>

My zclip jquery looks like this:

$('.copyme').zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function () {
        var id = $(this).attr('id');
        var copythis = $('#code-' + id).text();
        return copythis;
    },
    afterCopy: function () {
        $("div.msg" + id).html("<p>Source Code Copied</p>");
    }
});

This works, however, I cannot get the message injected into the div class="msg" tag.

How can I target the var id, add it to the div msg and display it on the page when the button is clicked.

Answer

November 18, 2013

KyleMit

The reason you cannot access the id variable you created in the copy function from afterCopy is because variables defined inside of a function are scoped to that function. However, this is easily overcomable.

There is no need to save the value from $(this).attr('id') as a global variable when the copy function is called, because you can just as easily get the id of the calling element in the afterCopy function by using the same exact expression: i.e.

afterCopy: function () {
    var id = $(this).attr('id');
}

This answers your original question, but there is a much better way to determine which elements to select. Rather than relying on the ID field to never change and using it to construct the id of another element, you can just store the exact id of your copy text and copy message elements in the form of custom data- attributes* on your .copyme anchor, like this:

<a data-copy="#code-1" data-copy-msg="#msg1" class="copyme">Copy Source 1</a>

Then, in the copy function, you can grab that attribute and pass it into a jQuery selector to get the text value to copy, like this:

copy: function () {
    var copySelector = $(this).data('copy');
    return $(copySelector).text();
}

You can handle the afterCopy event the same way. You can use this instead of having to store the ID in memory. Grab the selector where you want the message to go, and apply the html to that, like this:

afterCopy: function () {
    var copyMsgSelector = $(this).data('copy-msg');
    $(copyMsgSelector).html("Source Code Copied");
}

Working Demo in Fiddle

So the whole thing would look like this:

HTML:

<a data-copy="#code-1" data-copy-msg="#msg1"
   href="#" class="copyme" >Copy Source 1</a> 
<div id="code-1" style="display:none;">source code 1</div>
<span id="msg1"></span>

<br/>
<a data-copy="#code-2" data-copy-msg="#msg2"
   href="#" class="copyme" >Copy Source 2</a> 
<div id="code-2" style="display:none;">source code 2</div>
<span id="msg2"></span>

JavaScript:

$('.copyme').zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function () {
        var copySelector = $(this).data('copy');
        return $(copySelector).text();
    },
    afterCopy: function () {
        var copyMsgSelector = $(this).data('copy-msg');
        $(copyMsgSelector).html("Source Code Copied");
    }
});