Geek Answers Handbook

How to enable JavaScript in MasterPage?

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

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

Here's the problem: If the page is in the root folder , then everything works fine (css + js), if I put any pages in a subfolder , then css works, but these JavaScripts do n't work at all , obviously the link path is wrong.

So, the Css link path is fine, but for the script no matter what I used, they all don't work (js / script.js or ~ / js / script.js or / js / script.js or ../ ResolveUrl, ResolClientveUrl ... or the whole 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

at the root: one MasterPage folder, Default.aspx, test.aspx, js, css folder and Pages folder. By default, test pages are also a working file, but all pages in the Pages folder are not displayed .js SO OBLIVIOUSLY the path is incorrect if the pages are not in the root

On my main 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>

script.js has something 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 the developer tool (Console) of a 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.
+8
javascript jquery c # css
source share
4 answers

HTML

Usually you do not need scripts in <head /> other than scripts like Modernizr that have function detection. It is best to move all scripts to the bottom of the page, for example:

 <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

Linking to other script files in SCRIPT.js will require / be attached to 'js / `as follows:

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

Do not forget to clear the cache or work in a private viewing mode, checking all this!

+16
source share

You can include a .js file either between header tags, contentplaceholder tags, or inside body tags. This will in all cases be reflected on your other pages, which include this main page. All you need to focus on is the path to creating the path.

The code below adds the jquery file to the main page in the main section of the main page.

 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

 <title></title> <script src="jquery-2.1.1.min.js"></script> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> 

 <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> <script> </script>

Relative vs Absolute URL

Using. / And ~ / in front of the URL, you create a relative URL. The relative URL paths are affected when you change the level of the folder of either the file you are linking to or the file that contains the link.

../symbol takes one step from the folder containing the link. make sure you have enough "../" to link to the correct file.

~ / creates a path starting at the root of your project.

To create an absolute URL, simply drag the file that you want to include on the page from the solution browser in Visual Studio to the page.

Read more about the difference between absolute and relative URL checking. Difference between relative and absolute path in javascript

+2
source share

Try replacing ~ / with ../ . One of my projects did the same and fixed it.

Also make sure that even on the server (and not just in the project), the JS folder is directly under the root.

0
source share

You must use the ~ prefix before placing the file. (for example: ~/projects/files/web/admin )

0
source share

More articles:


All Articles