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

Question

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:
Layout.cshtml:

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

Create.cshtml

 <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:

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.

---

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!

Answer 1

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>

Answer 2

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!