JQuery BlockUI - 咆哮通知未触发。只是刷新页面

Question

我似乎无法触发我的 JQuery Growl 通知。 我已经包含了我网站的几乎整个母版页以供参考。

我尝试过的。 这从内容页面开始但没有用，因此我将其移至母版页以尝试消除与内容页面本身无关的问题。

我的母版页中有一个 jquery.blockUI.js CDN 的引用，我认为它是有效的。

我尝试直接在我的母版页的页脚中添加一个按钮，并使用默认的 blockUI 示例来发出咆哮通知。

我好像搞不定。基本上在按钮单击时，它似乎只是在刷新屏幕，仅此而已。任何帮助都会很重要。

下面是我的代码：

<!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="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    <!-- <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> -->
    <link href='http://fonts.googleapis.com/css?family=Tangerine|Lobster+Two|Rochester|Dancing+Script|Damion'
    rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="../style/style.css" media="all" />
    <script src="../script/modernizr.custom.51561.js" type="text/javascript"></script>
    <script src="http://code.google.com/p/yes/source/browse/trunk/jquery/blockui/1.2.3/jquery.blockUI.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div id="container">
        <div id="header">
            <div id="logincontrol" style="text-align: right">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="login/login.aspx" id="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold">
                            <asp:LoginName ID="HeadLoginName" runat="server" />
                        </span>! [
                        <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
                            LogoutPageUrl="~/" />
                        ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
        </div>
        <div id="nav">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" Orientation="Horizontal"
                DataSourceID="WebSitemap" ItemWrap="false" />
            <asp:SiteMapDataSource ID="WebSitemap" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
            </ContentTemplate>
        </asp:UpdatePanel>
        <div id="footer">
             <button id="LoginButton1">GROWLL</button>
        </div>
    </div>
    </form>
<script>
 $(document).ready(function () {
     $('#LoginButton1').click(function () {
         $.growlUI('Growl Notification', 'Have a nice day!');
     });
 }); 
</script>
</body>
</html>

Answer 1

您为 js 添加的引用实际上是检索 html 而不是 js

我还必须添加一个 onlcick 以防止页面发布

请看这里的小提琴http://jsfiddle.net/ySz8x/

以防万一这里是代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    <!-- <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> -->
    <link href='http://fonts.googleapis.com/css?family=Tangerine|Lobster+Two|Rochester|Dancing+Script|Damion'
    rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="../style/style.css" media="all" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://yes.googlecode.com/svn/trunk/jquery/blockui/1.2.3/jquery.blockUI.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div id="container">
        <div id="header">
            <div id="logincontrol" style="text-align: right">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="login/login.aspx" id="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold">
                            <asp:LoginName ID="HeadLoginName" runat="server" />
                        </span>! [
                        <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
                            LogoutPageUrl="~/" />
                        ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
        </div>
        <div id="nav">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" Orientation="Horizontal"
                DataSourceID="WebSitemap" ItemWrap="false" />
            <asp:SiteMapDataSource ID="WebSitemap" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
            </ContentTemplate>
        </asp:UpdatePanel>
        <div id="footer">
             <button id="LoginButton1" onclick="return false">GROWLL</button>
        </div>
    </div>
    </form>
<script>
    //$(document).ready(function () {
     $('#LoginButton1').click(function () {
         $.growlUI('Growl Notification', 'Have a nice day!');
     });
    //}); 
</script>
</body>
</html>

顺便说一句...这不是我过去使用的 jGrowl :)