CODEWITHSUNDEEP
jquerydialogalert
G.Hamton
G.Hamton

Reputation: 61

Jquery UI Dialog - How to use the close button to perform function?

I'm using the Jquery UI Dialog in my site and wanted to know if there is a way that I can use the close button to perform an action. For example if the button is pressed then refresh the page. Something like this. Is this possible?

Thanks guys. :)

$(document).ready(function() {
  $("#dialog1").dialog({
    autoOpen: false,
    show: {
      effect: "puff",
      duration: 300
    },
    hide: {
      effect: "clip",
      duration: 500
    }
  });

  $("#opener").on("click", function() {
    $("#dialog1").dialog("open");
  });

});


function dialog() {
  $("#dialog1").dialog("open");
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog1" title="Dialog Title!">
  <p>Dialog Text</p>
</div>
<button onclick="dialog()">Press For Dialog</button>

Upvotes: 0

Views: 87

Answers (2)

monkey-wrench
monkey-wrench

Reputation: 37

$('#dialog1').on('dialogclose', function(event) {
     location.reload();
 });

Upvotes: 0

Dipiks
Dipiks

Reputation: 3928

You can use the event dialogbeforeclose of jquery ui dialog like this:

javascript part of the event handling:

$("#dialog1").on("dialogbeforeclose", function() {
    alert("Do what you want here");
});

You can, if you want, instead of the alert, refresh the page with calling location.reload();

Working snippet:

$(document).ready(function() {
  $("#dialog1").dialog({
    autoOpen: false,
    show: {
      effect: "puff",
      duration: 300
    },
    hide: {
      effect: "clip",
      duration: 500
    }
  });

  $("#opener").on("click", function() {
    $("#dialog1").dialog("open");
  });

});


// Here is the interception of the event dialogbeforeclose
$("#dialog1").on("dialogbeforeclose", function() {
    alert("Do what you want here");
});

function dialog() {
  $("#dialog1").dialog("open");
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog1" title="Dialog Title!">
  <p>Dialog Text</p>
</div>
<button onclick="dialog()">Press For Dialog</button>

Upvotes: 1

Related Questions