librelist archives

« back to archive

Copy text to clipboard with ZeroClipboard

Copy text to clipboard with ZeroClipboard

From:
Mic
Date:
2015-01-08 @ 05:24
Hi,
I found an example (
http://blog.aajit.com/easy-multiple-copy-to-clipboard-by-zeroclipboard/ )
how to copy text to clipboard with ZeroClipboard. However, I tried to
convert the original code (
http://blog.aajit.com/demos/MultipleZeroClipboard/copytoclip.zip ) to Flask
, but the copy button does not have any effect.

Here is app.py

    *@app.route("/table/", methods=["GET"])*
*    def table():*
*        return render_template('table.html')*

Here is base2.html:

    *<!DOCTYPE html>*
*    <html lang="en">*
*      <head>*
*        <meta charset="utf-8">*
*        <meta http-equiv="X-UA-Compatible" content="IE=edge">*
*        <meta name="viewport" content="width=device-width,
initial-scale=1">*
*        <title>flask-bootstrap example</title>*
*        <!-- Bootstrap -->*
*        <link rel="stylesheet" type="text/css" href="{{url_for('static',
filename='bootstrap/css/bootstrap.css')}}" >*
*        <link rel="stylesheet" type="text/css"

href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css

<http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css>">*
*        <link rel="stylesheet" type="text/css"
href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css
<https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css>"
>*
*        <link rel="stylesheet" type="text/css" href="{{ url_for('static',
filename='web.css') }}">*
*        <link rel="stylesheet" type="text/css" href="{{ url_for('static',
filename='tooltip.css') }}">*
*        <style>*
*          .clip_button {*
*                  background:#063;*
*                  padding:4px;*
*                  width:100px;*
*          }*
*        </style>*

*        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and
media queries -->*
*        <!-- WARNING: Respond.js doesn't work if you view the page via
file:// -->*
*        <!--[if lt IE 9]>*
*          <script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js
<https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js>"></script>*
*          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js
<https://oss.maxcdn.com/respond/1.4.2/respond.min.js>"></script>*
*        <![endif]-->*
*      </head>*
*      <body {% block body_attrs %}{% endblock %}>*
*        <div class="navbar navbar-inverse navbar-fixed-top"
role="navigation">*
*          <div class="container">*
*              <div class="navbar-header">*
*                <button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">*
*                <span class="sr-only">Toggle navigation</span>*
*                <span class="icon-bar"></span>*
*                <span class="icon-bar"></span>*
*                <span class="icon-bar"></span>*
*                </button>*
*                <a class="navbar-brand" href="{{ url_for('index')
}}">test</a>*
*              </div>*
*              <!--/.navbar-header -->*
*              <div class="collapse navbar-collapse">*
*                <ul class="nav navbar-nav">*
*                    <li id="home-url"><a href="{{ url_for('index')
}}">Home</a></li>*
*                    <li id="about-url"><a href="#about">About</a></li>*
*                    <li id="contact-url"><a
href="#contact">Contact</a></li>*
*                </ul>*
*                <!--/.navbar-nav -->*
*              </div>*
*              <!--/.nav-collapse -->*
*          </div>*
*          <!--/.container -->*
*        </div>*
*        <!--/.navbar -->*
*        <div class="container">*
*        {% block body %}{% endblock %}*
*        </div>*
*        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->*
*        <script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
<http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>"></script>*
*        <!-- Include all compiled plugins (below), or include individual
files as needed -->*
*        <script type="text/javascript" src="{{url_for('static',
filename='bootstrap/js/bootstrap.js')}}"></script>*
*        <script type="text/javascript"

src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js

<http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js>"></script>*
*        <script type="text/javascript"
src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js

<https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js>"></script>*
*        <script type="text/javascript" >*
*          $("a.my-tool-tip").tooltip();*
*          $('.selectpicker').selectpicker();*
*          $("#reference_select").selectpicker("refresh");*
*        </script>  *
*        <script type="text/javascript" src="{{url_for('static',
filename='ZeroClipboard/ZeroClipboard.js')}}"></script>*
*        <script language="JavaScript">*
*        ////copy to clip*
*                var clip = null;*

