CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
smooster
smooster

Reputation: 41

How to do not close Dialog of jQuery UI?

    var error = 1;
    $(document).on('click', '.ui-icon-closethick', function(event){
        if(error == 1){
           alert('error');
           event.preventDefault();
           event.stopPropagation();
           return false;
        } 
    })

How to do not close Dialog of jQuery UI? Now if i click on close button (x) then i have alert error, but dialog is closing.

LIVE DEMO

Upvotes: 4

Views: 17566

Answers (7)

Jeff Penner
Jeff Penner

Reputation: 421

If I understand correctly, you want to allow the user to click the 'X' button on the top right dialog, but you do not want to allow them to close the window. You probably want to trigger a different event instead.

Try this example out in your own code with your own dialogClass:

$("#dialogId").dialog({
        dialogClass: "dialogId",
        title:     "someTitle",
        //modal:     true,
        //autoOpen:  false, 
        //resizable: false,
        //closeOnEscape: false,
        height:    500,
        width:     1000,
        open : function(event, ui){       
        },
        beforeClose: function (event, ui) {
            if ($(".dialogId .ui-dialog-titlebar-close").is(":focus")) { 
                alert('X clicked but do not close!');
                return false; // do not close dialog
            }
            return true; // close dialog
        }, 
        buttons: [
          { }
        ]
});

Essentially what's happening here is were are asking if the dialog's X button is being focused (a.k.a. clicked) and then we return false. You may trigger a different event here if you like, such as creating your own custom "Are you sure you want to cancel?" dialog popup on top.

Cheers! Good luck.

Jeffrey

Upvotes: 0

anmarti
anmarti

Reputation: 5143

You can add the beforeClose option to your dialog and return false on it:

$("#dialog").dialog({
   beforeClose: function(){
     return false;
   }
});

Demo: http://jsfiddle.net/UfpHz/9/

Upvotes: 15

Rachit Doshi
Rachit Doshi

Reputation: 183

Use

beforeClose: function( event, ui ) {return false;}

from url : http://api.jqueryui.com/dialog/#event-beforeClose

Upvotes: 0

nix
nix

Reputation: 3302

You can use the beforeClose event to prevent the dialog from closing.

Like this:

$( "#dialog" ).dialog({
    beforeClose: function(){
        if(error == 1){
            alert('error');
            return false;
        } 
    }
});

Upvotes: 4

Stan
Stan

Reputation: 26501

You need to look for errors on beforeClose event and return true or false there.

var error = 1;

$(function () {
    $("#dialog").dialog({
        beforeClose: function (event, ui) {
            if (error === 1) { // in javascript you compare with ===, not ==
                alert('error');
                return false; // error, dialog will not close
            }
            return true; // no error, dialog will close
        }
    });
});

http://jsfiddle.net/RHhwV/

Upvotes: 3

Chirag Vidani
Chirag Vidani

Reputation: 2577

You can handle close event also

$(function() {
      $( "#dialog" ).dialog({
          close: function(event,ui){
              $(this).dialog('open');
          }
      });
  });

more documentation can be found at this link

Demo

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27354

Well you can do this by removing close button.

$("#YOUR_DIALOG_DOM_ID").dialog({
   closeOnEscape: false,
   open: function(event, ui)
   {
      $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
   }
});

Upvotes: 5

Related Questions