CODEWITHSUNDEEP
jqueryasp.netmaster-pages
fredthered
fredthered

Reputation: 33

ASP.Net Master Page and Child Page both require reference to jQuery library

Perhaps somebody could aid my understanding of the way in which jQuery interacts with ASP.Net?

In my site master page I have included reference to jQuery library along with other references as follows:

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>    <script src="/js/ui/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>    <script  src="/js/jquery.autocomplete.js" type="text/javascript"></script>    <script src="/js/liquidmetal.js" type="text/javascript"></script>    <script src="/js/jquery.flexselect.js" type="text/javascript"></script>

I assumed that by doing so, the jQuery library would now be "global" to all other ASP.Net pages that used the site master as their master page.

In a particular child page I used other jQuery plugins such as:

to implement search functionality for my database application.

In my search page, I included a $document.ready function to implement click and change handlers for various UI elements as one does. However, these were not behaving as intended, so used Firebug to try and understand what was going wrong in the child page only to discover that the following exception was being raised:

ReferenceError: jQuery is not defined [Break On This Error]

$(document).ready(function (){

When I included a reference to the jQuery library before all other references to plug-ins etc., my page then started to behave as expected, with Firebug reporting no issues.

Can somebody please explain to me why you would require a reference to the jQuery library in both my site master and pages that use it?

I am a relative newbie to both jQuery and ASP.Net.

Master page 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">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<title>Untitled Page</title>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<link rel="stylesheet" href="/css/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" />    
<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen, projection" />  
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="/css/jquery.tooltip.css" type="text/css" />
<link rel="stylesheet" href="/css/menubar.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/css/tipsy.css" type="text/css" media="screen, projection" />

Upvotes: 2

Views: 8678

Answers (4)

Eamon
Eamon

Reputation: 246

Vicente is correct, use the tilde prefix to denote the path is relative to the route

but if it still gives errors use the google cdn approach with your local copy as a back up, something like:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
    document.write(unescape("%3Cscript src='~/js/jquery-1.3.2.min.js' type='text/javascript'%3E%3C/script%3E"));
   }
  </script>

Upvotes: 0

Vicente Hern&#225;ndez
Vicente Hern&#225;ndez

Reputation: 86

What should be happening is that the content page in which the jquery not being loaded is a page in a different folder to the other content pages, that is, your problem is the reference to the folder containing your jquery file. To avoid this kind of problem could put the jquery reference to a repository that is on the web and not in your local file system (the server). You should put the reference like this:

<head id="Head1" runat="server">
    <title>Some page</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" language="javascript" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" language="javascript" type="text/javascript"></script>
    <link href="~/Scripts/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet"
        type="text/css" runat="server" />

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Note the runat = "server" Tag that references the jQueryUI stylesheet. This attribute allows asp.net process the tag and put the relative path to your style sheet no matter what level of nesting is your content page.

Upvotes: 2

C&#233;ryl Wiltink
C&#233;ryl Wiltink

Reputation: 1909

This should not happen imo...

The Javascript is all executed clientside, and your masterpages and childpages are assembled serverside (no Javascript is executed or anything) and only when you view the page the server will put all the master/children pieces together and send the completed HTML to the browser, only then will the browser start executing Javascript. So it should definately not be placed in both child AND masterpage...

Judging from the error without any extra information the only thing I can think of is that you maybe placed Jquery not in the head but at the bottom of your masterpage (Thus when reading your HTML from top to bottom, the browser first encounters a call to jQuery (in the childpage code) without the script being loaded, since that is waaaay down at the end.)

When placing the code also in your child page it is then high up enough in you HTML that it is available when the calls to JQuery are made...

Upvotes: 1

writeToBhuwan
writeToBhuwan

Reputation: 3281

Make sure that you have referenced the jquery library before the content place holder in master page. 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

Upvotes: 0

Related Questions