DatePicker Does Nothing When Clicked

Question

I'm trying the simplest example of getting datepicker to work, and I just can't seem to get it. There is almost nothing in my fiddle.

The top of my web page has this:

<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript" />
<script>
    $(function(){
        $("#datepicker").datepicker();
    });
</script>

Note: I tried putting the first two script lines in _Layout.cshtml, but I got an error (don't recall the error at the moment). That's why I just put it all on the one page.

And down a bit, in that same page, is this:

<td><input type="text" id="datepicker"></td>

When I click on the input control, nothings happens. However, when I click on the control in the fiddle, it works. What am I missing?

Also, you'll notice I'm using jquery 1.6.2 and jquery-ui 1.8.11. That's different than the fiddle example because fiddle didn't provide those versions as options. I'd be surprised if the version was the difference.

What does your JavaScript console say? (CTRL-SHIFT-J in Chrome) — Lior, Aug 28 '12 at 20:02
@j08691 The script stuff is the very first thing in the code file. Then there are some code snippets like this: `@model AutoTrackerCommon.Entities.TrackerJob`. Finally, there is HTML, and the control is within that HTML. — Bob Horn, Aug 28 '12 at 20:06
@Lior Hitting CTRL-SHIFT-J in Chrome shows this: `Uncaught SyntaxError: Unexpected token ILLEGAL` — Bob Horn, Aug 28 '12 at 20:30
If anyone is still following along... I copied the datepicker script from the jquery example page and now the Chrome JavaScript console shows: `Uncaught TypeError: Object [object Object] has no method 'datepicker'`. Not sure why... — Bob Horn, Aug 28 '12 at 20:49

score 4 · Answer 1 · answered Aug 28 '12 at 20:02

4

Script tag must have both opening and closing items. You cannot shorthand close them.

Instead of this

<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />

do this

<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript"></script>

answered Aug 28 '12 at 20:02

Mark Sherretta

10,160
4
37
42

I tried that, but I still get nothing happening when I click the control. – Bob Horn Aug 28 '12 at 20:05
@BobHorn - perhaps the issue is with the path to your scripts. What is the src of the script when you view it in the browser. Take that and make sure when you request that URL, you get the script – Mark Sherretta Aug 28 '12 at 20:06
When I view it in the browser: ``. I may have things jacked-up. There are some scripts (presumably from _Layout.cshtml), then HTML, then scripts again. Now that I fixed closing the script tag, let me try it back in _Layout.cshtml... – Bob Horn Aug 28 '12 at 20:10
1

May I suggest fetching jquery from Google's CDN instead? It's good practice, and saves bandwidth. You can pick whatever version you like. https://developers.google.com/speed/libraries/devguide `` – Lior Aug 28 '12 at 20:10
@Lior I can try that. Thank you. – Bob Horn Aug 28 '12 at 20:11

score 0 · Accepted Answer · edited May 23 '17 at 12:27

I'm hoping this won't be the final answer, but I finally got the datepicker to display. After much trial and error, and research, I seem to have a jquery conflict, but I don't know why. Someone suggested something called non-conflict mode. So I changed my datepicker code to this:

<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
            $("#endTime").datepicker();            
        });
    })(jQuery);
</script>

And it worked. I'm not sure why, but it's finally at least working. If anyone can provide more insight, or a better answer, I'd gladly pick it.

The above example is explained in this answer: Basically, what I did was define a function that takes a parameter (the $) and then execute that function with jQuery as the parameter.

What I still don't understand though, is why this code won't work:

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#endTime").datepicker();
    });
</script>

If there was a conflict because of the $, and I replaced $ with jQuery, shouldn't it work?

score -1 · Answer 3 · answered Aug 28 '12 at 20:12

The datepicker is pretty much straight forward why dont you use something like firebug in mozilla to see if it is throwing some error also date picker internally uses the Jquery theme roller so please download and add the jquery "css/custom-Theme/jquery-custom.css" css.

DatePicker Does Nothing When Clicked

3 Answers3