Question

Im trying to copy data to clipboard using zclip jquery. problem that im facing is when i copy it will copy everything in the database in field “name”. but what i want is to copy a single name that user clicked. if the click another copy that. not the whole thing. can anyone tell me how to do this. thanks.

this is the zclip code

$(document).ready(function(){
$('p#copy').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('div#copy').text();}
});

MySQL loop:

$query = "SELECT * FROM names ORDER BY id desc";
$result= mysql_query($query) or die ('Mysql Error');
while($row = mysql_fetch_array($result)){
echo  '<div id="copy">'.$row['name'].'</div>';
echo  '<p id="copy">copy</p>';
}

zclip site: http://www.steamdev.com/zclip/

Answer 1

The HTML you generate is not valid which is hindering you in the end to achieve the result you’re looking for: in HTML an ID can only be used once (see: Element identifiers: the id and class attributes). You are using the same ID for multiple DIVs. That can not work, as an ID must be unique across the whole HTML document.

Instead assign one ID to each DIV (e.g. by using a counter) and then apply the jquery function on the specific DIV only.

$idCounter = 0;
while($row = mysql_fetch_array($result))
{
    $idCounter++;
    echo  '<div id="copy-div-', $idCounter, '">', $row['name'], '</div>';
    echo  '<p id="copy-p-', $idCounter, '" class="copy-click">copy</p>';
}

Code-Example: Create multiple IDs with a counter variable