Menu
We've recently upgraded jQuery from version 2.2.4 to 3.1.1 and are now seeing some interesting errors. I installed the jquery-migrate plugin which helped me through a few errors, but not all. Below is the error I'm seeing in my developer console in Chrome and I can't seem to pin point where this error is occurring.
jquery-ui-1.12.1.js:1951 Uncaught TypeError: Cannot read property 'step' of undefined
at String.<anonymous> (jquery-ui-1.12.1.js:1951)
at each (jquery-3.1.1.slim.js:368)
at Function.color.hook (jquery-ui-1.12.1.js:1913)
at jquery-ui-1.12.1.js:1963
at jquery-ui-1.12.1.js:2005
at jquery-ui-1.12.1.js:14
at jquery-ui-1.12.1.js:16
I've debugged in Chrome and it breaks inside of a function called jQuery.fx.step[ hook ]. When I hover over jQuery.fx, it's shown as undefined. See below
jQuery.fx.step[ hook ] = function( fx ) {
if ( !fx.colorInit ) {
fx.start = color( fx.elem, hook );
fx.end = color( fx.end );
fx.colorInit = true;
}
I've uninstalled jquery-ui, but all that did was break Angular. Would love if someone could shed some light on the matter.
packages.config =
<package id="Angular.Material" version="1.1.4" targetFramework="net462" />
<package id="Angular.UI.Bootstrap" version="2.5.0" targetFramework="net462" />
<package id="angular-file-upload" version="12.2.13" targetFramework="net462" />
<package id="AngularJS.Animate" version="1.6.5" targetFramework="net462" />
<package id="AngularJS.Aria" version="1.6.5" targetFramework="net462" />
<package id="AngularJS.Core" version="1.6.5" targetFramework="net462" />
<package id="AngularJS.Messages" version="1.6.5" targetFramework="net462" />
<package id="AngularJS.Resource" version="1.6.5" targetFramework="net462" />
<package id="AngularJS.Route" version="1.6.5" targetFramework="net462" />
<package id="AngularJS.Sanitize" version="1.6.5" targetFramework="net462" />
<package id="Antlr" version="3.5.0.2" targetFramework="net462" />
<package id="Bootbox.JS" version="4.4.0" targetFramework="net462" />
<package id="bootstrap" version="3.3.7" targetFramework="net462" />
<package id="CommonServiceLocator" version="1.3" targetFramework="net462" />
<package id="EntityFramework" version="6.1.3" targetFramework="net462" />
<package id="font-awesome" version="4.7.0" targetFramework="net462" />
<package id="HubSpot.Tether" version="1.1.1" targetFramework="net462" />
<package id="jQuery" version="3.1.1" targetFramework="net462" />
<package id="jQuery.UI.Combined" version="1.12.1" targetFramework="net462" />
<package id="lodash" version="4.17.4" targetFramework="net462" />
517
Based on the error message it looks like you're using jQuery Slim (from at each (jquery-3.1.1.slim.js:368)). Slim removes some functions required in jQuery UI apparently. To fix this, use the full version of jQuery.
Here's a demo replicating your issue:
$( function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 50 };
} else if ( selectedEffect === "transfer" ) {
options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// Run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// Callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
return false;
});
} );.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Effect</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
<option value="transfer">Transfer</option>
</select>
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>And here it is with full jQuery:
$( function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 50 };
} else if ( selectedEffect === "transfer" ) {
options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// Run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// Callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
return false;
});
} );.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Effect</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
<option value="transfer">Transfer</option>
</select>
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>just use diffrent cdn i was using cdn from bootstrap website it was not working jquery cdn
It might be due to jquery slim version
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
