Develop Reference

How to get jquery dialog box to close after one click

My dialog box only closes after two clicks and not one. I am not sure why it won't close on the first button click. Does the dialog box need to be hidden? I tried dialog.dialog.hide(); as well right after close, but that gives me no luck. This is what I have for my dialog.
var dialog = $('<p>Cannot post. </p>').dialog({
height: 150,
width: 300,
buttons: {
"Ok": function(event) {
event.preventDefault();
dialog.dialog('close');
$(this).display = 'none';
}
}
});

Consider the following: https://jsfiddle.net/Twisty/eo4z5gaj/
JavaScript
$(function() {
var dialog = $('<p>Cannot post. </p>').dialog({
height: 150,
width: 300,
buttons: {
"Ok": function(event) {
$(this).dialog('close');
}
}
});
});
It's better to refernce $(this) for .dialog(). Essentially they are the same.
If this code is still requiring two clicks of "Ok", then you should look at your browser or console. Code above works with single click in FireFox.
You may also consider: https://jsfiddle.net/Twisty/eo4z5gaj/8/
JavaScript
$(function() {
var dialog = $('<div>', {
title: "Error"
}).html("<p>Cannot Post.</p>").dialog({
height: 160,
width: 300,
buttons: {
"Ok": function(event) {
$(this).dialog('close');
}
}
});
});
Hope that helps.

JqueryUI Tooltip on modal button re-appears on modal close

Hi there StackOverflowvians!
I'm learning to Javascript and JQuery and I've got a connundrum I'm not solving very well. I've used JqueryUI tooltips on some buttons. The tooltip uses the following code to display. I realize that my structure and organizational skills with regards to code suck, and there's probably a million more efficient ways to do what I'm doing, but bear with me - This is quite literally my first attempt at any kind of javascript.
$(function() {
$("#button-menu").tooltip({
position: {
my: "top",
at: "bottom+10",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" ).addClass( "arrow" ).addClass( "top" ).appendTo( this );
}
}
});
$("#button-menu").tooltip({ hide: { effect: "fadeOut", duration: 100 }, show: { effect: "fadeIn", duration: 100 }});
});
So I'm calling a tooltip when you hover on the buttons, it's pretty and does what I want. A couple of the buttons when you click them lead to Modal Dialog windows. If one clicks a.search, one gets a modal dialog window with a search form. If one decides to simply close the modal window, it closes and whatnot. I note that when the modal is open, the tooltip closes and the state of the button returns to unfocused. When I close the Modal, the tooltip returns as if I'm hovering on the button - no matter where my mouse is positioned.
I tried to call blur on close for the button item for all buttons in the div, but to no avail. I might try setting a timeout on that function next, because somewhere the tooltip function is re-instating the aria-tooltip class after the button close event and I suppose if I can wait it out I can close it after it opens, but that feels sloppy. The code below was my interpretation of the correct way to call a dialog and close the tooltip for the button on dialog close, but it doesn't do what I think it should. The tooltip still re-appears
$(function() {
$( "#searchform" ).dialog({
modal: true,
autoOpen: false,
close: function( event, ui ) {$('a.search').blur();},
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "fade",
duration: 1000
}
});
$( "a.search" ).click(function() {
$( "#searchform" ).dialog( "open" );
});
});
edit: I suppose I should ask the question - why is this behavior happening, and is there something I can do identify how that tooltip is firing, or just stop it from reappearing when I close the modal?

The Dialog widget has an open() event. I'd be inclined to us it to disable tooltips (like so), and re-enable them on close() by naming your init function and calling it.
Something like:
$('.dialogSelector').dialog({
open: function( event, ui ) {
$('.tooltipSelector').tooltip('disable');
}
});
$('.dialogSelector').dialog({
close: function( event, ui ) {
$('.tooltipSelector').tooltip();
// OR
myTooltipFunction();
}
});

I was having the same problem. What solved it for me was adding an 'Ok' buton
$("#dialog").dialog({
resizable: false,
autoOpen: false,
height: 200,
width: 440,
modal: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});

How can I execute some code if jQuery dialog was closed on escape?

