We Keep Coding

Is there any way to capture only 'X' event from modal dialogue using jquery?

I am having modal dialouge this way,
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true,
buttons: {
"SUBMIT": function() {
$(this).dialog("close");
},
"CANCEL": function() {
$(this).dialog("close");
}
},
close: function() {
alert('close');
}
});
And i am trying to get alert('close') once i click x button of the modal dialouge.
But the issue is this alert('close') is being invoked even after submit bitton and cancel button click of my modal '#dialog'.
Is there any way that i can get alert, only on clicking 'X' box of my dialouge and not on clicking sublit or cancel buttons.
However $(this).dialog("close"); should be there in submit and cancel button events.
If i remove $(this).dialog("close"); its working.
I want to get alert only on clickin 'X' and not on the modal dialouge close.
Can anyone help me in this issue?
Thanks

The close() callback will pass an event object which includes a .currentTarget property representing the button which was pressed. You can use that to find out which button was clicked. For example, try something like
$("#dialog").dialog({
close: function(event,ui) {
if($(event.currentTarget).hasClass('ui-dialog-titlebar-close')
{
alert('close');
}
}
You could also try directly creating an on("click") function directly on the X button yourself, but that can be a bit flaky.

MVC Jquery unresponsive after partial update

On my page I have a button for delete and that triggers a Jquery event for posting showing a dialog first and on continue it passes on the controller and action.
That works fine. Here is the jquery code:
$('#deleteMaintor-dialog').dialog({
autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
buttons: {
"Continue": function () {
$('#aniWait').show();
$.post(deleteLinkObj[0].href, function (data) { //Post to action
$('#Tor').html(data);
$('#aniWait').hide();
});
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(document).on('click', '#btnDeleteMaintor', function (e) {
deleteLinkObj = $(this); //for future use
$('#deleteMaintor-dialog').dialog('open');
return false; // prevents the default behaviour
});
The problem is that after this, none of the jquery events on the controles are fired anymore.
Why not?
I guess this has to do with the Success part of the $.Post?

I found the solution:
All the controls that were not working anymore were not anchored to the document, so I did that and now it is working fine.

Jquery Submitting a form does not work

I'm trying to submit a HTML form with submit() method of jQuery.
I'm registering a submitHandler for checking the formdata. IF check fails, the User can choose in a dialogue, whether he want to continue or cancel. On Continuing I deregister my Checkeventhandler and call submit() on the form, but nothing happens.
Here's my coding:
<form action="test.php" id="summary_01" method="post">
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#summary_01').on('submit', function(e){
var result = check();
if (!result) {
e.preventDefault();
}
return result;
});
});
function check() {
var result = false;
// do some Checks, setting result= true, if OK
if(!result) {
$( "#dialog-message" ).dialog({
modal: true,
resize : true,
width : 'auto',
buttons: {
Ok: function() { //Sending, despite check failed
$('#summary_01').unbind('submit'); //remove checkingForm Eventhandler
$('#summary_01').submit();
$( this ).dialog( "close" );
},
Cancel : function() {
$( this ).dialog( "close" );
}
}
});
}
return result;
}
</script>
I think the problem is e.preventDefault() but the dialogue call is asynchronous and therefore I prevent submitting until the user have chosen to continue or cancel.
Maybe you can help me. Thanks for your help in advance.

Call native submit function. In your code you have also other form id. Should be #form01.
$('#form01').off('submit');
$('#form01').get(0).submit();

Jquery UI dialog as confirmation

function Globally() {
$("#dialogid").dialog({ width: 300, modal: true, show: 'drop', hide: 'drop',
buttons: {
"Ok": function () { return true; $(this).dialog('close'); },
"Cancel": function () { return false; $(this).dialog('close'); }
}
});
}
function test()
{
if(Globally())
alert("Ok");
else
alert("Cancel");
}
I am trying to make a confirmation dialog and I want it to placed in a function (in this case Globally()) because I am using confirmation dialog in so many different function, but this is not working , the control returns from the Globally() function without getting true or false value. I want it to stop there until user press Ok or Cancel. How can I do this?

You'll have to use built in confirm function if you want to run code like that:
var question = confirm("Proceed?")
if (question){
// continue
} else {
// stop
}
That is because only confirm when used prevent whole javascript execution and allows you to pick one answer or the other (Ok, Cancel).
Dialogs like jQuery dialog can not stop script execution so even if you use
if(Globally())
alert("Ok");
else
alert("Cancel");
It'll just execute Globally() function and continue right after it - not waiting for a user answer.
If you really want to use jq dialog then add callback functions to your buttons.
"Ok": function () { callbackFunctionTrue(); },
"Cancel": function () { callbackFunctionFalse(); }
And ditch if/else statement() in test function.

That;s not how it works
Just do
"Ok": function () { alert('OK'); $(this).dialog('close'); },
"Cancel": function () { alert('Not ok'); $(this).dialog('close'); }
or
"Ok": function () { $(this).dialog('close'); test(1) },
"Cancel": function () {$(this).dialog('close'); test(0) }
with
function test(ok){
alert(ok?"Ok":"Cancel");
}

how to use jquery UI dialog as javascript confirm?

I read lots of questions about this, but every solution uses the same workaround, submiting the form inside the jquery dialog, something like this:
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
Isn't there an easier way, more like javascript confirm?
<input type="submit" onclick="return confirm('are you sure?');" />
Why something like return true, return false doesn't work?

Here's what you can do, you change your input type from 'submit' to 'button', then, you can have your script like this:
$(document).ready(function(){
$("#dialog").dialog({
autoOpen: false,
buttons : {
"Confirm" : function() {
$('#form1').submit();
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$('#submitButton').click(function(){
$("#dialog").dialog('open');
});
});
This way your form will only be submitted when the used confirms the dialog.
The reason it doesn't matter if you return false or true in your case is that the dialog is just shown but code from the submit event keeps on executing unless you return false just after showing the dialog.

I wrote the following code to use JQuery's UI Dialog as a modal confirmation. By submitting the form via the event target there is not a recursive call to the submit event handler.
$(function () {
$('form[action*="/Delete"]').submit(function (e) {
e.preventDefault();
$("<div>Are you sure you want to delete this?</div>").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Ok: function () {
e.target.submit();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
});

This is because jQuery UI dialogs are not technically modal, unlike confirm and alert. They don't pause the javascript you're in the process of executing. But you can get essentially the same thing like this:
function restOfTheCode(returnValue)
{
//do stuff
}
$("#dialog").dialog({
buttons : {
"Confirm" : function() { $(this).dialog("close"); restOfTheCode(true); },
"Cancel" : function() { $(this).dialog("close"); restOfTheCode(false); }
}
});
//anything down here executes immediately after the dialog is shown, so that's no good.
Is equivalent to:
var returnValue = confirm("Are you sure you want to confirm?");
//do stuff
Edit: okay, with the addition of the submit issue the alternate code here doesn't make any sense. But the explanation is the same: it's not modal. If you really wanted to, you could simulate this:
function modalDialogConfirm()
{
var buttonClicked = false;
var valueSelected;
$("#dialog").dialog({
buttons : {
"Confirm" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = true; },
"Cancel" : function() { $(this).dialog("close"); buttonClicked = true; valueSelected = false; }
}
});
function y { setTimeOut("x()", 100); }
function x { setTimeOut("y()", 100); }
while(!buttonClicked);
return valueSelected;
}
...but this just freezes the browser, so it's not a whole lot of useful...