Erreur jQuery UI - f.getClientRects n'est pas une fonction

Question

J'essaie de faire fonctionner jQuery UI, mais ça ne marche pas. Voici ce qui se passe.

Je charge les dépendances :

<script src="assets/src/js/angular/angular.js"></script>
<script src="assets/src/js/angular-animate/angular-animate.js"></script>
<script src="assets/src/js/angular-route/angular-route.js"></script>
<script src="assets/src/js/jquery/dist/jquery.js"></script>
<script src="assets/src/js/jquery-ui/jquery-ui.js"></script>
<script src="assets/src/js/app.js"></script>
<script src="assets/src/js/main.js"></script>

C'est mon main.js fichier :

$(function () {
    $("input[type=submit]")
        .button()
        .click(function (event) {
            event.preventDefault();
        });
});

$(function () {
    $("#circum").buttonset();
});

$(function () {
    $("#dialog-message").dialog({
        modal: true,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
});

Lorsque j'exécute le code dans Brackets, jQuery UI est chargé mais ne fonctionne pas, cependant, lorsque je commente mon main.js C'est l'erreur que j'obtiens dans la console et l'interface utilisateur fonctionne soudainement. C'est extrêmement bizarre.

jQuery.Deferred exception: elem.getClientRects is not a function TypeError: elem.getClientRects is not a function
at jQuery.offset (http://127.0.0.1:27530/assets/src/js/jquery/dist/jquery.js:9779:14)
at Object.getWithinInfo (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1157:26)
at jQuery.$.fn.position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1179:23)
at _position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8709:17)
at ._position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8334:8)
at .open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8210:9)
at ._init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _createWidget (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:587:8) undefined

J'ai trouvé ce fil de discussion sur le problème, mais je n'ai toujours pas réussi à le résoudre.

Github

A la vôtre.

Answer 1

Quelle est la version de votre jQuery UI ? J'ai eu le même problème avec jQuery UI 1.11.4 et jQuery 3.0.
Après avoir installé jQuery UI 1.12.0-rc.2, le problème a été corrigé.

Answer 2

Ajout de la Plugin de migration jQuery 3 résout ce problème comme indiqué ici L'interface utilisateur mise à jour sera bientôt disponible.

---

MISE MISE À JOUR DU 5 NOVEMBRE 2018

Si vous utilisez la dernière version de jQuery et de jQuery UI , utilisez dernier jQuery migrer pour éviter les avertissements/problèmes de compatibilité.

---

Answer 3

Il s'avère que c'est une compatibilité entre jQuery 3.x.x et jQueryUI avant la version 1.12.0.

L'inclusion du script ci-dessous a résolu le problème pour moi.

https://code.jquery.com/jquery-migrate-3.0.0.min.js

Answer 4

J'ai mis à jour notre ancien site, de jquery 1.12 à jquery 3.5 et j'ai rencontré le même problème. Le site utilise jquery-ui 1.10 mais malheureusement, la mise à jour vers jquery-ui 1.12 a cassé d'autres choses et je n'ai pas pu utiliser cette option. L'exécution du site de production avec le plugin de migration ne me semblait pas correcte. J'ai donc cherché à savoir comment ce problème avait été résolu dans jquery-ui 1.12.

Parcheando jquery-ui 1.10 avec le correctif de jquery-ui github "Position : Garde contre la fenêtre de passage à Offset" a fonctionné pour moi.

Il s'agit d'un ancien article, mais si quelqu'un comme moi doit mettre à jour d'anciens sites, peut-être que ces informations peuvent être utiles.

Answer 5

Après avoir fait toutes les mises à jour et avoir toujours le problème, je l'ai corrigé dans le code :

Regarde ça :

if ( !elem.getClientRects().length ) {
    return { top: 0, left: 0 };
}

Entrez ceci juste avant :

if (!elem.getClientRects()) {
    return { top: 0, left: 0 };
}