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

This is probably a javascript error. Can you post your javascript? — John Farrell
– John Farrell, Commented Dec 29, 2010 at 15:55

Chandu · Accepted Answer · 2010-12-29 16:06:31Z

3

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>

edited Dec 29, 2010 at 16:06

answered Dec 29, 2010 at 15:58

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gideon Over a year ago

sweet lord! Guess this is what happens when your 3 days away from shipping a release (a preview release =P). Thanks.. but there is still a problem. Updating answer...

Chandu Over a year ago

Can you post the html/css/js to jsfiddle.net?

gideon Over a year ago

Thanks so much cybernate!! I'm going to stop and watch a movie now!!

TheRightChoyce · Accepted Answer · 2010-12-29 16:21:31Z

1

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

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".
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!

answered Dec 29, 2010 at 16:21

TheRightChoyce

3,0941 gold badge25 silver badges20 bronze badges

1 Comment

gideon Over a year ago

+1 Very interesting. This might come in handy for me sometime later =)

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related