We Keep Coding

jquery dialog needs to click twice to close

I have been trying to setup a div to popup using jquery dialog
First, when user clicks on the button and opens the dialog then when he close the dialog it closes in the first click.
The second time when he tries to close the dialog it will again open the same popup and he needs to click the close button again to get it closed.
https://jsfiddle.net/xwpwku1w/31/
jQuery:
function ShowMyContainerDivForSC(containerID, title, width, height) {
if ($(containerID).data('uiDialog'))
$(containerID).dialog('destroy');
$(containerID).dialog({
width: width,
draggable: true,
height: height,
resizable: false,
title: title,
modal: false,
open: function (event, ui) {
$(this).show();
},
close: function (event) {
if (typeof AfterClose == "function") {
AfterClose(containerID);
}
//$(this).remove();-- commented cause it just removes the element.
}
});
return false;
}

Modified your code, var containerID = "#mpopup"; now works as expected for me https://jsfiddle.net/xwpwku1w/33 please check.
side note - would recommend you to save $(containerID) in a variable as it used 3 times, https://jsfiddle.net/xwpwku1w/34

find a element in jQuery dialog after it opens

I'm creating a dialog on the fly. What I'm trying to do next is to bind some of the inputs with .datepicker(), but I can't seem to find the inputs at all. What I'm I missing here?
JSFIDDLE
function createDialog(top, dialog_width, data) {
$('<div></div>')
.addClass('add-dialog')
.appendTo('body')
.dialog({
title: 'test',
closeText: '<i class="fa fa-times"></i>',
close: function () {
$(this).remove();
},
open: function (event, ui) {
//has the full html with the inputs
console.log(this);
//trying to get them
var inputs = $(this).find('input');
console.log(inputs.length);
//also tried this, no luck
//$(this).parent().promise().done(function() {
// var t = $(this).find('input');
//});
},
modal: true,
width: dialog_width,
position: ['center', (top - 12)],
draggable: false,
resizable: false
}).html(data);
}

Simply change the initialization order.... add the html, then initialize the dialog
$('<div></div>').html(data).dialog({ /*opts*/})
You are adding the html after the dialog is initialized so the open event has already occurred and there is no element yet to be found
DEMO

You can asign a class to each element you need, something like:
<input type='text' class='needIt'/>
and then use:
$(this).find('.needIt')

You need to save reference to the jquery object after it has been inserted into DOM, then get reference to jquery UI dialog instance. And this instance has many useful properties. Example:
$('form').append($body); // I've appended dialog as last element inside form in my document, $body is markup, received from AJAX
$body.dialog({...}); // I've turned markup into jquery UI dialog
var dialogInstance = $body.dialog('instance'); // I receive reference to jquery UI dialog instance in any place, for instance, button click event
dialogInstance.uiDialogButtonPane.hide(); // I can access button pane in the dialog and many other objects, like caption area, etc.

try this add html after appendTo()
function createDialog(top, dialog_width, data) {
$('<div></div>')
.addClass('add-dialog')
.html(data)// added html here
.appendTo('body')
.dialog({
title: 'test',
closeText: '<i class="fa fa-times"></i>',
close: function () {
$(this).remove();
},
open: function (event, ui) {
//has the full html with the inputs
console.log(this);
//trying to get them
var inputs = $(this).find('input');
console.log(inputs.length);
//also tried this, no luck
//$(this).parent().promise().done(function() {
// var t = $(this).find('input');
//});
},
modal: true,
width: dialog_width,
position: ['center', (top - 12)],
draggable: false,
resizable: false
});
}

Pop up email a friend window on site j query .dialog

Can some please help me with this. I created a button where a user can click on and it opens a new window which allows the person to fill out the forms on the page and share a property with a friend...
instead i want it to be a pop up dialog box which will have the main page in the background .. here is my code can some one please help
$('.profileHeader').after('<div id="emailWrapper" class="right"/>');
$('#emailWrapper').prepend($('li.five'));
$('li.five').css({"width": 142,"height": 50});
$("li.five").addClass("nice medium orange radius button right headerEmailAFriend");
$(".five > .event-click").css({"border-style": "none"});
$(".five > .event-click").css({"color": "#ffffff"});
$('.#emailWrapper').click(function () {
$("#emailWrapper").dialog("open");
event.preventDefault();
href = $(this).attr('href');
console.log(href);
url.dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
});
I CHANGED UP MY CODE THE BOTTOM PART I REALIZED I NEEDED TO REMOVE THE DOT... NEW ERROR IS THAT WHEN I CLICK THE BUTTON NOW THE BUTTON GOES AWAY HERE IS THE CODE
$('#emailWrapper').click(function() {
event.preventDefault();
$('#emailWrapper').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
OK THIS IS WHAT I HAVE NOW BASED ON WHAT I GOT FROM THIS FORM... STILL HAVE AN ERROR
< div id = "emailWrapper" > < p > emailWrapper < /p>
</div > $('#emailWrapper').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: tue
});
$("#emailWrapper").dialog("open");
$('#emailWrapper > li > a').bind('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('body').prepend('<div id="loadEmailFriend" class=""/>');
$('#loadEmailFriend').load(url, function () {
$('#loadEmailFriend').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
});
$("#emailWrapper").dialog("open");
});
Here is the new code i came up with.. problem now is that nothing comes up in a dialog box. I am trying to take the information that comes up on another page (email a friend) and make it into a dialog box which just pops up on the same page.

