2013-10-15 55 views
0

在我的網頁中,我有兩個綁定到jquery的控件。 一個是將文本框的值複製到剪貼板的按鈕,其他是輸入日期的文本框。在網頁上的Jquery上的錯誤

enter image description here

但問題是,當我調試這個Web應用程序,它引發了jQuery的錯誤。 而當我註釋掉一個JavaScript方法和調試,它的工作原理(嘗試用這兩種JavaScript方法)。

但是,當我不註釋掉,它不起作用。

enter image description here

.aspx的代碼:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="searchSerialResult.aspx.cs" Inherits="Locker.searchSerialResult" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 
    <style type="text/css"> 

     .auto-style3 { 
      color: #CC3300; 
      font-size: x-large; 
     } 
     .auto-style1 { 
      color: #FFFFFF; 
      font-size: large; 
     } 
     .auto-style2 { 
      color: #000000; 
     } 
     </style> 
</asp:Content> 

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


    <p> 
     &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;&nbsp;&nbsp;&nbsp;&nbsp; <strong> <span class="auto-style3">&nbsp; Recorded 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" BorderStyle="None"> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<asp:Label ID="Label4" runat="server" CssClass="auto-style2" style="font-weight: 700; font-size: large" Text="Details for :"></asp:Label> 
      &nbsp;<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;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;<asp:Label ID="Label1" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Serial :"></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="Copy Me!"/> 

        <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script> 
        <script src="Scripts/jquery.zclip.js" type="text/javascript"></script> 
        <script src="Scripts/jquery.zclip.min.js" type="text/javascript"></script> 
        <script> 

         $(document).ready(function() { 
          $('#<%=Button3.ClientID%>').zclip({ 
           path: 'ZeroClipboard.swf', 
           copy: function() { return $('#<%=TextBox2.ClientID%>').val(); } 
         }); 
         }); 
       </script> 
      <br /> 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <asp:Label ID="Label13" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Serial Type :"></asp:Label> 
      &nbsp;<asp:DropDownList ID="DropDownList1" runat="server" Height="26px" Width="181px" AutoPostBack="True" Enabled="False" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> 
       <asp:ListItem>Never Expire</asp:ListItem> 
       <asp:ListItem>Expire</asp:ListItem> 
      </asp:DropDownList> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <asp:Label ID="Label14" runat="server" CssClass="auto-style2" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Expiry Date :" Visible="False"></asp:Label> 
      &nbsp;<asp:TextBox ID="TextBox6" runat="server" BorderStyle="Solid" Enabled="False" Height="16px" Visible="False" Width="136px"></asp:TextBox> 
      &nbsp;&nbsp; 

      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
      <link rel="stylesheet" href="/resources/demos/style.css" /> 
      <script> 
       $(function() { 
       $("#<%=TextBox6.ClientID%>").datepicker({ 

       }); 
      }); 
     </script>&nbsp;<br /> 
      <br /> 
      &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" Font-Size="Medium" Height="48px" TextMode="MultiLine" Width="217px" Enabled="False"></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" /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <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 /> 
      &nbsp;&nbsp;&nbsp;&nbsp; 
     </asp:Panel> 
    </div> 
</asp:Content 

如果我註釋掉的JavaScript方法中的任何一個作品..

+0

*旁註*:在頁面上排列元素比使用' '要好得多。這只是懶惰。 :/你應該學習CSS或與知道它的人一起工作。 –

回答

0

你包括jQuery的的多個版本,而第二個版本覆蓋第一個版本。

因此,任何與第一個版本關聯的插件都將被刪除。 (在這種情況下爲ZClip)

0

沒錯。您不能使用相同的jquery插件庫(zclip)兩次,以將其附加到$符號。如果你真的需要(源代碼和縮小代碼),你應該爲它們中的一個使用不同的變量名稱。否則會引起衝突。如果你是在生產環境

  <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script> 
      <script src="Scripts/jquery.zclip.min.js" type="text/javascript"></script> 
      <script type="text/javascript"> 

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

所以,我寧願你使用此代碼。如果你在開發環境中,那麼你應該使用jQuery插件的未壓縮版本文件。

+0

您的解決方案不能解決問題 –

+0

那麼您應該檢查zclip插件是否與您的jQuery版本兼容。如果你只包含這兩個js庫,它應該可以工作。 – alpham8

+0

即使使用jquery,它也可以正常工作,但是如果你看看我的代碼,還有另外一個使用jquery的控件。如果我註釋掉jquery,則拋出異常 –