Question

我在upload_photo.aspx上使用了Masterpage，它使用colorBox显示文件上传页面。但是，自从我在Masterpage中添加（下面的代码）后，colorBox不会显示：

<script type="text/javascript">
            $(function () {
                $("#txtAutoCompleteSearch").AutoComplete("search.aspx?searchword=");
            });

            function clear_textbox() {
                if (document.aspnetForm.searchField.value == " Enter Your Search Here ")
                    document.aspnetForm.searchField.value = "";
            };

        </script>

以下是桅杆代码：

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
   <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="Css/menu_style.css" rel="stylesheet" type="text/css" />
     <link href="styles/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">        google.load('jquery', '1.3.2');</script>
    <script src="styles/js/jquery.autocomplete.js" type="text/javascript"></script>
    <script src="styles/js/jquery.dimensions.js" type="text/javascript"></script>
    <script src="styles/js/jquery.highlight-3.yui.js" type="text/javascript"></script>


    <script type="text/javascript">
        $(function () {
            $("#txtAutoCompleteSearch").AutoComplete("search.aspx?searchword=");
        });

        function clear_textbox() {
            if (document.aspnetForm.searchField.value == " Enter Your Search Here ")
                document.aspnetForm.searchField.value = "";
        };

    </script>

</head>
<body>
    <form id="masterPageForm" runat="server">

    <div id="pagewidth">
        <div id="Header">
            <asp:Label ID="userName" runat="server" Text="" style=" color: Maroon; font-size: large; z-index: 103; left: 805px; position: absolute; top: 132px"></asp:Label>
             <asp:LoginStatus ID="LoginStatus1" runat="server" ForeColor="White" 
                LogoutPageUrl="~/Default.aspx" LogoutText="Logout" CssClass="logOut" 
                BackColor="#454545" Font-Bold="True" Font-Names="Arial Black" 
                Font-Size="Small" />

            <%--<asp:Image ID="logoHeader" runat="server" CssClass="rounded-corners" ImageUrl="~/img/logo.png"/>--%>
            <asp:HyperLink ID="hlLogo" runat="server" ImageUrl="~/img/logo.png" NavigateUrl="~/home.aspx"></asp:HyperLink>

            <%--style="width: 1000px; height: 120px; margin-top: 10px;" />--%>
            <div style="top: 61px; left: 476px; position: absolute; height: 37px; width: 526px; font-size: medium; font-style: italic; color: #CCFF99; font-weight: bolder; z-index: 103;">
                <input id="txtAutoCompleteSearch" name="searchField" class="tb11" type="text" onfocus="clear_textbox()" value=" Enter Your Search Here "/> 
            <asp:ContentPlaceHolder id="Heading" runat="server">

            </asp:ContentPlaceHolder>

            </div>

        <div class="background">
   <asp:menu id="NavigationMenu" CssClass="NavigationMenu"  
        staticdisplaylevels="2" DynamicHorizontalOffset="1"
        staticsubmenuindent="1px" MaximumDynamicDisplayLevels="4"
        orientation="Horizontal"   
        DynamicPopOutImageUrl="~/img/right-arrow.gif" 
        StaticPopOutImageUrl="~/img/drop-arrow.gif"
        datasourceid="MenuSource"    
        runat="server" Height="30px">

        <staticmenuitemstyle ItemSpacing="10" CssClass="staticMenuItemStyle"/>
        <statichoverstyle CssClass="staticHoverStyle" />
        <StaticSelectedStyle CssClass="staticMenuItemSelectedStyle"/> 
        <DynamicMenuItemStyle CssClass="dynamicMenuItemStyle" />      
        <dynamichoverstyle CssClass="menuItemMouseOver" />
        <DynamicMenuStyle CssClass="menuItem" />
        <DynamicSelectedStyle CssClass="menuItemSelected" />

        <DataBindings>        
             <asp:MenuItemBinding DataMember="siteMapNode" 
                NavigateUrlField="url" TextField="title"  
                    ToolTipField="description" />
        </DataBindings>

      </asp:menu>
    </div>

    <asp:TreeView ID="NavigationTreeView" runat="server" Visible="false" DataSourceID="MenuSource" />

<div id="e">
        <asp:SiteMapPath ID="SiteMapPath1" runat="server" 
                RenderCurrentNodeAsLink="true" 
                CssClass="currentNodeStyle"
            PathSeparator=" >> " Visible="False">
            <PathSeparatorStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
            <CurrentNodeStyle ForeColor="#333333" CssClass="currentNodeStyle" />
            <NodeStyle ForeColor="#7C6F57"  CssClass="currentNodeStyle"  />
            <RootNodeStyle  ForeColor="#5D7B9D" CssClass="currentNodeStyle"  />
    </asp:SiteMapPath> 
</div>    

    <asp:Panel ID="AccessKeyPanel" runat="server">
    </asp:Panel>
       <asp:SiteMapDataSource id="MenuSource" runat="server" StartFromCurrentNode="false" ShowStartingNode="true" />

       <div id="tabDiv">
             <asp:ContentPlaceHolder id="mainBody" runat="server">

             </asp:ContentPlaceHolder>   
        </div>

        <div id="footer">
            &copy; Copyright Family Photo Online System</div>
    </div>
    </div>
    </form>

<script type="text/javascript">

    function navigateTo(url) {
        window.location = url;
    }

</script>

</body>
</html>

以下是javascript的upload_photo.aspx代码：

<script src="alerts/impromptu/jquery.js" type="text/javascript"></script>
    <script src="alerts/impromptu/jquery-impromptu.2.6.min.js" type="text/javascript"></script>
    <link href="alerts/impromptu/impromptu.css" rel="stylesheet" type="text/css" />

<link href="colorBox/colorbox.css" rel="stylesheet" type="text/css" />
    <script src="colorBox/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="colorBox/jquery.colorbox.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Examples of how to assign the ColorBox event to elements
            $("a[rel='example1']").colorbox();
            $("a[rel='example2']").colorbox({ transition: "fade" });
            $("a[rel='example3']").colorbox({ transition: "none", width: "75%", height: "75%" });
            $("a[rel='example4']").colorbox({ slideshow: true });
            $(".example5").colorbox();
            $(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
            $(".example7").colorbox({ width: "47%", height: "100%", iframe: true });
            $(".example8").colorbox({ width: "50%", inline: true, href: "#inline_example1" });
            $(".example9").colorbox({
                onOpen: function () { alert('onOpen: colorbox is about to open'); },
                onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
                onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
                onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
                onClosed: function () { alert('onClosed: colorbox has completely closed'); }
            });

            //Example of preserving a JavaScript event for inline calls.
            $("#click").click(function () {
                $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
                return false;
            });
        });
</script>

Firebug会抛出以下错误：

$（“a [rel ='example1']”）。colorbox不是一个函数 http://localhost:3478/upload_photo.aspx 第19行

如果我从Masterpage中删除Javascript函数，colorBox jQuery工作正常。

任何人都可以告诉我哪里出错了以及如何纠正它？任何帮助将不胜感激。

由于

Answer 1

这可能是因为您在母版页和照片页中都包含了jquery。这将导致jQuery加载，初始化，在主页面中运行脚本，然后全部抛出并重新加载，在upload_photo.aspx中遇到jQuery的脚本标记时重新初始化所有内容。您只希望每个javascript库加载一次，否则会出现各种混淆。

Asp.net主页和ContentPage JavaScript函数错误

1 个答案: