jquery ui css not loading and creating problems with asp.net mvc3 page (unexpected token error)

0 votes
asked Dec 29, 2010 by gideon

First off, I can see that my mvc3 project already had jquery ui in it but no theme css files.

I needed a date picked and as usual needed to override the EditorFor DateTime. I started off today by just using the default jquery ui js files supplied with the project under scripts. The date picker shows up fine, only with a completed messed up UI based on Site.css.

So now I downloaded a build of jquery (with the start theme) and followed this page about how to put it together.

I'm using T4MVC so my page looks like this:

<script src="@Links.Scripts.jquery_1_4_4_js" type="text/javascript"></script>
<link href="@Links.Content.Site_css" rel="stylesheet" type="text/css" />
<script src="@Links.Content.start.jquery_ui_1_8_7_custom_css" type="text/javascript"></script>


 <script src="@Links.Scripts.jquery_validate_min_js" type="text/javascript"></script>
    <script src="@Links.Scripts.jquery_validate_unobtrusive_min_js" type="text/javascript"></script>
    <script src="@Links.Scripts.jquery_ui_1_8_7_custom_min_js" type="text/javascript"></script>

And this is the result:
alt text

Any ideas, I tried a couple combinations of where I put the script and css files tags in different places, but nothing seems to work.

Update: So I was a dumbhead to have a <script> instead of a <link> tag in the layout! But there is still a problem, the date picker shows with the css from Site.css.
alt text

Update 2: With Solution

So I checked chrome and under resources I can't see the jquery css file. I fire fiddler and I don't see any request for the css file.

The I see it!

<link href="@Links.Content.start.jquery_ui_1_8_7_custom_css" **rel="Stylesheet"** type="text/css" />

Yes! Thats right, I didn't add a rel!

2 Answers

0 votes
answered Dec 29, 2010 by chandu

In your Layout.cshtml you are using a script tag to include the css file. Change:

<script src="@Links.Content.start.jquery_ui_1_8_7_custom_css" type="text/javascript"><script> to

<link href="@Links.Content.start.jquery_ui_1_8_7_custom_css" rel="stylesheet"></link>
0 votes
answered Dec 29, 2010 by therightchoyce

You'll need to put a wrapping container around the datepicker. It'll take two steps to do this:

  1. When downloading the jquery ui file, click the "Advanced Theme Settings" and you'll a field for "CSS scope". This allows you to localize the css for the datepicker to a specific class/scope. For this example let's call it "jqueryui_element".

  2. Once you hook up the new css file, you're going to have to wrap it with the css class/scope you defined. The easiest way I've found to do this is the following line of javascript:

    $('#ui-datepicker-div').wrap('<div class="jqueryui_element"></div>');

#ui-datepicker-div is the default id that gets applied to the datepicker elements. If for some reason you changed this it'll have to get updated here as well.

Hope that helps!

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter