Copy text with zero clipboard using button click

Question

Just Noticed it works when I disable CSS Can anybody explain why?

I am working on zero clipboard to copy the value of text box to the the clipboard.

I am able to make it work on normal HTML page but when I apply same code on the aspx page it doesn't work as intended.

Let me first explain how its working on normal html page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Locker.test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
     <asp:Button ID="Button1" runat="server" Text="Button" />      
    </form>

             <script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
             <script type="text/javascript" src="Scripts/jquery.zclip.js"></script>
             <script type="text/javascript" src="Scripts/jquery.zclip.min.js"></script>
              <script>
                  $(document).ready(function () {
                      $('#<%=Button1.ClientID%>').zclip({
                          path: 'ZeroClipboard.swf',
                          copy: function () { return $('#<%=TextBox1.ClientID%>').val(); }
                      });
                  });
              </script>
</body>
</html>

It copies whatever typed in textbox to the clipboard.

When i right click on the button, i can see it is attached to Zeroclipboard flash. enter image description here

Now if I implement same on the aspx page that is linked to master page it doesn't work,

I think the zerocliboard is not initialized.

when i right click on the button, i see different. (Must be as above to make this work.)

enter image description here

Code on the aspx page is as follows:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="searchResult.aspx.cs" Inherits="Locker.searchResult" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .auto-style1 {
            color: #FFFFFF;
            font-size: large;
        }
        .auto-style2 {
            color: #000000;
        }
        .auto-style3 {
            color: #000000;
            font-size: large;
        }
    </style>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">

        &nbsp;<p>

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong> <span class="auto-style3">Information</span><span class="auto-style1">&nbsp;&nbsp;&nbsp;</span></strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
         <div style="width:70%; margin: auto auto; text-align:left;">
          <asp:Panel ID="Panel1" runat="server">
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label4" runat="server" style="font-weight: 700; font-size: large" Text="Details for :" CssClass="auto-style2"></asp:Label>
            <asp:Label ID="Label5" runat="server" style="font-weight: 700; font-size: large; color: #0000FF"></asp:Label>
            <br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label1" runat="server" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Password :" CssClass="auto-style2"></asp:Label>
            &nbsp;<asp:TextBox ID="TextBox2" runat="server" BorderStyle="Solid"  Enabled="False" Font-Size="Medium" ForeColor="Black" Width="213px"></asp:TextBox>

              &nbsp;

              <asp:Button ID="Button3" runat="server" Text="Button" />              
              <input type="text" id="test_description" value="hi" />

             <script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
             <script type="text/javascript" src="Scripts/jquery.zclip.js"></script>
             <script type="text/javascript" src="Scripts/jquery.zclip.min.js"></script>
              <script>
                 window.onload = $(document).ready(function () {
                      $('#<%=Button3.ClientID%>').zclip({
                          path: 'ZeroClipboard.swf',
                          copy: window.onload = function () { return $('#<%=TextBox2.ClientID%>').val(); }
                      });
                  });
              </script>
            <br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
            <asp:Label ID="Label6" runat="server" style="font-weight: 700; font-size: large" Text="Description :" CssClass="auto-style2"></asp:Label>
            &nbsp;<asp:TextBox ID="TextBox5" runat="server" BorderStyle="Solid" Enabled="False" Font-Size="Medium" Height="48px" TextMode="MultiLine" Width="213px"></asp:TextBox>
            <br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Label ID="Label7" runat="server" style="font-weight: 700; font-size: small" Text="Last Editor was " CssClass="auto-style2"></asp:Label>
            <asp:Label ID="Label8" runat="server" style="font-weight: 700; font-size: small" CssClass="auto-style2"></asp:Label>
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Edit" Width="97px" />
            <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Update" Visible="False" Width="97px" />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Label ID="Label12" runat="server" style="font-weight: 700; font-size: large; color: #0000FF" Visible="False"></asp:Label>
            <br />
            <br />
            <br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;
    </asp:Panel>

         </div>
</asp:Content>

Does anyone know what the problem is and how can this be rectified?

Inspect result from HTML page enter image description here

Inspect Result from Normal Page enter image description here

Just check the path for ZeroClipboard.swf or trying putting absolute url for testing. — Aditya Singh, Sep 26 '13 at 12:04
I think you are right, but i am not sure why its not loaded in one page and not in other. Look by snap from browser above — Amrit Sharma, Sep 26 '13 at 12:13
Try putting absolute path for `path: 'http://localhost:port/.../ZeroClipboard.swf',` — Aditya Singh, Sep 26 '13 at 12:15
Just hit the absolute url `http://localhost:port/.../ZeroClipboard.swf` in the browser, and right click on it and check whether flash is loaded or not. — Aditya Singh, Sep 26 '13 at 12:23
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/38100/discussion-between-wiz-kid-and-amrit-sharma) — Aditya Singh, Sep 26 '13 at 12:25
Is this issue still open? If so, check the console in chrome to see if any files can't be loaded. Also, you have window.onload in your failing page. Try making it identical to the working page by taking out window.onload. — Vulcronos, Sep 30 '13 at 21:02
@Vulcronos, I tried that already. I added that window.onload, to check if it might work but no luck. It works fine if i disable the css file. — Amrit Sharma, Oct 01 '13 at 02:23

Ben Smith · Answer 1 · 2013-10-08T11:36:54.047

1

Looking at your output for "Inspect Result from Normal Page", I can see that "TextBox2" is disabled (whereas it should be enabled) and it also has the CSS class "aspNetDisabled" applied to it. It is most likely the "aspNetDisabled" class which is causing the ZeroCopy facility to fail, because when you turn off CSS the functionality works.

Note how "TextBox1" in "Inspect result from HTML page" is not disabled.

Hence to get this working, make sure that "TextBox2" in your ASPX page has "Enabled" set to True.

Also ensure you have Flash installed on the browsers where this is used, as ZeroClipboard uses an "invisible Adobe Flash movie".

Finally, remove "window.onload" i.e. change the code to:

$(document).ready(function () {
 $('#<%=Button3.ClientID%>').zclip({
  path: 'ZeroClipboard.swf',
  copy: function () { return $('#<%=TextBox2.ClientID%>').val(); }
 });
});

As I don't think it will work with the ZeroClipboard library.

edited Oct 08 '13 at 11:36

answered Oct 04 '13 at 22:32

Ben Smith

19,589
6
65
93

Also tried in internet explorer it works but not on other browser – Amrit Sharma Oct 08 '13 at 10:09
It could be because Flash is installied in IE, but not on the other browsers. Check that Flash is installed on the other browsers (you can do so using [this](https://www.adobe.com/software/flash/about/) link). – Ben Smith Oct 08 '13 at 10:46
it is installed, it works when css is disabled but in IE it works with no problem – Amrit Sharma Oct 08 '13 at 10:56
@AmritSharma Also try removing "window.onload". See my update answer. – Ben Smith Oct 08 '13 at 11:37
@AmritSharma The only other suggestion is to check the debug console when you run in other browsers i.e. not IE. Are you getting any errors when you click on the button? – Ben Smith Oct 08 '13 at 12:42
no error on browser, Only thing i noticed it that flash is not attached to the button because when i right click on button, i cannot see the flash option, while same on IE shows me the flash options. – Amrit Sharma Oct 08 '13 at 12:55

Copy text with zero clipboard using button click

1 Answers1