*          function $(id) { return document.getElementById(id); }*

*          function init() *
*          {*
*              clip = new ZeroClipboard.Client();*
*              clip.setHandCursor( true );*
*          }*

*          function move_swf(ee)*
*          {    *
*              copything = document.getElementById(ee.id
<http://ee.id>+"_text").value;*
*              clip.setText(copything);*

*                if (clip.div)*
*                        {        *
*                    clip.receiveEvent('mouseout', null);*
*                    clip.reposition(ee.id <http://ee.id>);*
*                }*
*                else{ clip.glue(ee.id <http://ee.id>);   }*

*                clip.receiveEvent('mouseover', null);*

*          }    *

*        </script>    *

*        <script type="text/javascript">*
*          {% block js %}{% endblock %}*
*        </script> *
*      </body>*
*    </html>*

Here is the (table.html):

    *{% extends 'base2.html' %}*

*    {% block body_attrs %} onload="init();" {% endblock %}*
*    {% block body%} *


*        <div class="row clearfix">*
*                <div class="col-md-12 column">*
*                        <table class="table">*
*                                <tbody>*
*                                        <tr>*
*                                          <td><input type='text'
id='textid5_text' value='your text 5' /></td>*
*                                          <td><div id='textid5'
onload="init();" onMouseOver='move_swf(this)'
class='clip_button'>COPY</div></td>*
*                                        </tr>*

*                                </tbody>*
*                        </table>*
*                </div>*
*        </div>*
*    {% endblock %}*

How is it possible to fix it?

Thank you in advance.

Mic

Re: Copy text to clipboard with ZeroClipboard

From:
Mic
Date:
2015-01-08 @ 05:44
I forgotten to mention that I got

127.0.0.1 - - [08/Jan/2015 15:31:55] "GET /snp/ZeroClipboard.swf HTTP/1.1"
500 -

However, ZeroClipboard files are located in static/ZeroClipboard:
static $ ls ZeroClipboard/
ZeroClipboard10.swf  ZeroClipboard.js  ZeroClipboard.swf

How is it possible to change from /snp/ZeroClipboard.swf to
static/ZeroClipboard/ZeroClipboard.swf?

On Thu, Jan 8, 2015 at 3:24 PM, Mic <mictadlo@gmail.com> wrote:

> Hi,
> I found an example (
> http://blog.aajit.com/easy-multiple-copy-to-clipboard-by-zeroclipboard/ )
> how to copy text to clipboard with ZeroClipboard. However, I tried to
> convert the original code (
> http://blog.aajit.com/demos/MultipleZeroClipboard/copytoclip.zip ) to
> Flask , but the copy button does not have any effect.
>
> Here is app.py
>
>     *@app.route("/table/", methods=["GET"])*
> *    def table():*
> *        return render_template('table.html')*
>
> Here is base2.html:
>
>     *<!DOCTYPE html>*
> *    <html lang="en">*
> *      <head>*
> *        <meta charset="utf-8">*
> *        <meta http-equiv="X-UA-Compatible" content="IE=edge">*
> *        <meta name="viewport" content="width=device-width,
> initial-scale=1">*
> *        <title>flask-bootstrap example</title>*
> *        <!-- Bootstrap -->*
> *        <link rel="stylesheet" type="text/css" href="{{url_for('static',
> filename='bootstrap/css/bootstrap.css')}}" >*
> *        <link rel="stylesheet" type="text/css"
> 
href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css
> 
<http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css>">*
> *        <link rel="stylesheet" type="text/css"
> 
href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css
> <https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css>"
> >*
> *        <link rel="stylesheet" type="text/css" href="{{ url_for('static',
> filename='web.css') }}">*
> *        <link rel="stylesheet" type="text/css" href="{{ url_for('static',
> filename='tooltip.css') }}">*
> *        <style>*
> *          .clip_button {*
> *                  background:#063;*
> *                  padding:4px;*
> *                  width:100px;*
> *          }*
> *        </style>*
>
> *        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and
> media queries -->*
> *        <!-- WARNING: Respond.js doesn't work if you view the page via
> file:// -->*
> *        <!--[if lt IE 9]>*
> *          <script
> src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js
> <https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js>"></script>*
> *          <script
> src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js
> <https://oss.maxcdn.com/respond/1.4.2/respond.min.js>"></script>*
> *        <![endif]-->*
> *      </head>*
> *      <body {% block body_attrs %}{% endblock %}>*
> *        <div class="navbar navbar-inverse navbar-fixed-top"
> role="navigation">*
> *          <div class="container">*
> *              <div class="navbar-header">*
> *                <button type="button" class="navbar-toggle"
> data-toggle="collapse" data-target=".navbar-collapse">*
> *                <span class="sr-only">Toggle navigation</span>*
> *                <span class="icon-bar"></span>*
> *                <span class="icon-bar"></span>*
> *                <span class="icon-bar"></span>*
> *                </button>*
> *                <a class="navbar-brand" href="{{ url_for('index')
> }}">test</a>*
> *              </div>*
> *              <!--/.navbar-header -->*
> *              <div class="collapse navbar-collapse">*
> *                <ul class="nav navbar-nav">*
> *                    <li id="home-url"><a href="{{ url_for('index')
> }}">Home</a></li>*
> *                    <li id="about-url"><a href="#about">About</a></li>*
> *                    <li id="contact-url"><a
> href="#contact">Contact</a></li>*
> *                </ul>*
> *                <!--/.navbar-nav -->*
> *              </div>*
> *              <!--/.nav-collapse -->*
> *          </div>*
> *          <!--/.container -->*
> *        </div>*
> *        <!--/.navbar -->*
> *        <div class="container">*
> *        {% block body %}{% endblock %}*
> *        </div>*
> *        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->*
> *        <script type="text/javascript"
> src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
> <http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>"></script>*
> *        <!-- Include all compiled plugins (below), or include individual
> files as needed -->*
> *        <script type="text/javascript" src="{{url_for('static',
> filename='bootstrap/js/bootstrap.js')}}"></script>*
> *        <script type="text/javascript"
> 
src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js
> 
<http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js>"></script>*
> *        <script type="text/javascript"
> src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js
> 
<https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js>"></script>*
> *        <script type="text/javascript" >*
> *          $("a.my-tool-tip").tooltip();*
> *          $('.selectpicker').selectpicker();*
> *          $("#reference_select").selectpicker("refresh");*
> *        </script>  *
> *        <script type="text/javascript" src="{{url_for('static',
> filename='ZeroClipboard/ZeroClipboard.js')}}"></script>*
> *        <script language="JavaScript">*
> *        ////copy to clip*
> *                var clip = null;*
>
> *          function $(id) { return document.getElementById(id); }*
>
> *          function init() *
> *          {*
> *              clip = new ZeroClipboard.Client();*
> *              clip.setHandCursor( true );*
> *          }*
>
> *          function move_swf(ee)*
> *          {    *
> *              copything = document.getElementById(ee.id
> <http://ee.id>+"_text").value;*
> *              clip.setText(copything);*
>
> *                if (clip.div)*
> *                        {        *
> *                    clip.receiveEvent('mouseout', null);*
> *                    clip.reposition(ee.id <http://ee.id>);*
> *                }*
> *                else{ clip.glue(ee.id <http://ee.id>);   }*
>
> *                clip.receiveEvent('mouseover', null);*
>
> *          }    *
>
> *        </script>    *
>
> *        <script type="text/javascript">*
> *          {% block js %}{% endblock %}*
> *        </script> *
> *      </body>*
> *    </html>*
>
> Here is the (table.html):
>
>     *{% extends 'base2.html' %}*
>
> *    {% block body_attrs %} onload="init();" {% endblock %}*
> *    {% block body%} *
>
>
> *        <div class="row clearfix">*
> *                <div class="col-md-12 column">*
> *                        <table class="table">*
> *                                <tbody>*
> *                                        <tr>*
> *                                          <td><input type='text'
> id='textid5_text' value='your text 5' /></td>*
> *                                          <td><div id='textid5'
> onload="init();" onMouseOver='move_swf(this)'
> class='clip_button'>COPY</div></td>*
> *                                        </tr>*
>
> *                                </tbody>*
> *                        </table>*
> *                </div>*
> *        </div>*
> *    {% endblock %}*
>
> How is it possible to fix it?
>
> Thank you in advance.
>
> Mic
>

Re: Copy text to clipboard with ZeroClipboard

From:
Mic
Date:
2015-01-08 @ 07:26
I had to set moviePath in the following way:
    <script language="JavaScript">
    ////copy to clip
      ZeroClipboard.setMoviePath("{{url_for('static',
filename='ZeroClipboard/ZeroClipboard.swf')}}")
      var clip = null;

On Thu, Jan 8, 2015 at 3:44 PM, Mic <mictadlo@gmail.com> wrote:

> I forgotten to mention that I got
>
> 127.0.0.1 - - [08/Jan/2015 15:31:55] "GET /snp/ZeroClipboard.swf HTTP/1.1"
> 500 -
>
> However, ZeroClipboard files are located in static/ZeroClipboard:
> static $ ls ZeroClipboard/
> ZeroClipboard10.swf  ZeroClipboard.js  ZeroClipboard.swf
>
> How is it possible to change from /snp/ZeroClipboard.swf to
> static/ZeroClipboard/ZeroClipboard.swf?
>
> On Thu, Jan 8, 2015 at 3:24 PM, Mic <mictadlo@gmail.com> wrote:
>
>> Hi,
>> I found an example (
>> http://blog.aajit.com/easy-multiple-copy-to-clipboard-by-zeroclipboard/
>> ) how to copy text to clipboard with ZeroClipboard. However, I tried to
>> convert the original code (
>> http://blog.aajit.com/demos/MultipleZeroClipboard/copytoclip.zip ) to
>> Flask , but the copy button does not have any effect.
>>
>> Here is app.py
>>
>>     *@app.route("/table/", methods=["GET"])*
>> *    def table():*
>> *        return render_template('table.html')*
>>
>> Here is base2.html:
>>
>>     *<!DOCTYPE html>*
>> *    <html lang="en">*
>> *      <head>*
>> *        <meta charset="utf-8">*
>> *        <meta http-equiv="X-UA-Compatible" content="IE=edge">*
>> *        <meta name="viewport" content="width=device-width,
>> initial-scale=1">*
>> *        <title>flask-bootstrap example</title>*
>> *        <!-- Bootstrap -->*
>> *        <link rel="stylesheet" type="text/css" href="{{url_for('static',
>> filename='bootstrap/css/bootstrap.css')}}" >*
>> *        <link rel="stylesheet" type="text/css"
>> 
href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css
>> 
<http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css>">*
>> *        <link rel="stylesheet" type="text/css"
>> 
href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css
>> <https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css>"
>> >*
>> *        <link rel="stylesheet" type="text/css" href="{{
>> url_for('static', filename='web.css') }}">*
>> *        <link rel="stylesheet" type="text/css" href="{{
>> url_for('static', filename='tooltip.css') }}">*
>> *        <style>*
>> *          .clip_button {*
>> *                  background:#063;*
>> *                  padding:4px;*
>> *                  width:100px;*
>> *          }*
>> *        </style>*
>>
>> *        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and
>> media queries -->*
>> *        <!-- WARNING: Respond.js doesn't work if you view the page via
>> file:// -->*
>> *        <!--[if lt IE 9]>*
>> *          <script
>> src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js
>> <https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js>"></script>*
>> *          <script
>> src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js
>> <https://oss.maxcdn.com/respond/1.4.2/respond.min.js>"></script>*
>> *        <![endif]-->*
>> *      </head>*
>> *      <body {% block body_attrs %}{% endblock %}>*
>> *        <div class="navbar navbar-inverse navbar-fixed-top"
>> role="navigation">*
>> *          <div class="container">*
>> *              <div class="navbar-header">*
>> *                <button type="button" class="navbar-toggle"
>> data-toggle="collapse" data-target=".navbar-collapse">*
>> *                <span class="sr-only">Toggle navigation</span>*
>> *                <span class="icon-bar"></span>*
>> *                <span class="icon-bar"></span>*
>> *                <span class="icon-bar"></span>*
>> *                </button>*
>> *                <a class="navbar-brand" href="{{ url_for('index')
>> }}">test</a>*
>> *              </div>*
>> *              <!--/.navbar-header -->*
>> *              <div class="collapse navbar-collapse">*
>> *                <ul class="nav navbar-nav">*
>> *                    <li id="home-url"><a href="{{ url_for('index')
>> }}">Home</a></li>*
>> *                    <li id="about-url"><a href="#about">About</a></li>*
>> *                    <li id="contact-url"><a
>> href="#contact">Contact</a></li>*
>> *                </ul>*
>> *                <!--/.navbar-nav -->*
>> *              </div>*
>> *              <!--/.nav-collapse -->*
>> *          </div>*
>> *          <!--/.container -->*
>> *        </div>*
>> *        <!--/.navbar -->*
>> *        <div class="container">*
>> *        {% block body %}{% endblock %}*
>> *        </div>*
>> *        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->*
>> *        <script type="text/javascript"
>> src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
>> <http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>"></script>*
>> *        <!-- Include all compiled plugins (below), or include individual
>> files as needed -->*
>> *        <script type="text/javascript" src="{{url_for('static',
>> filename='bootstrap/js/bootstrap.js')}}"></script>*
>> *        <script type="text/javascript"
>> 
src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js
>> 
<http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js>"></script>*
>> *        <script type="text/javascript"
>> src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js
>> 
<https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js>"></script>*
>> *        <script type="text/javascript" >*
>> *          $("a.my-tool-tip").tooltip();*
>> *          $('.selectpicker').selectpicker();*
>> *          $("#reference_select").selectpicker("refresh");*
>> *        </script>  *
>> *        <script type="text/javascript" src="{{url_for('static',
>> filename='ZeroClipboard/ZeroClipboard.js')}}"></script>*
>> *        <script language="JavaScript">*
>> *        ////copy to clip*
>> *                var clip = null;*
>>
>> *          function $(id) { return document.getElementById(id); }*
>>
>> *          function init() *
>> *          {*
>> *              clip = new ZeroClipboard.Client();*
>> *              clip.setHandCursor( true );*
>> *          }*
>>
>> *          function move_swf(ee)*
>> *          {    *
>> *              copything = document.getElementById(ee.id
>> <http://ee.id>+"_text").value;*
>> *              clip.setText(copything);*
>>
>> *                if (clip.div)*
>> *                        {        *
>> *                    clip.receiveEvent('mouseout', null);*
>> *                    clip.reposition(ee.id <http://ee.id>);*
>> *                }*
>> *                else{ clip.glue(ee.id <http://ee.id>);   }*
>>
>> *                clip.receiveEvent('mouseover', null);*
>>
>> *          }    *
>>
>> *        </script>    *
>>
>> *        <script type="text/javascript">*
>> *          {% block js %}{% endblock %}*
>> *        </script> *
>> *      </body>*
>> *    </html>*
>>
>> Here is the (table.html):
>>
>>     *{% extends 'base2.html' %}*
>>
>> *    {% block body_attrs %} onload="init();" {% endblock %}*
>> *    {% block body%} *
>>
>>
>> *        <div class="row clearfix">*
>> *                <div class="col-md-12 column">*
>> *                        <table class="table">*
>> *                                <tbody>*
>> *                                        <tr>*
>> *                                          <td><input type='text'
>> id='textid5_text' value='your text 5' /></td>*
>> *                                          <td><div id='textid5'
>> onload="init();" onMouseOver='move_swf(this)'
>> class='clip_button'>COPY</div></td>*
>> *                                        </tr>*
>>
>> *                                </tbody>*
>> *                        </table>*
>> *                </div>*
>> *        </div>*
>> *    {% endblock %}*
>>
>> How is it possible to fix it?
>>
>> Thank you in advance.
>>
>> Mic
>>
>
>