1. We apologize for the slow support at the moment. Hugh (cheesegrits) is scheduled for some major back surgery this month to repair two ruptured discs which are severely hampering his ability to work, and one of our stalwart community support members is on vacation for the month. Please bear with us.

Trick: Copy to Clipboard

Discussion in 'Hints, Tips and Tricks' started by grey666, Sep 30, 2011.

  1. grey666 Member

    Level: Community
    This is a very obscure trick, but worthwhile at the same time.

    This allows you to copy any data to the windows clipboard from any field in any Fabrik form - on any javascript event.

    Download the code, place it in it's own directory - i.e. "www/zeroclipboard". www is your root web directory.

    Download the code here:
    http://code.google.com/p/zeroclipboard/downloads/list

    Next ...

    In the Fabrik form, place the following code in the Introduction area: Use the HTML Button ... (This puts a button at the top of your form, using Flash.)

    <script src="zeroclipboard/ZeroClipboard.js" type="text/javascript"></script>
    <div id="d_clip_button" style="border: 1px solid black; padding: 5px; margin: 5px; width: 40%;">Text To Clipboard</div>
    <script type="text/javascript">// <![CDATA[
    ZeroClipboard.setMoviePath( 'http://yourdomain.com/zeroclipboard/ZeroClipboard10.swf' );
    var clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );
    clip.setText( 'Copy me!' );
    clip.glue( 'd_clip_button' );
    // ]]></script>


    Next, add a javascript event to any Fabrik field.

    For example... a text box field. Add javascript, Action: On Change:
    clip.setText( $('db_content___Text').value );

    db_content is the Fabrik table name, Text is the field.


    Action: On Load:
    clip.setText( $('db_content___Text').value );


    That's it... click a button and the data from your Fabrik fields is copied to the Windows clipboard.

    Try mouse-over... it's fun.


    Multiple zeroclipboard buttons: (Fabrik Form, Introduction, HTML)
    <script src="zeroclipboard/ZeroClipboard.js" type="text/javascript"></script>
    <table style="width: 100%;" border="0"><tbody><tr><td>
    <div id="d_clip_button" style="border: 1px solid black; padding: 5px; margin: 5px; width: 40%;">Text To Clipboard</div>
    <script type="text/javascript">// <![CDATA[
    ZeroClipboard.setMoviePath( 'http://yourdomain.com/zeroclipboard/ZeroClipboard10.swf' );
    var clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );
    clip.setText( 'Copy me!' );
    clip.glue( 'd_clip_button' );
    // ]]></script>
    </td><td>
    <div id="e_clip_button" style="border: 1px solid black; padding: 5px; margin: 5px; width: 40%;">Output To Clipboard</div>
    <script type="text/javascript">// <![CDATA[
    ZeroClipboard.setMoviePath( 'http://Yourdomain.com/zeroclipboard/ZeroClipboard10.swf' );
    var clip2 = new ZeroClipboard.Client();
    clip2.setHandCursor( true );
    clip2.setText( 'Copy me!' );
    clip2.glue( 'e_clip_button' );
    // ]]></script>
    </td></tr></tbody></table>


    This creates two flash movies ... at the top of your form, which can monitor two different Fabrik fields at the same time.

Share This Page