Search code examples
asp.netjgrowljquery-blockui

JQuery BlockUI - Growl Notification not firing. Just Refreshes page

I can't seem to get my JQuery Growl notification to fire. I have included pretty much the entire masterpage of my site for reference.

What I've Tried. This started out in a content page but didnt work so i moved it to the master page to try and eliminate the issue as not having anyting to do with the content pages themselves.

I have a reference made in my masterpage to a jquery.blockUI.js CDN which i beleive is valid.

I tried throwing a button directly in my masterpage's footer and using the default blockUI example for a growl notification.

I can't seem to get it going. Basically on button click it just seems to do a screen refresh and thats it. Any help would be stellar.

Below is my code:

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

  • The reference you were adding for the js was actually retrieving html instead of js

    I also had to add an onlcick to prevent the page to post

    see here the fiddle http://jsfiddle.net/ySz8x/

    and just in case here is the code

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

    btw... this is not the jGrowl I've used in the past :)