ASP.net MVC and jQueryUI dilemma

Asked 18/10, 2008 at 3:56 Answered 17/3, 2009 at 21:21

Solved jquery asp.net-mvc jquery-ui path jquery-ui-theme

I just moved a project to the the beta release of ASP.net MVC framework and the only problem I am having is with jQuery and jQueryUI.

Here's the deal:

In Site.Master are the following script references:

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

And using those, the accordian UI that I have on one of the views works perfectly, except for one problem: the images from ThemeRoller aren't included on the page. If I comment out the jQuery references, the ThemeRoller images are there. All of the css is in the Content folder and all of the scripts are in the Scripts folder.

I know this is a silly path problem, but it's making me twitch.

What am I missing?

Update

I tried the first answer to no avail, read the comment for details. Thanks again for those who are viewing.

The second approach is not working either. I'm baffled.

Another Update

Using the Url.Content tags for the scripts does indeed allow the scripts to run properly. Using a regular tag for the stylesheet gets all of the styles onto the page EXCEPT for all of those related to ThemeRoller.

The jquery-ui-themeroller.css file is in the Content folder and when I inspect an element, the css is present. I suspect the problem is in the mapping from this css file to the images folder for the themeroller, which is in the Content folder as well. Image links in this file as specified as: background: url(images/foo.gif)

Do the links in this file need to change?

Albany answered 18/10, 2008 at 3:56 Comment(0)

does this help?

http://forums.asp.net/p/1334947/2690469.aspx

The reason for the inconstistency is very simple, though I admit it's not easy to figure out! When you have a <link> tag inside a <head runat="server">, ASP.NET will process the <link> tag and detect URLs and resolve them relative to the application's root. When you have a <script> tag on the page (without runat="server") then ASP.NET will leave it alone since it's just plain old HTML.

Using Url.Content() is the approach I would use to solve this since it'll get resolved relative to the app root, just like the <link> tag.

Uranous answered 18/10, 2008 at 12:54 Comment(2)

It helped me understand the problem better and get closer, but the solution is still just out of my grasp. – Albany 18/10, 2008 at 14:6

Turns out the problem was that the downloaded theme from ThemeRoller doesn't work out of the box. Thanks for the pointer to the explanation. – Albany 23/10, 2008 at 18:13

Unless all your views are at the same level, you'll need to either use

Use an absolute path such as /Scripts/jquery-1.2.6.js
Or even better, Resolve a virtual path such as <%= Url.Content("~/Scripts/jquery-1.2.6.js") %>

Url.Content() http://jvance.com/media/2008/10/18/UrlContent5.media

Shanta answered 18/10, 2008 at 4:16 Comment(1)

I tried the option of using the Url.Content tag, which changed one thing: Now with everything uncommented, the images display but the jQueryUI isn't working. – Albany 18/10, 2008 at 4:40

does this help?

http://forums.asp.net/p/1334947/2690469.aspx

The reason for the inconstistency is very simple, though I admit it's not easy to figure out! When you have a <link> tag inside a <head runat="server">, ASP.NET will process the <link> tag and detect URLs and resolve them relative to the application's root. When you have a <script> tag on the page (without runat="server") then ASP.NET will leave it alone since it's just plain old HTML.

Using Url.Content() is the approach I would use to solve this since it'll get resolved relative to the app root, just like the <link> tag.

Uranous answered 18/10, 2008 at 12:54 Comment(2)

It helped me understand the problem better and get closer, but the solution is still just out of my grasp. – Albany 18/10, 2008 at 14:6

Turns out the problem was that the downloaded theme from ThemeRoller doesn't work out of the box. Thanks for the pointer to the explanation. – Albany 23/10, 2008 at 18:13

You need to change the links in jquery-ui-themeroller.css to point to the current location of the images.

As in, you need to update the path of the images that the css file is looking for.

background: url(images/foo.gif)

Remove the 'images/' from your paths to make it look like:

background: url(foo.gif)

as both your css and images are in the content folder.

Reunion answered 18/10, 2008 at 18:37 Comment(0)

    protected void Page_Load(object sender, EventArgs e)
    {
        Page.ClientScript.RegisterClientScriptInclude(this.GetType(),"JQuery", ResolveUrl("~/js/jquery.min.js"));
        Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "JQueryUI", ResolveUrl("~/js/jquery-ui.custom.min.js"));

Brat answered 17/3, 2009 at 21:21 Comment(0)

Recommended topics

Hot tags