jQuery-UI - "Nie można odczytać właściwości" krok "o niezdefiniowanym"

Question

Niedawno zaktualizowaliśmy jQuery z wersji 2.2.4 do wersji 3.1.1 i widzimy teraz kilka interesujących błędów. Zainstalowałem wtyczkę jquery-migrate, która pomogła mi w kilku błędach, ale nie we wszystkich. Poniżej znajduje się błąd, który widzę w mojej konsoli programisty w przeglądarce Chrome i nie potrafię wskazać miejsca występowania tego błędu.

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 

Mam debugowany w Chrome i rozkłada wewnątrz funkcji zwanej jQuery.fx.step[ hook ]. Po najechaniu myszą nad jQuery.fx jest pokazywany jako niezdefiniowany. Zobacz poniżej

jQuery.fx.step[ hook ] = function(fx) { 
      if (!fx.colorInit) { 
       fx.start = color(fx.elem, hook); 
       fx.end = color(fx.end); 
       fx.colorInit = true; 
      } 

mam odinstalowane jquery-ui, ale wszystko, co zrobiłem było przerwać kątowe. Chciałbym, jeśli ktoś mógłby rzucić trochę światła na tę sprawę.

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" /> 

Answer 1

Na podstawie komunikatu o błędzie wygląda jak używasz jQuery Slim (od at each (jquery-3.1.1.slim.js:368)). Slim pozornie usuwa niektóre funkcje wymagane w jQuery UI. Aby to naprawić, użyj pełnej wersji jQuery.

Oto demo replikowania problem:

$(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>

I to jest tutaj z pełnym 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>