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

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?

CodePudding user response：

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 >Destination of the closed dialog</div>

<div id="dialog" >A certain message</div>

CodePudding user response：

1.When the correct identifier is provided and the JS script tag is loaded after the element is created, we can access the top property without getting the error.

2.Try this to close the dialog

$('#dialog').dialog({
    modal: true,
          autoOpen: false,
          width:"auto",
          height:"auto",
          show: {
             effect: "slide",
             duration: 1000
          },
          hide: {
             effect: "transfer",
             duration: 1000
         },
    close: function(event, ui) { 
        $(this).dialog('destroy').remove();
    }
});]}

CodePudding user response：

For some reason transfer effect doesn't work. If I try any other effect, such as fold then it works!!