CODEWITHSUNDEEP
jqueryasp.net
SoftwareDeveloper
SoftwareDeveloper

Reputation: 11

.js script file containing jquery not executing from master page

I have 2 div tags in master page. When I move mouseover 1 div tag the other div tag should show. JQuery code is in .js file. When I put .js file in Content page jquery works fine. When I move the .js file to master page jquery code does not work. I need the jQuery to be in Master page because div tags needs to be accessed from all content pages. I am new to jQuery, any help will be appreciated.

Code: jQuery code in .js file

$(function () {
    alert("Hello");
    $("nav").hide();
    $("#divSignAccount").mouseover(function () {
        $("nav").show();
    });
    $("nav").mouseover(function () {
            $("nav").show();
        });
    $("nav").mouseout(function () {
        $("nav").hide();
    });
});

Master Page code:

<html lang="en">
<head runat="server">
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-

1.7.1.min.js"></script>

    <script src="../Script/BookStore.js" type="text/javascript"></script>  
    <asp:ContentPlaceHolder id="head" runat="server">        

    </asp:ContentPlaceHolder>

</head>
<body>    
    <form id="form1" runat="server">                      
        <!-- Header -->
        <header>
            <!-- Sign In dropdown -->
            <div id="divSignAccount" class="divSignIn">
            <asp:HyperLink ID="hlSignIn" runat="server" CssClass="displayText">Sign In</asp:HyperLink><br />
            <asp:HyperLink ID="hlYourAccount" runat="server" CssClass="text">Your Account</asp:HyperLink><br />
            </div><br>            
        </header>     
        <nav>
            <div id="divDD">
                <div id="divSignNew">
                    <asp:Button ID="btnSignIn" runat="server" Text="Sign in" CssClass="signInBtn" /><br />
                    <asp:Label ID="Label1" runat="server" Text="New Customer?" CssClass="text"></asp:Label>&nbsp;
                    <asp:HyperLink ID="hlNew" runat="server" CssClass="text">Start Here</asp:HyperLink><br />
                </div>
                <div id="divUser">         
                    <asp:HyperLink ID="hlAccount" runat="server" CssClass="text">Your Account</asp:HyperLink><br />
                    <asp:HyperLink ID="hlOrders" runat="server" CssClass="text">Your Orders</asp:HyperLink><br />            
                    <asp:HyperLink ID="hlManageReview" runat="server" CssClass="text">Manage Reviews</asp:HyperLink><br />
                </div>
                <div id="divAdmin" runat="server">
                    <asp:HyperLink ID="hlCategory" runat="server" CssClass="text">Category</asp:HyperLink><br />
                    <asp:HyperLink ID="hlBooks" runat="server" CssClass="text">Books</asp:HyperLink><br />
                    <asp:HyperLink ID="hlUOS" runat="server" CssClass="text">UserOrderStatus</asp:HyperLink><br />
                </div>
            </div>
       </nav> 

...

jQuery code does not fire.

If I place js script tag in content page jQuery code works.

Appreciate any help. Thanks.

Upvotes: 0

Views: 329

Answers (3)

SoftwareDeveloper
SoftwareDeveloper

Reputation: 11

In Master Page head section type:

<script src='<%# ResolveUrl("~/Script/BookStore.js")%>' type="text/javascript"></script>

In Master page Page-Load event handler type this code:

Page.Header.DataBind();

This works.

Upvotes: 1

lalo
lalo

Reputation: 1

Place your script in $(document).ready(function(){.... your script here ...}); So it is ruuned when the dom is ready

Upvotes: 0

Diego Farina
Diego Farina

Reputation: 339

Try with this head in master. The position of my master is in the root. Javascript is in Scripts folder. I try your code and it's work. I try with "Applications Web Form ASP.NET" template visualstudio 2012

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title><%: Page.Title %> - Applicazione ASP.NET</title>
    <asp:PlaceHolder runat="server">        
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" /> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js"></script>
      <script src="Scripts/bookstore.js"></script>

</head>

Upvotes: 0

Related Questions