Develop Reference

jquery dialog title and close bar remove

I have a jquery dialog with title and close bar. After that I am loading an another dialog called for confirmation. In my confirmation dialog UI I don't want the 'title' and 'close' button. If I remove title and close button using dialog 'open' method, in my confirmation dialog it's working fine with the title remove changes. But my backend dialog also getting removed with the title and close button. I only need that for the current dialog not for the parent one.
I am here attaching the UI for your reference.
In the first image, I am initializing with the jquery dialog with the title and close button.
In the second one, I am removing title and close with open function while init the dialog.
In my second dialog init,
open: function (event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).remove();
$(".ui-dialog-titlebar", ui.dialog | ui).remove();
},
If, I do remove like this, I am getting removed title all the dialog. I need to remove title for the specific dialog.Kindly help me out of this.

Okay, I found your issue. You were generalizing the title. You need to specifically do it. Try this:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false,
height:'300', // No I18N
width: '300', // No I18N
resize: false,
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
$( "#dialog2" ).dialog({
autoOpen: false,
height:'100', // No I18N
width: '100', // No I18N
resize: false,
open: function (event, ui) {
// Do not generalize here!
$("#ui-id-2").closest(".ui-dialog-titlebar").remove();
},
});
$("#opener1").click(function() {
$("#dialog2").dialog('open');
});
});
Preview
Album: http://imgur.com/a/xinCe#0
Fiddle: http://jsfiddle.net/PTXZV/65/

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

jQuery - cannot call methods on dialog prior to initialization

This one is really bugging me. I'm getting an error in my console of Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
$( function() {
$('#search_all_notes_input').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
/* Make the Search div a button and open dialog on click */
$( "#search_all_button" ).button().click(function() {
$( "#search_all_notes_input" ).dialog( "open" );
});
});
$('#submit_search_all_button').click( function () {
var searchText = $('#search_all_text').val();
var query = location.search.split('=');
var urlMrn = query[1];
formData = { mnr: urlMRN, search_text: searchText };
console.log(formData);
//$.post('note_search.php', formData, getMatchedNotes(data));
$(this).dialog('close');
});
Any ideas? I'm using a button element inside my dialog div instead of a custom dialog button. Also, the script is loaded at the very end of my HTML page

The problem is you're calling the dialog('close') on the #submit_search_all_button button, not the #search_all_notes_input element that you originally created a dialog on.
Instead of $(this).dialog('close');, use this:
$('#search_all_notes_input').dialog('close');

How do I pass a an element position to jquery UI dialog

I have a list of elements and when clicking on each one I would like my jQueryUI dialog box to pop up next to the list element that was clicked on.
$( "#selector" ).dialog({ draggable: false,
width: 250,
autoOpen: false,
position: [e.pageX,e.pageY] });
$(".openDialog").click(function(e){
console.log('I need the cooridnates x:'+e.pageX+' and y:'+e.pageY+'to be passed to the dialog box');
$( "#selector" ).dialog("open");
});
I can get the coordinates I need, but I'm having trouble passing them to the dialog init.
Would love some insight into this.
Thanks in advance!

Since you want to show the dialog next to the clicked element, you should defer setting the dialog's position until that information becomes available, i.e. in your event handler:
$("#selector").dialog({
draggable: false,
width: 250,
autoOpen: false
});
$(".openDialog").click(function(e) {
$("#selector").dialog("option", "position", [e.pageX, e.pageY])
.dialog("open");
});

Before showing the dialog again, try:
$("#selector").dialog("option", "position", [e.pageX, e.pageY]);

jquery-ui-dialog - How to hook into dialog close event

I am using the jquery-ui-dialog plugin
I am looking for way to refresh the page when in some circumstances when the dialog is closed.
Is there a way to capture a close event from the dialog?
I know I can run code when the close button is clicked but that doesn't cover the user closing with escape or the x in the top right corner.

I have found it!
You can catch the close event using the following code:
$('div#popup_content').on('dialogclose', function(event) {
alert('closed');
});
Obviously I can replace the alert with whatever I need to do.
Edit: As of Jquery 1.7, the bind() has become on()

I believe you can also do it while creating the dialog (copied from a project I did):
dialog = $('#dialog').dialog({
modal: true,
autoOpen: false,
width: 700,
height: 500,
minWidth: 700,
minHeight: 500,
position: ["center", 200],
close: CloseFunction,
overlay: {
opacity: 0.5,
background: "black"
}
});
Note close: CloseFunction

$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true,
buttons: {
"SUBMIT": function() {
$("form").submit();
},
"CANCEL": function() {
$(this).dialog("close");
}
},
close: function() {
alert('close');
}
});

$( "#dialogueForm" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window,
close : function(){
// functionality goes here
}
});
"close" property of dialog gives the close event for the same.

U can also try this
$("#dialog").dialog({
autoOpen: false,
resizable: true,
height: 400,
width: 150,
position: 'center',
title: 'Term Sheet',
beforeClose: function(event, ui) {
console.log('Event Fire');
},
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});

This is what worked for me...
$('#dialog').live("dialogclose", function(){
//code to run on dialog close
});

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
Because no one actually created an answer with using .on() instead of bind() i decided to create one.
$('div#dialog').on('dialogclose', function(event) {
//custom logic fired after dialog is closed.
});

add option 'close' like under sample and do what you want inline function
close: function(e){
//do something
}

If I'm understanding the type of window you're talking about, wouldn't $(window).unload() (for the dialog window) give you the hook you need?
(And if I misunderstood, and you're talking about a dialog box made via CSS rather than a pop-up browser window, then all the ways of closing that window are elements you could register click handers for.)
Edit: Ah, I see now you're talking about jquery-ui dialogs, which are made via CSS. You can hook the X which closes the window by registering a click handler for the element with the class ui-dialog-titlebar-close.
More useful, perhaps, is you tell you how to figure that out quickly. While displaying the dialog, just pop open FireBug and Inspect the elements that can close the window. You'll instantly see how they are defined and that gives you what you need to register the click handlers.
So to directly answer your question, I believe the answer is really "no" -- there's isn't a close event you can hook, but "yes" -- you can hook all the ways to close the dialog box fairly easily and get what you want.

You may try the following code for capturing the closing event for any item : page, dialog etc.
$("#dialog").live('pagehide', function(event, ui) {
$(this).hide();
});