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.<computed>.<computed>.open (jquery-ui.min.js:5)
    at a.<computed>.<computed>._init (jquery-ui.min.js:5)

I'v used these jquery libraries :

<script src="../vendor/jquery/jquery.min.js"></script> //Given with my bootstrap theme
<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>
<script src=".8/jquery-ui.min.js"></script>

And the function I called is this one :

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

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

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.<computed>.<computed>.open (jquery-ui.min.js:5)
    at a.<computed>.<computed>._init (jquery-ui.min.js:5)

I'v used these jquery libraries :

<script src="../vendor/jquery/jquery.min.js"></script> //Given with my bootstrap theme
<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

And the function I called is this one :

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

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

• javascript
• jquery
• dialog
• typeerror

3 Answers 3

.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

andSelf is deprecated and removed - use newer JQUI

Also always use the HTTPS versions

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

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

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

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

If you are like me and are forced to use some third party scripts that have .andSelf(), well you can instead add the function to the prototype, so it will continue to work as it had.

// an alias for .addBack().
if (typeof jQuery.fn.andSelf === 'undefined') {
    jQuery.fn.andSelf = function () {
        return this.addBack();
    };
}