U4-9192 - User control relying on jQuery 1.x errors when used in a dashboard tab

Created by Mark Owen 16 Nov 2016, 11:19:57 Updated by Sebastiaan Janssen 19 Jan 2017, 10:35:58

Tags: PR

What did you do? Upgraded from Umbraco 7.3.7 to 7.5.3 and continued using custom user controls in tabs that made use of functionality provided with Umbraco, such as "umbDP:DateTimePicker" and "jquery.maskedinput".

What did you expect to happen? Expected functionality to continue as it previously had.

What actually happened? JS errors in console and functionality didn't work:

TypeError: Cannot read property 'msie' of undefined  /DependencyHandler.axd?s=L3VtYnJhY29fY2xpZW50L0FwcGxpY2F0aW9uL05hbWVzcGFjZU1hbmFnZXIuanM7L3VtYnJhY29fY2xpZW50L3VpL2pxdWVyeS5qczsvdW1icmFjb19jbGllbnQvdWkvYmFzZTIuanM7L3VtYnJhY29fY2xpZW50L1VJL2tub2Nrb3V0LmpzOy91bWJyYWNvX2NsaWVudC9VSS9rbm9ja291dC5tYXBwaW5nLmpzOy91bWJyYWNvX2NsaWVudC91aS9kZWZhdWx0LmpzOy91bWJyYWNvX2NsaWVudC91aS9qcXVlcnl1aS5qczsvdW1icmFjb19jbGllbnQvRGF0ZVRpbWVQaWNrZXIvdGltZXBpY2tlci5qczsvdW1icmFjb19jbGllbnQvTWFza2VkSW5wdXQvanF1ZXJ5Lm1hc2tlZGlucHV0LTEuMy5taW4uanM7L3VtYnJhY29fY2xpZW50L0RhdGVUaW1lUGlja2VyL3VtYkRhdGVUaW1lUGlja2VyLmpzOw&t=Javascript&cdv=584603699:119

TypeError: jQuery(...).umbDateTimePicker is not a function  /umbraco/dashboard/usercontrolproxy.aspx?ctrl=*****:38

and

TypeError: Cannot read property 'msie' of undefined  /umbraco_client/MaskedInput/jquery.maskedinput-1.3.min.js?cdv=584603699:7

TypeError: jQuery(...).mask is not a function  /umbraco/dashboard/usercontrolproxy.aspx?ctrl=*****:38

Other comments: It appears that an old version of jQuery are loaded for Web Forms pages for backwards compatibility, but the same doesn't seem to have been done for user controls in tabs.

For now we have managed to resolve the issue by modifying UserControlProxy.aspx based on umbracoPage.master changing line 15 from: <umb:JsInclude ID="JsInclude3" runat="server" FilePath="ui/jquery.js" PathNameAlias="UmbracoClient" Priority="1" /> to <umbClient:JsJQueryCore runat="server"/>

and including <%@ Register TagPrefix="umbClient" Namespace="Umbraco.Web.UI.Bundles" Assembly="umbraco" %> at the top of the file.

We are unsure if this poses any other issues or if this fix should be added to a later version of Umbraco?

Comments

Sebastiaan Janssen 16 Nov 2016, 14:07:10

jQuery was upgraded because of a security issue, see U4-8816. I'd recommend you load the jquery-migrate library instead of the vulnerable old version of jQuery.


Mark Owen 16 Nov 2016, 14:27:28

@sebastiaan As the description of the problem states we are using all functionality provided as part of Umbraco (just inside of a custom user control) and the change we have made is to an Umbraco file, so surely this is something that needs to be changed as part of Umbraco? We consider our change temporary, as it could be overridden by a future Umbraco upgrade.

Also, as mentioned above, the "fix" to an Umbraco file we have added above is only doing the same as is in another Umbraco file. If that is an unsafe way to deal with the problem then I would suggest that it needs resolving in both.

If you still believe that we should be able to resolve the issue loading the jquery-migrate library, could you please let me know how. The console suggests that jquery-migrate is already being loaded in our scenario with the problem. Also in our custom code we do not load any versions of jQuery or have any requirement for jQuery - that is all inside code provided as part of Umbraco.

If my comment or original description is unclear please let me know.


Sebastiaan Janssen 16 Nov 2016, 14:41:04

Can you see in the console window that jQuery migrate is loaded? And your custom usercontrol is not in an iframe or something where jQuery migrate is not loaded?

