<%@ Page Title="" Language="C#" MasterPageFile="~/Layouts/Layout.Master" AutoEventWireup="true" CodeBehind="Provider.aspx.cs" Inherits="Test.Testing.Provider" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="~/Style/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
    <script src="~/Javascript/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="~/Javascript/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>

    <!-- temp silly thing for one draggable -->
    <style>
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManagerProxy ID="Manager" runat="server">
        <Services>
            <asp:ServiceReference Path="~/ProviderService.asmx" />
        </Services>
    </asp:ScriptManagerProxy>

    <input type="text" id="date" />
    <div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
    </div>

    <script type="text/javascript">
    // these do not work.. why?
        $(function () {
            $("#date").datepicker();
            $("#draggable").draggable();
        });

        // does not work.. why?
        $(document).ready(function() {
            $("#date").datepicker();
            $("#draggable").draggable();
        });

        // works --- huh?
        $("#date").datepicker();
        $("#draggable").draggable();
     </script>
</asp:Content>