Where do I put this javascript code?

Question

I'm using jQuery UI for the first time, and I'm going to create a datetimepicker control for a DOB field.

Here is how the view looks:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<StronglyTypedHelpers.Models.Person>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <script type="text/javascript">
        $('#date').datepicker();
    </script>    
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Index</h2>

    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>

        <fieldset>
            <legend>Fields</legend>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Name) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Name) %>
                <%: Html.ValidationMessageFor(model => model.Name) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Age) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Age) %>
                <%: Html.ValidationMessageFor(model => model.Age) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.DOB) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.DOB, String.Format("{0:g}", Model.DOB)) %>
                <%: Html.ValidationMessageFor(model => model.DOB) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Married) %>
            </div>
            <div class="editor-field">
                <%: Html.CheckBoxFor(model => model.Married) %>
                <%: Html.ValidationMessageFor(model => model.Married) %>
            </div>

            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Now the UI documentation says to use this code:

$('#date').datepicker();

Where do I put that?

Here is the link to what I'm reading:

http://jqueryui.com/docs/Getting_Started

Answer 1

This should work... just put this anywhere you have HTML

<script type="text/javascript">
$({
// put jquery code in here
});
</script>

yeah, the problem is that you don't have a jquery declaration... thats why you do $({ })

you can also do this which is the more universal way:

<script type="text/javascript">
$(document).ready(
    function(){
        // jquery in here
});
</script>

this you should be able to put anywhere, but its probably best in the head bit of your html.

Answer 2

You can put it at the end of the document, like this:

.
.
.
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#date').datepicker();
});
</script>
</body>
</html>

Or, if you have the jquery.js and jquery-ui.js called in the head of the page, just add

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

just before the </body> tag

Answer 3

you cant put javascript in your title. you must put it in your content

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
    $(document).ready(function () {
       $('#date').datepicker();
    });
</script>

    <h2>Index</h2>
  ...

the document.ready is like the old javascript windows.onload, only, the document.ready fires more early, and doesnt wait for images to be loaded :)