Make sure to set debug=false in your web.config and update ClientDependence.config to have a different version number (just make it 1 higher or lower). Then check out if there's more javascript errors. jQuery migrate should definitely catch that msie call and redirect it to the appropriate new API.


Sebastiaan Janssen 16 Nov 2016, 14:43:19

Ah.. so I missed this part: you're not putting your OWN usercontrols in there, the error is coming from usercontrolproxy.aspx?? If so where exactly do you see the error, clicking where in the backoffice?


Mark Owen 16 Nov 2016, 16:44:31

We can see jQuery migrate being loaded in the console, but since the right hand side frame is put into an iframe (outside of our control I think) it could be that it isn't in that frame. The error happens whether or not debug is set to false. Changing ClientDependence.config version number didn't resolve the issue.

For the user control, it is our own user control, but it is very simple and just includes functionality from Umbraco. Below is more indepth explaination of the setup.

We are overriding the functionality in the members section of Umbraco, as follows:

member /usercontrols/dashboard/CustomUserControl1.ascx /usercontrols/dashboard/CustomUserControl2.ascx /usercontrols/dashboard/CustomUserControl3.ascx

The user control with the issue looks similar to this (I have confirmed that the issue still exists when the user control is as below):

<%@ Control Language="C#" AutoEventWireup="True" CodeBehind="CustomControl3.ascx.cs" Inherits="..." %> <%@ Register Namespace="umbraco.uicontrols.DatePicker" Assembly="controls" TagPrefix="umbDP" %> <umbDP:DateTimePicker ID="DateFrom" runat="server" ShowTime="False" />

and gives this error: TypeError: Cannot read property 'msie' of undefined /umbraco_client/MaskedInput/jquery.maskedinput-1.3.min.js?cdv=584603700:7

TypeError: jQuery(...).mask is not a function /umbraco/dashboard/usercontrolproxy.aspx?ctrl=/usercontrols/dashboard/CustomUserControl3.ascx:29

As you can see, our user control doesn't load any jQuery or have any direct jQuery requirements.

JQuery appears to be loaded inside of usercontrolproxy.aspx, which is where we have currently changed it to load jQuery like umbracoPage.master does (see first post).

Hope this helps


Sebastiaan Janssen 17 Nov 2016, 10:04:25

Ok, I can't see the error anywhere in plain Umbraco because we're not using datetimepickers etc. My suggestion was that you need to load jQuery-migrate in your custom user controls. It's loading in an iframe, so they are responsible for loading their own dependencies.


Mark Owen 17 Nov 2016, 10:43:43

I've just tried this, but it doesn't seem possible to put the jquery migrate reference anywhere to stop this error occurring.

With this setup:

<%@ Control Language="C#" AutoEventWireup="True" CodeBehind="CustomControl3.ascx.cs" Inherits="..." %> <%@ Register Namespace="umbraco.uicontrols.DatePicker" Assembly="controls" TagPrefix="umbDP" %> <umbDP:DateTimePicker ID="DateFrom" runat="server" ShowTime="False" />

I still get the error: TypeError: Cannot read property 'msie' of undefined /umbraco_client/MaskedInput/jquery.maskedinput-1.3.min.js?cdv=584603700:7

TypeError: jQuery(...).mask is not a function /umbraco/dashboard/usercontrolproxy.aspx?ctrl=/usercontrols/dashboard/CustomControl3.ascx:28

I have checked and the jQuery migrate is being loaded in that scenario, but it is loaded after the file with the error and there is no way to change this.

It appears the actual bug that exists is that it is no longer possible to use the Umbraco datetimepicker user control inside a custom user control. This feels like something that needs fixing for backwards compatibility.


Sebastiaan Janssen 17 Nov 2016, 10:48:51

Alright, in that case I maybe you can send us a pull request if you can load jquery-migrate instead of the old jquery lib in umbraocPage.master?


Mark Owen 17 Nov 2016, 14:47:42

Ok. I've raised a pull request for this.


Mark Owen 22 Nov 2016, 18:19:53

@sebastiaan Noticed a lot of issues had the pull request link posted when raised, so I thought I'd do the same. PR: https://github.com/umbraco/Umbraco-CMS/pull/1626

Also do you have any idea how long it tends to take for these to be reviewed?


Priority: Normal

Type: Bug

State: Fixed

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.5.3

Due in version: 7.5.8

Sprint:

Story Points:

Cycle: