22

My javascript paths work on this page: http://localhost:53049/

But not on this page: http://localhost:53049/Home/Messages

The reason is that the relative paths are different, the former requires ("js/...") and the latter requires ("../../js/...").

I'm including my javascript in my Site.Master file:

<script type="text/javascript" src="js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="~/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/jquery-1.2.6.js") %>"></script>

How do I get around this relative path madness, i.e. what is the best practice way in ASP.NET MVC to set CSS/Javascript paths in the Site.Master so that they work for each view no matter how deep that view's URL happens to be.

ADDENDUM:

It seems that for the Index view, any path will work, strangely:

<script type="text/javascript" src="/Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../../Scripts/jquery-1.2.6.js"></script>

But for any other pages (pages with a deeper URL), none of these work.

What's going on here? How can we set the Javascript path once in Site.Master and they work for all pages?

ADDENUM II:

It turned out to only be a problem with the jqgrid javascript file (not the jquery file), apparently inside that file it is referencing other javascript files and gets confused:

<script type="text/javascript" src="<%= Url.Content ("~/js/jquery.jqGrid.js") %>"></script>
Edward Tanguay
  • 189,012
  • 314
  • 712
  • 1,047

5 Answers5

15

You can also use the Url.Content method call to make sure that the paths are correctly set.

Examples can be found here.

Community
  • 1
  • 1
Kieron
  • 26,748
  • 16
  • 78
  • 122
13

Regarding paths used in CSS documents:

/Content/site.css

Body {background-image:url('background.jpg');}

Relative paths in CSS documents are related to the CSS document, not the document being displayed.

This information saved me some headaches.

Tomas
  • 57,621
  • 49
  • 238
  • 373
Ropstah
  • 17,538
  • 24
  • 120
  • 194
3

Try setting the javascript to use a forward slash at the beginning, like "/js/jquery.jqGrid.js" This will set them to use the root domain instead of relative pathing.

jacobangel
  • 6,896
  • 2
  • 34
  • 35
  • 4
    Of course this will only work if the files truly live in a location off the root of the site. For instance, developing in a virtual directory but deploying in the root would cause this method to fail during development. – Sean Carpenter Jan 12 '09 at 16:23
1

You need to add runat="server" and to specify the absolute path like this:

<script type="text/javascript" runat="server" src="~/js/jquery.jqGrid.js"></script>]

Samir Ahmed
  • 11
  • 1
1

The solution for jqGrid: open the file jquery.jqGrid.js and locate the line:

var pathtojsfiles = "js/"; // need to be ajusted

As the comment says, you need to edit that path, e.g. for a typical ASP.NET MVC app,

var pathtojsfiles = "/Scripts/js/"; // need to be ajusted
Daniel Earwicker
  • 114,894
  • 38
  • 205
  • 284
  • when running locally in a virtual directory/application, the URL will be /MyApp/Scripts/js/. any suggestions on what to do then? I'd hate to turn the js file into a view just so I can use URL.Content, and I'm not too crazy about relying on changes to lmhosts etc. any alternatives? – Yonatan Karni Jun 21 '11 at 07:18
  • Short answer: I switched to using slickgrid, which doesn't have this problem. – Daniel Earwicker Jun 21 '11 at 17:39