Your error is here
$('.#emailWrapper').click(function () {
From the rest of your code, you appear to be referring to an element with an ID of emailWrapper. You want to remove the dot from your selector. Inside your function, you refer to an event object. You have to pass this in your function.
$('#emailWrapper').click(function (event) {
EDIT
You're second issue is that you're trying to make your button be the dialog. You really need to create a div that will contain your dialog content. For example
<div id="mydiv">
<p>Display some stuff here</p>
</div>
Then define it as
$('#mydiv').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
Then open it inside your click event
$("#mydiv").dialog("open");

jQuery UI dialog box does not appear

I'm pretty much a total noob to JavaScript and jQuery and I'm having trouble getting a basic dialog box working. Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 500,
height: 400
});
dialog.hide();
});
function showDialog() {
$("#dialog").dialog("open");
}
$("ui-widget-overlay").click(function() {
$(".ui-dialog-titlebar-close").trigger("click");
});
</script>
<div id="dialog">
Dialog text.
</div>
<button onclick="showDialog()">Show Dialog</button>
When I click the button, the title bar of the dialog comes up and the background of the page dims, but there are two problems:
The body of the dialog does not show (all that shows is the title bar)
When I click outside of the dialog, the dialog does not close. I have to click the "x" in the corner in order for the dialog to close.
I've been reading tons of related questions on here, but nothing I try seems to work. Any advice?

I believe the problem you're having is from this line:
dialog.hide();
What I would suggest is removing all of the dialog content from the dialog div and populating it when you actually show the dialog.
<div id="dialog"></div>
function showDialog()
{
$("#dialog").html("Dialog Text.");
$("#dialog").dialog("open");
}
As for handling the close part, have you tried nesting everything in the main page in a <div> of its own and then handling that click event?
<div id="mainPageDiv">
</div>
$("#mainPageDiv").click(function(){
$("#dialog").dialog("close");
});

Just use a modal dialog and close the dialog when they click the overlay. Also, you should not need to put any code in $(document).ready for this.
function showDialog() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
open: function () {
$('.ui-widget-overlay').bind('click', function () {
dialog.dialog('close');
});
}
});
}
Demonstration

I see your:
$("ui-widget-overlay").click(
perhaps should select a class:
$(".ui-widget-overlay").click(
which does not happen as it does not exist, so you need to hook it to the document.
and the dialog.hide(); is not needed as it hides it automatically when it becomes a dialog
SO you should have:
$(document).on('click',".ui-widget-overlay", function() {
$(".ui-dialog-titlebar-close").trigger("click");
});
more simply:(if you have no other dialogs you need to deal with this way)
$(document).on('click',".ui-widget-overlay", function() {
$("#dialog").dialog("close");
});
sample fiddle to show full reworked code: http://jsfiddle.net/GrFE3/2/

I am adding this as an additional answer as it goes about this differently, changing the markup, removing the in-line event handler in the markup, uses your button, and uses your dialog variable (differently than you, but...
<div id="dialog">
Dialog text.
</div>
<button id="showDialog">Show Dialog</button>
and the code for that markup:
$(document).ready(function() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 500,
height: 400
});
$('#showDialog').click(function() {
dialog.dialog("open");
});
$(document).on('click', ".ui-widget-overlay", function() {
dialog.dialog("close");
});
});

Script within a jQueryUI modal dialog box only works once

I have a table that, when any row is clicked, launches a jQueryUI modal dialog box to allow users to edit that record. I use the following script which seems to work, successfully loading the relevant record's details in using AJAX:
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
dialog.dialog('open');
}
);
//prevent the browser to follow the link
return false;
});
It works ok the first time I click on a record, but if I click cancel and try to edit another record, the dialog box does appear (with the correct record details) however, no scripts within the dialog box work - eg: there's a jqueryUI datepicker input and some validation.
There are no javascript errors and, from my limited understanding of FireBug, I can't spot anything going wrong so I would appreciate some advice how to proceed, thanks!
EDIT: Argh! Sometimes, it takes something like typing it out here to spot the obvious. I just realised that the DIV created for the dialog box doesn't get destroyed when the box closes. I've added a line to do this and it now works. Thanks for listening. :)
For future reference, I added an ID to the DIV created in 'var dialog' and removed it in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
I'd still appreciate if anybody suggests a better way to handle this behaviour.

I fixed it: the DIV created for the dialog box doesn't get destroyed when the box closes.
I added an ID to the DIV created in 'var dialog' and removed the DIV in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}

You can create the dialog at one time only, not on every load of its content, just set the autoOpen to false.
<div id="dialog">
<div id="content" style="display:hidden" title="Record details:"></div>
</div>
$('#dialog').dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
// load remote content
$('#content').load(url);
$('#dialog').dialog('open');
return false;
}};