jQuery-UI - "अपरिभाषित की संपत्ति 'चरण' नहीं पढ़ सकता"

Question

हमने हाल ही में jQuery 2.2 संस्करण से 3.1.1 तक jQuery को अपग्रेड किया है और अब कुछ रोचक त्रुटियां देख रहे हैं। मैंने jquery-migrate प्लगइन स्थापित किया जिसने मुझे कुछ त्रुटियों के माध्यम से मदद की, लेकिन सभी नहीं। नीचे मैं क्रोम में अपने डेवलपर कंसोल में जो त्रुटि देख रहा हूं वह नीचे है और मुझे पिन बिंदु नहीं लग रहा है जहां यह त्रुटि हो रही है।

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 

मैं क्रोम में डिबग है और यह एक समारोह jQuery.fx.step[ hook ] कहा जाता है के अंदर टूट जाता है। जब मैं jQuery.fx पर होवर करता हूं, तो इसे अपरिभाषित के रूप में दिखाया जाता है।

नीचे

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

मैं jquery-ui अनइंस्टॉल कर दिया है, लेकिन सभी ने ऐसा ही किया कोणीय तोड़ने था देखें। अगर कोई इस मामले पर कुछ प्रकाश डाल सकता है तो प्यार होगा।

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

त्रुटि संदेश की तरह आप jQuery स्लिम का उपयोग कर रहे (at each (jquery-3.1.1.slim.js:368) से) यह लग रहा है के आधार पर। स्लिम स्पष्ट रूप से jQuery UI में आवश्यक कुछ फ़ंक्शंस को हटा देता है। इसे ठीक करने के लिए, 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://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>

और यहाँ यह पूर्ण 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>