JQuery UI dialog : TypeError: a(...).parents(...).andSelf is not a function

Question

I'm new to jquery and I wanted to add a dialog to my page when a function is called. Whenever I call this function from the console, the dialog shows up but with the error below. What did it mean and how to solve it ?

Uncaught TypeError: a(...).parents(...).andSelf is not a function
    at d (jquery-ui.min.js:5)
    at c (jquery-ui.min.js:5)
    at Array.tabbable (jquery-ui.min.js:5)
    at jquery.min.js:2
    at r (jquery.min.js:2)
    at se.select (jquery.min.js:2)
    at Function.se [as find] (jquery.min.js:2)
    at k.fn.init.find (jquery.min.js:2)
    at a...open (jquery-ui.min.js:5)
    at a..._init (jquery-ui.min.js:5)

I'v used these jquery libraries :

 //Given with my bootstrap theme

And the function I called is this one :

function afficherPopupErreur() {
    $('body').append('This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the x icon.');
    $( "#dialog" ).dialog();
}

I know that this append is quite weird but it was just to try the dialog.

user_2456038 · Answer

.andSelf() was deprecated in jQuery 1.8 and removed in jQuery 3.0.

.addBack() should be used instead from jQuery 1.8 onward.

Try to replace "andSelf" with "addBack" in your code

user_295783 · Answer

andSelf is deprecated and removed - use newer JQUI

Also always use the HTTPS versions

function afficherPopupErreur() {
  $('body').append('This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the x icon.');
  $("#dialog").dialog();
}

$(function() {
  afficherPopupErreur();
});

.ui-dialog-titlebar-close { float:right}
.ui-dialog-titlebar-close::after { content:"X" }

JQuery UI dialog : TypeError: a(...).parents(...).andSelf is not a function

2 Answers