I am trying to implement the jQuery dialog UI, to show a certain message to the user.
I have included the jQuery library in my HTML page:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
My JavaScript code:
document.getElementById("save").addEventListener('click',function(){
$( function() {
$( "#dialog" ).dialog({
modal: true,
autoOpen: false,
width:"auto",
height:"auto",
show: {
effect: "slide",
duration: 1000
},
hide: {
effect: "transfer",
duration: 1000
}
});
$( "#dialog" ).dialog( "open" );
} );
})
The dialog opens but doesn't close, no matter how many times I try to close it, this error pops up:
Uncaught TypeError: Cannot read properties of undefined (reading 'top')
at e.effects.effect.transfer (jquery-ui.min.js:11:4184)
at HTMLDivElement.i (jquery-ui.min.js:10:24550)
at Function.dequeue (jquery-1.11.1.min.js:3:2066)
at HTMLDivElement. (jquery-1.11.1.min.js:3:2522)
at Function.each (jquery-1.11.1.min.js:2:2973)
at m.fn.init.each (jquery-1.11.1.min.js:2:835)
at m.fn.init.queue (jquery-1.11.1.min.js:3:2427)
at m.fn.init.effect (jquery-ui.min.js:10:24778)
at m.fn.init.hide (jquery-ui.min.js:10:25098)
at e.Widget. [as _hide] (jquery-ui.min.js:6:13404)
I even tried closing the dialog programmatically
$("#dialog").dialog('close');
But it still shows the same error. How do I fix this?
Please read the jQuery transfer effect documentation.
That effect needs a "destination". It has to be another element.
So there will be an animation between the element on which the effect is called TO another element...
And please upgrade the versions you are using!!! jQuery 1.11.1 is more than 10 years old.
$("#dialog").dialog({
modal: true,
autoOpen: false,
width: "auto",
height: "auto",
show: {
effect: "slide",
duration: 1000
},
hide: {
effect: "transfer",
to: $(".transfer-destination"), // A destination was missing
duration: 1000
}
})
document.getElementById("save").addEventListener('click', function() {
$("#dialog").dialog("open")
})button{
margin-bottom:2em;
}
.transfer-destination {
padding: 2em;
border: 1px solid black;
background-color: cyan;
width: 10em;
}
.ui-effects-transfer { /* this is styling for the transitionning element */
border: 2px dotted red;
background-color: yellow;
opacity: 0.3;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/theme.min.css" />
<button id="save">Save</button><br>
<div class="transfer-destination">Destination of the closed dialog</div>
<div id="dialog" class="">A certain message</div>