I have a jQuery dialog and I need to execute some_code() when I press Esc or click the Cancel button. The latter is easy to implement, I just add define a property of the buttons object:
$('#mydialog').dialog({
closeOnEscape: true,
close: function(event, ui) {
//some_code();
$(this).dialog('destroy')
},
buttons: {
"OK": function() {
$(this).dialog("close");
},
"Cancel": function() {
some_code();
$(this).dialog("close");
}
}
});
But how can I execute some_code() after pressing Esc? This function must not be called clicking the OK button, so I cannot simply place it in the close event.

After googling around without finding an answer, I started looking into close: function(event, ui) part and found the solution using event.originalEvent (JSFiddle):
close: function(event, ui) {
// some_code();
if (event.originalEvent) {
// triggered by clicking on dialog box X or pressing ESC
// not triggered if a dialog button was clicked
some_code();
}
$(this).dialog('destroy')
}

modal box change title and button names in runtime

I want to be able to change the title of my modal and the buttons on run time.
currently I have this
I have actions either approval or Deny
var recButton = actions =='approval' ? 'Approve' : 'Deny';
$("#dialog").dialog(
{
modal : true,
buttons : {
'update all' : function() {
// window.location.reload();
// $( this ).dialog( "close" );
//do something here
},
Cancel : function() {
$(this).dialog("close");
}
}
}); //dialog
});
I also tried to do this for button
$("#dialog").dialog(
{
modal : true,
buttons : {
recButton : function() { ...
but in modal it didn't translate well and just said recButton instead of the variable value. Also I need to change title too.
Update: got title working by simply title:

Hey Autolycus: try this man: working demo http://jsfiddle.net/C4A9b/10/
Please use firebug to check the element id / class:
$('.ui-dialog-title').html("HULK is awesome"); should do the trick.
Hope it helps :)
code
$(document).ready(function() {
$('#theLink').click(function(){
$( "#forgot-dialog" ).dialog( "open" );
});
$( "#forgot-dialog" ).dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"ChangeTitle": function() {
alert("Title before cahnge ==> " + $('.ui-dialog-title').html());
$('.ui-dialog-title').html("HULK is awesome");
// document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
});
OR
var formname = "form_name_here";
$("#ui-dialog-title-"+formname).innerHTML = "Hulk is awesome title";
Below Image show before and After.
Image before clicking changetitle button
After clicking change title

Return value of jquery UI dialog Box

You may find solution over this in many posts(Post 1 , Post2 ), but their solution not working for me.
Here is the normal jquery dialog box written by me.
$("#dialog").dialog({
autoOpen:false,
buttons:{
"ok":function(){
$(this).dialog("close");
return true;
},
"cancel":function(){
$(this).dialog("close"); return false;
}
}
});
I will open the dialogbox with code:
var returnVal=$("#dialog").dialog("open");
I need to return false,if user clicks 'cancel' and return true if user clicks 'ok'.
var returnVal=$("#dialog").dialog("open");
I NEED returnVal to return boolean value(true/false), but it returns javascript object.

You cannot return something from the OK / cancel functions as they are essentially event handlers that are only processed upon the click of a button.
Use a separate function to process the result :
$mydialog = $("#dialog").dialog({
autoOpen: false,
buttons: {
"ok": function() {
$(this).dialog("close");
processResult(true);
},
"cancel": function() {
$(this).dialog("close");
processResult(false);
}
}
});
$mydialog.dialog("open");
function processResult(result) {
alert(result);
}
Working example : http://jsfiddle.net/nz2dH/

I have implement Yes/No confirmation dialog with custom message and callback function like this. This is useful, if you like to use the same dialog for various purposes.
<script type="text/javascript">
// prepare dialog
$(function () {
$("#confirm-message-dialog").dialog({
autoOpen: false,
modal: true,
closeOnEscape: false,
buttons: {
Yes: function () {
$(this).dialog("close");
$(this).data("callback")(true);
},
No: function () {
$(this).dialog("close");
$(this).data("callback")(false);
}
}
});
});
// open dialog with message and callback function
function confirmMessageDialog (message, callback) {
$('#confirm-message-dialog-message').text(message);
$('#confirm-message-dialog').data("callback", callback).dialog("open");
};
</script>
<!-- The dialog content -->
<div id="confirm-message-dialog" title="Warning">
<p id="confirm-message-dialog-message"></p>
</div>
Hope that this helps others as well :)