HTML

Question

127

How do you include JavaScript in MasterPage?

rated 0 times [ 131] [ 4] / answers: 1 / hits: 47972 / 11 Years ago, tue, december 17, 2013, 12:00:00

I am building an ASP.NET Webform application with C# in VS 2012, .NET framework 4.5

I have a MasterPage in root of application, JavaScript files are in folder named js.

Here is the problem: If page are in root folder then everything is working fine (css+js), if I put any pages in subfolder then css is worked but those JavaScripts are not working at all, obviously the reference path is wrong.

So the Css reference path is fine, but for the script no matter what I used they all are not worked (js/script.js or ~/js/script.js or /js/script.js or ../ ResolveUrl, ResolClientveUrl ... or all of method in this http://yobriefca.se/blog/2010/10/19/%3C-head-%3Eache-including-javascript-in-asp-dot-net-master-pages/ ) they all refer to root/SUB-FOLDER/js/script.js instead of root/js/script.js

in root: a single MasterPage, Default.aspx, test.aspx, js folder, css folder and Pages folder. Default and test pages are working file, but all pages in Pages folder is not display .js SO OBLIVIOUSLY the path is wrong whenever pages is not in root

In my master page:

<head runat=server>

<title></title>



<link rel=stylesheet href=~/css/style.css />



<%-- tried these and lot more but NOT workkkkkkkkkkk --%>



<%--<script src=~/js/jquery-1.7.1.min.js ></script>

<script src=~/js/script.js ></script>--%>



<%--<script src='<%=ResolveUrl(~/js/jquery-1.7.1.min.js) %>' ></script>

<script src='<%=ResolveUrl(~/js/script.js) %>' type=text/javascript></script>--%>



<%--<script src='<%=ResolveClientUrl(~/js/jquery-1.7.1.min.js) %>' type=text/javascript></script>

<script src='<%=ResolveClientUrl(~/js/script.js) %>' type=text/javascript></script>--%>



<asp:ContentPlaceHolder ID=Head runat=server>

</asp:ContentPlaceHolder>

the script.js is somthing like:

....

    $.include('js/superfish.js')

$.include('js/FF-cash.js')

$.include('js/tms-0.4.x.js')

$.include('js/uCarausel.js')

$.include('js/jquery.easing.1.3.js')

$.include('js/jquery.tools.min.js')

$.include('js/jquery.jqtransform.js')

$.include('js/jquery.quicksand.js')

$.include('js/jquery.snippet.min.js')

$.include('js/jquery-ui-1.8.17.custom.min.js')

$.include('js/jquery.cycle.all.min.js')

$.include('js/jquery.cookie.js')

$(function(){

    if($('.tweet').length)$.include('js/jquery.tweet.js');

    if($('.lightbox-image').length)$.include('js/jquery.prettyPhoto.js');

    if($('#contact-form').length||$('#contact-form2').length)$.include('js/forms.js');

    if($('.kwicks').length)$.include('js/kwicks-1.5.1.pack.js');

    if($('#counter').length)$.include('js/jquery.countdown.js');

    if($('.fixedtip').length||$('.clicktip').length||$('.normaltip').length)$.include('js/jquery.atooltip.pack.js')

// Slider

    $('.main-slider')._TMS({

.....

ERROR in developer tool (Console) of web browser:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/tms-0.4.x.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/uCarausel.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.jqtransform.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.quicksand.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.snippet.min.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/FF-cash.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/superfish.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.tools.min.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery-ui-1.8.17.custom.min.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cycle.all.min.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.easing.1.3.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cookie.js

Uncaught TypeError: Object [object Object] has no method '_TMS' script.js:22

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arthur

Add To Favorites

Follow

Total Points: 729

Total Questions: 107

Total Answers: 109

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

arthur questions

1 Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) rollup vue package

Thu, Sep 2, 21, 00:00, 3 Years ago

1 Formik & Yup: How to validate if the provided date is eighteen years old?

Mon, Oct 19, 20, 00:00, 4 Years ago

1 Angular 9 how to use debouncetime for input change event (keyup)

Thu, Apr 30, 20, 00:00, 4 Years ago

1 Swiper and current page index

Wed, Feb 19, 20, 00:00, 4 Years ago

1 Google Maps API Billing not Enabled Error - Billing not open

Fri, Jan 10, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jeremiahianx · Accepted Answer

HTML

You typically don't want any scripts in the <head /> apart from scripts like Modernizr that have feature detection. It's more of a best practice to move all scripts to the bottom of the page like so:

<html>

<head runat=server>

    <title></title>

    <link rel=stylesheet href='<%= ResolveUrl(~/css/style.css) %>' />

    <asp:ContentPlaceHolder ID=Head runat=server />

</head>

<body>



    <!-- Scripts at bottom of page for faster loading. -->



    <script src='<%= ResolveUrl(~/js/jquery-1.7.1.min.js) %>'></script>

    <script src='<%= ResolveUrl(~/js/script.js) %>'></script>



</body>

</html>

SCRIPT.JS

Referencing the other script files in script.js will require the / to be appened to 'js/` like so:

$.include('/js/superfish.js');

$.include('/js/FF-cash.js');

$.include('/js/tms-0.4.x.js');

$.include('/js/uCarausel.js');

$.include('/js/jquery.easing.1.3.js');

$.include('/js/jquery.tools.min.js');

$.include('/js/jquery.jqtransform.js');

$.include('/js/jquery.quicksand.js');

$.include('/js/jquery.snippet.min.js');

$.include('/js/jquery-ui-1.8.17.custom.min.js');

$.include('/js/jquery.cycle.all.min.js');

$.include('/js/jquery.cookie.js');



if($('.tweet').length)

    $.include('/js/jquery.tweet.js');



if($('.lightbox-image').length)

    $.include('/js/jquery.prettyPhoto.js');



if($('#contact-form').length || $('#contact-form2').length)

    $.include('/js/forms.js');



if($('.kwicks').length)

    $.include('/js/kwicks-1.5.1.pack.js');



if($('#counter').length)

    $.include('/js/jquery.countdown.js');



if($('.fixedtip').length || $('.clicktip').length || $('.normaltip').length)

    $.include('/js/jquery.atooltip.pack.js');



// Slider

$('.main-slider')._TMS({

MISC

Don't forget to clear your cache or work in private browsing while testing all of this!