jquery basic slider won't display

Question

I'm banging my head against the desk trying to get even a basic slider working. I think it must have something to do with the style, but I can't get the dang thing to even display.

I have a very basic ASP.NET MVC application and in a view, i have:

<% using (Html.BeginForm()) { %>
<fieldset>
...
    <div id='mySlider'></div>
...
</fieldset>

<script type="text/javascript">
    $(document).ready(function() {
    $('#mySlider').slider()
    });
</script>

and in my Site.Master:

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/theme/ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../../Scripts/ui.slider.js" type="text/javascript"></script>
<script src="../../Scripts/ui.datepicker.js" type="text/javascript"></script>
<script src="../../Scripts/ui.core.js" type="text/javascript"></script>

I have a completely working field that takes its value from a jquery datepicker (and I can select the theme OK), so I must have something right. But whatever I do, it doesn't even display the slider.

What do I need to do? Any help is much appreciated.

Answer 1

Try moving the outside other tags like the fieldset and form just to see if one of your other styles is screwing it up.

You also should make sure that the css file in the HTML source is pointing to the correct file. You might have a path problem.

Answer 2

Are you referencing well your scripts from the views?

If you have MvcContrib you can do this:

<%= Html.ScriptInclude("~/Scripts/util.js")%>
<%= Html.Stylesheet("~/Content/Site.css")%>

Answer 3

Try replacing

<link href="../../Content/theme/ui.all.css" rel="stylesheet" type="text/css" />

with

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />

This is Google's public jQueryUI CDN. If that works, you're probably missing some CSS files.

Answer 4

Thanks for the suggestions. I was referencing the CSS correctly, but the style that you have to pick is pretty specific. I had to copy it from the examples on the jquery site and go from there.