Issue with jQuery transfert effect

Question

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:

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" );
  } );
})

Problem

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?

user_2159528 · Answer

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;
}







Destination of the closed dialog

A certain message

Issue with jQuery transfert effect

Problem

1 Answers