JQuery UI datepicker in Asp.Net MVC

Question

I have tried to use some of the widgets in JQuery UI on an Asp.Net MVC site without luck.

For example the basic datepicker from jQuery UI -

Answer 1

It looks like you are executing the JavaScript inline as the page loads. In which case the #basics selector won't be able to locate the input with id="basics" as it hasn't yet been parsed and rendered in to the document body.

Your solution may be as simple as as moving the script element in your code to a position after the input element.

Better still, subscribe to a document ready or document loaded event and execute the jQuery code in the handler of that event.

$(document).ready(function() {
    $("#basics").datepicker();
});

There's a number of advantages to that. You can be sure that the entire DOM is ready for use, and there is no dependency on the order of the source code meaning you could move the JavaScript to an external file in the future to take advantage of various caching mechanisms on the client-side.