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://learn.jquery.com/jquery-ui/getting-started/

Answer 1

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 🙂