How to include Ajax Control Toolkit in jquery or javascript

Question

I have a project where I need to create the CalendarExtender from AJAX Control Toolkit in javascript or jquery and associate it to a TextBox - but I get the error in the try-catch section which is "AjaxControlToolkit is not defined".

I have tried to make the following:

        $.each(customers, function () {
            var customer = $(this);
            row.find("td:nth-child(3)").find("input")[0].value = customer.find("FK_ID").text();
            try {
                $create(AjaxControlToolkit.CalendarBehavior, { "id": "txtInddato_CalendarExtender" }, null, null, $get(row.find("td:nth-child(3)").find("input")[0].id.toString()));
            }
            catch (err) {
                row.find("td:nth-child(13)").find("input")[0].value = err.message;
            }
        });

I am using c#, and have the abovementioned code in a script tag.

So my question is: How can I avoid this error? Is it about a missing .js file?

Any help is appreciated ...

Answer 1

Gee, why do people attempt to inject markup and code into a asp.net web page?

It just does not work that way!

first up, there is a built in calendar control - out of the box.

just drop in a text box, say like this:

        <asp:TextBox ID="TextBox1" runat="server" Width="189px"
            Textmode="Date">
        </asp:TextBox>

So, set text mode = "date" (or even date and time).

You get this:

And clicking on the date icon (which by the way also is done automatic for you), then you get this:

so, you don't need to go find a jQuery.UI date picker, or even adopt the ajaxtoolkit extender for this. It really not required.

But, also keep in mind how asp.net works. You drop in asp.net controls, and EVEN say add an extender to that text box. lets remove the Textmode, and use the extender.

So, now we have this:

        <asp:TextBox ID="TextBox1" runat="server" Width="189px" >
        </asp:TextBox>

        <ajaxToolkit:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" 
            BehaviorID="TextBox1_CalendarExtender" 
            TargetControlID="TextBox1">
        </ajaxToolkit:CalendarExtender>

And now we get a picker when clicking in the text box, say like this:

I think the built in date picker (by using text-mode) is FAR better.

but, what about attempting to inject, or setup the ajaxtoolkit date picker for a existing control?

REALLY?????

The ajaxtoolkit is comprised of what, a BOATLOAD of JavaScript and server side code modules.

The JavaScript source code for the date picker is a whopping 1790 lines of of JavaScript code, AND THEN ALSO a boatload of server side c# code stubs.

lets flip the browser for above, f12 - browser developer tools (just hit f12 - chrome, or edge - or FireFox), and take a look at the supposed simple markup that the "magic" of the asp.net pre-processors generate, shall we? we get this:

So, you have to wire up the JavaScript JUST perfect. And I don't think this is a good idea. Attempting to get this to work?

I think you would be VAST better to adopt jQuery, and then adopt jQuery.UI, as at least it would allow you to wire up a text box by using classic jquery $('#MyTextBox') selectors.

but, attempting to shoe horn in what the VERY complex asp.net page pre-processors, and along with additional pre-page processing that the ajaxtool kit adds to the page?

Gee, I just don't think going down that road makes a whole lot of sense - it just don't.

Either those controls are correctly dropped on the page, and correctly setup with the extender markup, then that's it - you are done. Attempting to on the fly add or setup controls after the fact to "become" now date pickers is a losing battle - it just is.

Regardless, you could thus use the browser developer tools, look at the resulting markup, and "maybe" get this to work, but a boatload of additional things are occurring in addition to the markup that you get by selecting the "add extender" and then selecting date pop up. As noted, that markup THEN goes though quite a boatload of pre-processing and munching and crunching by the asp.net system before the final markup generated is sent client side.

And text mode is easy to set - even from code behind, this does work:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then

        TextBox1.TextMode = TextBoxMode.Date

    End If

End Sub

Or, in c#, then:

if (!IsPostBack)
{
TextBox1.TextMode = TextBoxMode.Date;
}

so, you can use code to set text box, and "turn on" the date picker for such text boxes, but I would REALLY work hard, and try to just set these things up in the original page markup, and not attempt to do this "after the fact", since it tends to be a challenge, and much worse of a challenge if you going to try and wire up the AjaxToolkit extenders after the fact - they are quite complex in how they work, and best to let the markup in the page be pre-processed by asp.net, and then let it spit out the complex dance of JavaScript, and code behind that gets auto "magic" wired up for you.