Search code examples
javascriptjqueryflashclipboardzeroclipboard

Zero Clipboard Doesn't work when it's called dynamically


For coping to the clipboard I'm using Zero Clipboard, recommended by this answer.

The code works perfectly fine when used in this form.

<div id="d_clip_button" style="background: #FFFFCC;">
    Click to copy
</div>
<script language="JavaScript" type="text/javascript">
        var clip = new ZeroClipboard.Client();
                        clip.setText( '<?php echo "http://example.com/" . $var; ?>' );
                        clip.glue( 'd_clip_button' );
</script>

A problem occurs when this above code is called dynamically like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

<form action="generar.php" method="post">
Input: <input type="text" id="longUrl" name="longUrl" value="" /><br />
<input type="button" value="Acortar!" onclick="submitme()" />
<div id="resultado"></div>
</form>



<script type="text/javascript" charset="utf-8">

    function submitme(){
    var tosend=document.getElementById("longUrl").value;
    $.ajax({
            type: 'POST',
            url: 'generar.php',
            data: 'longUrl='+tosend,
            success: function(msg){
                if(msg){
                    document.getElementById("resultado").innerHTML=msg;
                }
                else{
                    return;
                }
            }
        });
    }

</script>

The "Click to copy" appears but the resource is not called correctly since it's "not flash".

Any ideas on how to make this work / what is the problem?

Thanks in advance!! Please ask for any clarification needed!


Could it have (don't think so) anything to do with the whole thing being nested on a div?


Solution

  • innerHTML doesn't execute JavaScript that gets passed through in the Ajax call.

    Use jQuery's .html().

     $("#resultado").html(msg);