Including Javascript with a custom control in an ASP.Net website

Question

I have a custom date control which is essentially a text box and the ajaxToolKit calendarExtender. I want to include Javascript in the control and have it work properly no matter what page the control is on. The control is called DateControl.ascx

So I have two Javascript functions, dateEditor_OnShown and dateEditor_OnHiding. They get tied up in the page load of DateControl.ascx via...

CalendarExtender.OnClientShown = "dateEditor_OnShown";
CalendarExtender.OnClientHiding = "dateEditor_OnHiding";

The DateControl tool is used on two separate pages. If I put the straight Javascript directly into the DateControl's HTML it will work only on the default page but crashes when I load up the next page with the control. The error is a js runtime error 'dateEditor_OnHiding' is undefined.

If I try to link to the Javascript file from my DateControl's html via...

<script type="text/javascript" src="../JavaScript/IE6CalendarExtenderFix.js"></script>

... instead of having the Javascript directly in the page, it crashes immediately with the same error. I should note that the path to the js is correct.

The only way I can really get it to work is if I link to the javascript on every page that the control is used.

UPDATE: I feel the need to clarify a little bit. The solutions suggested are much appreciated, but either I am not understanding or they just will not work in my case for whatever reason (quite possibly the former).

So, this is basically what my control looks like...

<div id="CustomDateControl" style="<%# ControlStyle %>">
    <div id="TextBox" style="display:inline; white-space:nowrap;"> 
        <asp:TextBox runat="server" ID="txtCalender" Style="<%# TextBoxStyle %>" />
    </div>

    <div id="Calendar" runat="server">
        <ajaxToolkit:CalendarExtender
            runat="server"  
            ID="CalendarExtender" 
            Format="MM/dd/yyyy" 
            TargetControlID="txtCalender" 
            PopupButtonID="CalenderImage" /> 
    </div>
</div>

In the aspx page, with that exact code, if I put the exact javascript in script tags so the page looks about like so...

<script type="text/javascript">
    function dateEditor_OnShown(dateControl, emptyEventArgs) {
        ...
    }

    function dateEditor_OnHiding(dateControl, emptyEventArgs) {
        ...
    }
</script>

<div id="CustomDateControl" style="<%# ControlStyle %>">
    <div id="TextBox" style="display:inline; white-space:nowrap;"> 
        <asp:TextBox runat="server" ID="txtCalender" Style="<%# TextBoxStyle %>" />
    </div>

    <div id="Calendar" runat="server">
        <ajaxToolkit:CalendarExtender
            runat="server"  
            ID="CalendarExtender" 
            Format="MM/dd/yyyy" 
            TargetControlID="txtCalender" 
            PopupButtonID="CalenderImage" /> 
    </div>
</div>

This still crashes when accessing the control in the second page (not the first which is the default page) saying 'dateEditor_OnHiding' is undefined. Now, if I link to a js file with the same code using a relative path as suggested below I still get the same results.

Also, if as suggested below, I override OnPreRender and run RegisterClientScriptInclude, I once again get the same results. The control always works on the default page but never on the second page even though as far as I can tell the script is included in the control.

Any ideas?

Answer 1

append following code in your User Control.

protected override void OnPreRender(EventArgs e)
{
    Page.ClientScript.RegisterClientScriptInclude("DateControl", this.ResolveClientUrl("~/JavaScript/IE6CalendarExtenderFix.js"));

    base.OnPreRender(e);
}

Answer 2

Problem with control-relative file paths

You are probably having problems with relative paths to your JS file. You are specifying relative path to your custom control. You should probably write user control. Anyway. Your JS file is relative path to your custom control, but not relative to the containing page, so your JS file actually never loads. That's why your event handlers are undefined.

The easiest way would be to use absolute paths. Since you're working with user controls you can easily prepend application root folder.