当前位置： 文江博客话题详情

Asp.net Masterpage 和 ContentPage JavaScript 函数错误

发布于 2024-10-19 07:23:34 字数 8786 浏览 1 评论 0原文

我正在为 upload_photo.aspx 使用 Masterpage，它使用 colorBox 显示文件上传页面。但是，自从我在母版页 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 行

如果我从母版页中删除 Javascript 函数，则 colorBox jQuery 可以正常工作。

谁能告诉我哪里出了问题以及如何纠正？任何帮助将不胜感激。

谢谢

原文

I am using a Masterpage for my upload_photo.aspx which displays the file upload page using colorBox. However, ever since i added (code below) in the Masterpage colorBox doesn't display:

<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>

Below is the mastpage code:

<%@ 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">
            © Copyright Family Photo Online System</div>
    </div>
    </div>
    </form>

<script type="text/javascript">

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

</script>

</body>
</html>

Below is the upload_photo.aspx code for the javascript:

<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 throws the following error:

$("a[rel='example1']").colorbox is not a function
http://localhost:3478/upload_photo.aspx
Line 19

If I remove the Javascript function from the Masterpage the colorBox jQuery works fine.

Can anyone advice me where I am going wrong and how i can correct it? Any help would be appreciated.

Thanks

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

风渺 2024-10-26 07:23:34

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

It might be because you're including jquery both in the master page and in the photo page. This will cause jQuery to load, initialize, run the script in your master page, then throw it all out and reload, reinitialize everything when it hits the script tag for jQuery in the upload_photo.aspx. You only want each javascript library to load once, otherwise all sorts of confusion sets in.

回复 原文
~没有更多了~

关于作者

你另情深

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文