Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

clinton garalde
clinton garalde
2,369 Points
Posted by clinton garalde
clinton garalde
2,369 Points

Adding a Jquery datepicker from external file

Hi,

I would greatly appreciate it if anyone can help me with a simple problem that I am having.

I have downloaded the Jquery-UI files so I can use the various UI elements that it has. I started with the datepicker and I cannot seem to integrate it in a textbox in my page. So here goes:

<html xmlns="http://www.w3.org/1999/xhtml" class="reports-body">
<head runat="server">
    <title>Reports</title>
    <link href="../css/Style.css" rel="stylesheet" />
    <link rel="stylesheet" href="jquery-ui.min.css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div id="params-container" class="container">
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="input-fields" AutoPostBack="true"></asp:DropDownList>
        <asp:PlaceHolder ID="ph1" runat="server"></asp:PlaceHolder>
        <asp:TextBox ID="fromDate2" runat="server"></asp:TextBox>
        <asp:Button ID="btnShow" runat="server" OnClick="Button1_Click" Text="Generate"  class="input-fields"/>
    </div>
    <div id="arrow-container" class="container">
      <a href="javascript:void(0)" onclick="arrowMenu()"><img src="img/LeftMenu.jpg" alt="Contract" class="arrowImg arrow"/></a>
    </div>            
    <div id="rpt-container" class="container">        
        <rsweb:ReportViewer ID="rptVwr" runat="server" CssClass="rpt-viewer" Height="100%" Width="100%" ></rsweb:ReportViewer>
    </div>
    </form>
    <script src="../scripts/myScripts.js"></script>
    <script src="../jqueryui/external/jquery/jquery.js"></script>
    <script src="../jqueryui/jquery-ui.min.js"></script>
    <script src="../jqueryui/jquery-ui.js"></script>
    <%--<script>$("#fromDate2").datepicker();</script>--%>
</body>
</html>

As you can see I have a "TEST" textbox with the ID of fromDate2 and just before the closing </body> tag I added my script tag.

$('#fromDate2').datepicker({});

I added the datepicker code in my myScipts.js file but it does not appear in the textbox.

I have also tried adding the following to my js file but again it did not work.

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

$(function () {
    $("#fromDate2").datepicker();
});

Finally, if I add the datepicker jquery code in an inline script tag just before the </body> tag then it works, but this is not an option for me as I will be using the datepicker on textboxes created at runtime. At least if the datepicker code is in the external file, it will not throw an error at runtime.

Thanks in advance.

1 Answer

clinton garalde
clinton garalde
2,369 Points
clinton garalde
clinton garalde
2,369 Points

Hahaha! What a silly mistake. I just found out the reason for my problem. :)

The <script src> tag has to be between the <head> tags.

Why does the jquery external file have to be linked from the <head> tags and not at the end of the <body> tags like a javascript external file?