Today, we released a new version of the Ajax Control Toolkit that contains several important bug fixes and new features. The new release contains a new Tabs control that has been entirely rewritten in jQuery.
You can download the December 2013 release of the Ajax Control Toolkit at http://Ajax.CodePlex.com. Alternatively, you can install the latest version directly from NuGet:
The Ajax Control Toolkit and jQuery
The Ajax Control Toolkit now contains two controls written with jQuery: the ToggleButton control and the Tabs control. The goal is to rewrite the Ajax Control Toolkit to use jQuery instead of the Microsoft Ajax Library gradually over time.
The motivation for rewriting the controls in the Ajax Control Toolkit to use jQuery is to modernize the toolkit. We want to continue to accept new controls written for the Ajax Control Toolkit contributed by the community. The community wants to use jQuery. We want to make it easy for the community to submit bug fixes. The community understands jQuery.
Using the Ajax Control Toolkit with a Website that Already uses jQuery
But what if you are already using jQuery in your website? Will adding the Ajax Control Toolkit to your website break your existing website? No, and here is why.
The Ajax Control Toolkit uses jQuery.noConflict() to avoid conflicting with an existing version of jQuery in a page. The version of jQuery that the Ajax Control Toolkit uses is represented by a variable named actJQuery. You can use actJQuery side-by-side with an existing version of jQuery in a page without conflict.
Imagine, for example, that you add jQuery to an ASP.NET page using a <script> tag like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestACTDec2013.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<ajaxToolkit:ToolkitScriptManager runat="server" />
<ajaxToolkit:TabContainer runat="server">
<ajaxToolkit:TabPanel runat="server">
<HeaderTemplate>
Tab 1
</HeaderTemplate>
<ContentTemplate>
<h1>First Tab</h1>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server">
<HeaderTemplate>
Tab 2
</HeaderTemplate>
<ContentTemplate>
<h1>Second Tab</h1>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
The page above uses the Ajax Control Toolkit Tabs control (TabContainer and TabPanel controls). The Tabs control uses the version of jQuery that is currently bundled with the Ajax Control Toolkit (jQuery version 1.9.1).
The page above also includes a <script> tag that references jQuery version 2.0.3. You might need that particular version of jQuery, for example, to use a particular jQuery plugin.
The two versions of jQuery in the page do not create a conflict. This fact can be demonstrated by entering the following two commands in the JavaScript console window:
actJQuery.fn.jquery $.fn.jquery
Typing actJQuery.fn.jquery will display the version of jQuery used by the Ajax Control Toolkit and typing $.fn.jquery (or jQuery.fn.jquery) will show the version of jQuery used by other jQuery plugins in the page.
Preventing jQuery from Loading Twice
So by default, the Ajax Control Toolkit will not conflict with any existing version of jQuery used in your application. However, this does mean that if you are already using jQuery in your application then jQuery will be loaded twice. For performance reasons, you might want to avoid loading the jQuery library twice.
By taking advantage of the <remove> element in the AjaxControlToolkit.config file, you can prevent the Ajax Control Toolkit from loading its version of jQuery.
<ajaxControlToolkit>
<scripts>
<remove name="jQuery.jQuery.js" />
</scripts>
<controlBundles>
<controlBundle>
<control name="TabContainer" />
<control name="TabPanel" />
</controlBundle>
</controlBundles>
</ajaxControlToolkit>
Be careful here: the name of the script being removed – jQuery.jQuery.js – is case-sensitive.
If you remove jQuery then it is your responsibility to add the exact same version of jQuery back into your application. You can add jQuery back using a <script> tag like this:
<script src="Scripts/jquery-1.9.1.min.js"></script>
Make sure that you add the <script> tag before the server-side <form> tag or the Ajax Control Toolkit won’t detect the presence of jQuery.
Alternatively, you can use the ToolkitScriptManager like this:
<ajaxToolkit:ToolkitScriptManager runat="server">
<Scripts>
<asp:ScriptReference Name="jQuery.jQuery.js" />
</Scripts>
</ajaxToolkit:ToolkitScriptManager>
The Ajax Control Toolkit is tested against the particular version of jQuery that is bundled with the Ajax Control Toolkit. Currently, the Ajax Control Toolkit uses jQuery version 1.9.1. If you attempt to use a different version of jQuery with the Ajax Control Toolkit then you will get the exception jQuery 1.9.1 is required in your JavaScript console window:
If you need to use a different version of jQuery in the same page as the Ajax Control Toolkit then you should not use the <remove> element. Instead, allow the Ajax Control Toolkit to load its version of jQuery side-by-side with the other version of jQuery.
Lots of Bug Fixes
As usual, we implemented several important bug fixes with this release. The bug fixes concerned the following three controls:
-
Tabs control – In the course of rewriting the Tabs control to use jQuery, we fixed several bugs related to the Tabs control.
-
AjaxFileUpload control – We resolved an issue concerning the AjaxFileUpload and the TMP directory.
-
HTMLEditor control – We updated the HTMLEditor control to use the new Ajax Control Toolkit bundling and minification framework.
Summary
I would like to thank the Superexpert team for their hard work on this release. Many long hours of coding and testing went into making this release possible.
Excellent
Great! great job and great professionalism!
Thanks for updating the HTMLEditor control.
I love ajaxcontroltoolkit.
I rely on your posts to keep me up to date on toolkit updates but maybe you can help me with this. Right after this update was released I had an issue where the toolkit couldn’t be found in my project when debugging. It failed to load it. Could my project realized there was a new release and tried to update it and removed the old toolkit on it’s own? I didn’t think this was possible. It still showed it was installed and the references were still in place even though it couldn’t load it when debugging. I installed the new version and it ran without issues after the new install. Odd!
@JCosta — that sounds odd. It was installed with NuGet? NuGet should not do anything automatically. Let me know if you continue to experience problems with the debug version and we can investigate.
Yea it was installed with NuGet. I have never seen it before. When debugging it came up with the active js script file and said invalid character and was filled with random characters like hearts and squares. When I clicked continue it brought me to the active page and said “cannot load toolkit assembly”. I re installed the toolkit via nuget from the online templates and picked the new version. It installed, I clicked F5 and the project ran without an issue. It might just be coincidence it happened right after the new package was released but I have been building that site for three weeks with no issues. Really odd. Later
Stephen, I have been working on a extender using the new jQueryExtenderControl and it has been going good. I just installed the new version of the toolkit and now my control does not load all of the properties to the jquery script. I found that I needed to change self.config to self.options but that still does not contain all of the properties that is in my CS file. I must be doing something simple wrong but for some reason just cant see it. Thanks for any help.
@lockwood — it would be a big help to us if you created an issue at http://AjaxControlToolkit.CodePlex.com and attached some code (a minimal reproduction of the issue). That way, we can investigate what is happening.
Stephen, I figured it out. I just had to add the options and define all of the parameters in the jquery file as well as in the C# file. Not sure if it was designed that way or not.
Hi, is this release fixing the
Sys.WebForms.PageRequestManagerServerErrorException: Script entries not loaded yet
issue as this issue is closed by superexpert?
Thanks and regards Ingmar
Thanks for this detailed post. I thought it was going to help me out but to no avail. I just upgraded to the new AjaxControlToolkit and upgraded jQuery to 1.9.1. The problem is, The AjaxControlToolkit seems to be using 1.10.2 and then conflicting with itself on the following code:
if (typeof actJQuery == “undefined”) {
if (typeof jQuery == “undefined” || jQuery.fn.jquery !== “1.9.1”) {
throw “jQuery 1.9.1 required.”;
actJQuery = jQuery.noConflict();
}
I wouldn’t be surprised if I missed something but this has had me stumped for several hours now. If I use your code above to remove the script in the config file, it works but then I have to make additional references to the jquery 1.9.1 file since the AjaxControlToolkit seems to be eating my reference from my master page and the rest of my jquery code cannot find it… Any chance you might have come across this before?
@Kennedy – The Ajax Control Toolkit is using jQuery 1.9.1 and, if you try to force it to use another version of jQuery with the element, then it will throw an exception at you. Any chance that you added jQuery 1.10.2 to your page by accident? Also, remember that you must load jQuery 1.9.1 before the opening
There is a issue with the microsoft.ajax script included with ajaxcontroltoolkit. The script included in the dotnet framework and the one included in asjaxcontroltoolkit are different. This is causing some other components which depend on the microsoft.ajax script to break (specifically PPS dashboards in IE). I have raised an issue in codeplex. Appreciate if you can give any workaround.
I’m getting the “jquery 1.9.1 required” exception after upgrading to the newest version of the AjaxControlToolkit. I have not made any changes to the AjaxControlToolkit.config (I don’t even know where the AjaxControlToolkit.config file is found or should be placed). I’m use .Net 4.0 for right now and the net40 versions of all my installed packages.
I’m using google’s CDN for my OWN needs/use of the jQuery 1.10.2 and then refer to my own local copy for backup in the following manner.
window.jQuery || document.write(”)
I don’t understand why the AjaxControlToolkit isn’t just loading it’s jQuery side by side with mine in a conflicting manner?
I’m implementing the ToolkitScriptManager like so:
does the use of the the CDN for the ToolkitScriptManager cause a problem?
I’m not quite sure where this error is coming from?
I’ve discovered where the problem lies… in the declaration of the ToolkitScriptManager, if you set the property of EnableCdn to “true” () it looks like it’s trying to use a different version (probably an older version) of jQuery from the CDN.
I’ll turn it off for now, but can we get the proper version of jQuery uploaded and hosted on the CDN that the ToolkitScriptManager uses so we can use this property (and have faster/better load times and less load on our own servers)?
Thanks in advance.
Does the “Ajax Control Toolkit December 2013 Release” work in MVC 4? I’m just getting into MVC from web forms and found a post about Ajax Control Toolkit not working in MVC.
If it doesn’t work in MVC where can I get that ACT functionality that was in ASP Forms I like so much in MVC?
Thanks,
@ds — The Ajax Control Toolkit is intended for Web Forms. If you need the same functionality in ASP.NET MVC then I would recommend using jQuery plugins directly.
First, thanks so much for you quick reply.
In the world of ACT and web forms I was able to use c# back end code when tabs changed. I had a tab control that had a name in backend code that I could assign events to such as when a tab was changing I knew which tab I was coming from and which I was going too. How would I do that in JQuery?
Is Ajax going to become my best friend?
Hi Stephen,
Thanks for the great work once again.
I was wondering which issue was fixed with the TMP folder of the AjaxFileUpload Control. On my portals I get this DirectoryNotFoundException on the temp folder. 99% of the times I have no issues with it but once in a while I get this exception (Could not find a part of the path ‘C:\Windows\TEMP\_AjaxFileUpload\11B3FD5F-23B2-CE73-D56B-1DC3F6B8D523).
Do you have an issue nr. for this fix you are talking about? So I can investigate if it will fix my problem.
Thnx
PJ
@PJ – This issue came through the ASP.NET team. The exact error message was “[IOException]: The system cannot move the file to a different disk drive.”We were able to reproduce the issue on a Windows Azure Website. The problem was that the AjaxFileUpload control was assuming that the TMP folder was on the same drive as the website. Instead of doing a COPY, we switched to doing a MOVE/DELETE with the TMP folder instead. This seems to have resolved the issue.
I’d love to upgrade to the new version, but the toolkit hasn’t been compliant with federal standards since the July release. It does not work on servers secured to federal standards. At that time, I submitted issue 27501 (https://ajaxcontroltoolkit.codeplex.com/workitem/27501) but no fix to date although I see it’s starting to get some votes. Any chance I can get this resolved?
@Wehu — Thanks for bringing this to my attention. I’ll see if I can get it onto the backlog for the next release.