We Keep Coding

Add a dialog using jQuery using html generated by jQuery

I want to add a jQuery dialog using an string containing html code stored in a variable. Is it possible? Here is some of the tried code.
$("#remove-post").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true
});
$("body").delegate("a.delete-post", "click", function (e) {
e.preventDefault();
button = $(this);
remove_dialog_html = '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
$('#remove-post').dialog("open");
});

You can simply change the html of this element.
$('#remove-post').html('<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>');
jsFiddle Demo
Edit:
You can also avoid adding the dialog to the original HTML file, by creating and destroying it when you open and close the dialog.
$('<div></div>')
.appendTo('body')
.html(htmlContent)
.dialog({
autoOpen: true,
height: 'auto',
width: 'auto',
modal: true,
close: function (event, ui) {
$(this).remove();
}
});
jsFiddle Demo

You cannot initialize jQuery dialog like this since it is not in the DOM at the page load time (where jQuery initialize the stuff).
What you have to do is that initialize dialog after adding the html to the DOM.
Just before $('#remove-post').dialog("open");

Are you looking for something like this. Check the fiddle below. Changed the code as per your requirement if this is what you are looking for.
http://jsfiddle.net/8R7xA/1/
$("#remove-post").dialog({
autoOpen: false,
height:'auto',
width:'auto',
modal: true
});
$(document).ready(function(){
var remove_dialog_html= '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
$('#remove-post').html(remove_dialog_html);
$('#remove-post').dialog("open");
});

Please Refer this link link
Thanks!!
Edit: Try this:
$(document).ready(function () {
$("#divModifyDatesDialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
position: "center",
width: 550,
buttons: {
"Yes": {
click: function () {
-------------
},
"No": {
click: function () {
------
}
}
}
});

How to Scroll Flow JQuery UI Dialog

I have been trying to use follow scroll to move dialog together with user scroll but no success
<script>
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-report-problem-form" ).dialog({
autoOpen: true,
height: 550,
width: 700,
modal: true,
buttons: {
"<?= $this->translate('REPORT_PROBLEM'); ?>": function() {
reportProblem();
},
"<?= $this->translate('CANCEL'); ?>": function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$.scrollFollow("#dialog-report-problem-form",{speed: 10});
});
</script>
.
<div id="dialog-report-problem-form" title="<?= $this->translate('REPORT_PROBLEM'); ?>">
<?= $this->form ?>
</div>
I have been receiving the error
box.cont.offset() is null
Does anyone knows how could fix or another jquery based solution to follow user scroll?

The plugin scrollFollow seems to be pretty buggy and development discontinued (last update in 2008)
when you use it with $.scrollFollow(), the default option values are not set so you get a lot of errors like the one you got.
when using it with $(...).scrollFollow, the main option container is not obtained correctly so it does not really work...
Here is a small script that will move the dialog around when the window is scrolled:
(function(wnd, $) {
// query for elements once
var $dlg = $("#dialog-report-problem-form").parent(),
$wnd = $(wnd),
// get the initial position of dialog
initialTop = $dlg.offset().top - $wnd.scrollTop();
$wnd.scroll(function() {
// when qscrolling, animate the 'top' property
$dlg.stop()
.animate({
"top": ($wnd.scrollTop() + initialTop) + "px"
}, "slow");
})
.resize(function() {
// in case of resize, re-set the initial top position of the dialog
initialTop = $dlg.offset().top - $wnd.scrollTop();
});
// if you close/open the dialog, it will mess up the 'initialTop'
// this will re-set the correct 'initialTop' when the dialog opens again
$dlg.bind('dialogcreate dialogopen', function(e) {
initialTop = $dlg.offset().top - $wnd.scrollTop();
});
})(window, jQuery);
Working example on jsfiddle.

JQuery popup issue in IE

IE shows scrollbars when JQuery Dialog pops up. FF doesnt show scrollbars. Whats wrong with IE CSS?
<div id="disablebg" style="display: none;overflow:hidden;">
<uc1:CreateInqGeneral ID="CreateInqGeneral1" runat="server" />
</div>
function ShowDialog() {
$("#disablebg").dialog({
resizable: false,
modal: true,
width: "550px"
});
}

I use something like this to avoid this problem. You can easily modify it to hide the horizontal scrollbar only.
function hideScrollBars() {
var top = $('html').scrollTop();
var left = $('html').scrollLeft();
$('html').css('overflow', 'hidden');
$('html').scrollTop(top);
$('html').scrollLeft(left);
}
function showScrollBars() {
var top = $('html').scrollTop();
var left = $('html').scrollLeft();
$('html').css('overflow', 'auto');
$('html').scrollTop(top);
$('html').scrollLeft(left);
}
$.extend($.ui.dialog.prototype.options, {
bgiframe: true,
resizable: false,
modal: true,
open: function () { hideScrollBars(); },
close: function () { showScrollBars(); }
});
Note: this way I set the open and close events globaly for all dialog instances. If you overwrite the open/close events on specific instances, you have to call the hideScrollBars/showScrollBars functions.

Make draggable jquery dialog, with the titlebar hidden

I am looking to create a Dialog with no titlebar that can still be draggable via the content-pane. I could possibly attach a draggable event to a button/handle but I would prefer to drag the dialog without the need for it and have the cursor change to the correct draggable pointer when over the content-pane..
heres the code so far simplified
$('#prototypeCalendarDialog').dialog({
autoOpen:true,
width:400,
height: 700,
show: "slide",
hide: "slide",
dialogClass: 'calendarDialog',
minWidth: 400,
minHeight: 500,
position: [0,112],
buttons: {
"Okay": function(){
$(this).dialog("close");
},
"Refresh": function() {
// refresh function here
},
"Next Day": function(){
// next day function here
}
},
open: function(){
var buttons = $('.calendarDialog .ui-dialog-buttonpane').children('button');
var titleBar = $('.calendarDialog .ui-dialog-titlebar').hide();
////ADD ICON CLASS ACCEPTANCE
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon-calendar');
////CHANGE THE BUTTONS DEFAULT STATE
$(buttons[0]).removeClass('ui-state-default').addClass('ui-state-submit');
////APPEND THE ICONS TO THE BUTTON
$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-refresh'></span>");
$(buttons[2]).append("<span class='ui-icon ui-icon-arrowthick-1-e'></span>");
}
});

why do you need a dialog pane if all you are doing is removing the things that make it a dialog.
do make a title-less dialog you can do this:
var dialog = {
init: function(){
$('#prototypeCalendarDialog').draggable().resizeable();
return this;
},
runOpen: function(){
//in here put all your dialog open options
return this;
}
}
dialog.init().runOpen();

Put this in your CSS
.ui-dialog-titlebar{
display:none !important;
}

jQuery UI Dialog Box - does not open after being closed

I have a problem with the jquery-ui dialog box.
The problem is that when I close the dialog box and then I click on the link that triggers it, it does not pop-up again unless I refresh the page.
How can I call the dialog box back without refreshing the actual page.
Below is my code:
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog("close"); } },
close: function(ev, ui) { $(this).remove(); },
});
});
Thanks

You're actually supposed to use $("#terms").dialog({ autoOpen: false }); to initialize it.
Then you can use $('#terms').dialog('open'); to open the dialog, and $('#terms').dialog('close'); to close it.

I solved it.
I used destroy instead close function (it doesn't make any sense), but it worked.
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
close: function(ev, ui) { $(this).close(); },
});
});
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

on the last line, don't use $(this).remove() use $(this).hide() instead.
EDIT: To clarify,on the close click event you're removing the #terms div from the DOM which is why its not coming back. You just need to hide it instead.

I believe you can only initialize the dialog one time. The example above is trying to initialize the dialog every time #terms is clicked. This will cause problems. Instead, the initialization should occur outside of the click event. Your example should probably look something like this:
$(document).ready(function() {
// dialog init
$('#terms').dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons: { "Close": function() { $(this).dialog('close'); } },
close: function(ev, ui) { $(this).close(); }
});
// click event
$('#showTerms').click(function(){
$('#terms').dialog('open').css('display','inline');
});
// date picker
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
I'm thinking that once you clear that up, it should fix the 'open from link' issue you described.

For me this approach works:
The dialog may be closed by clicking the X on the dialog or by clicking 'Bewaren'. I'm adding an (arbitrary) id because I need to be sure every bit of html added to the dom is removed afterwards.
$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
title: 'Opdracht wijzigen',
show: 'clip',
hide: 'clip',
minWidth: 520,
width: 520,
modal: true,
buttons: { 'Bewaren': dossier_edit_form_opslaan },
close: function(event, ui){
$(this).dialog('destroy');
$('#dossier_edit_form_tmp_id').remove();
}
});

<button onClick="abrirOpen()">Open Dialog</button>
<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
title: "Dialogo de UI",
autoOpen: false,
close: function(ev, ui){
$(this).dialog("destroy");
}
function abrirOpen(){
$dialogo.dialog("open");
}
});
//**Esto funciona para mi... (this works for me)**
</script>

This is a super old thread but since the answer even says "It doesn't make any sense", I thought I'd add the answer...
The original post used $(this).remove(); in the close handler, this would actually remove the dialog div from the DOM. Attempting to initialize a dialog again wouldn't work because the div was removed.
Using $(this).dialog('destroy') is calling the method destroy defined in the dialog object which does not remove it from the DOM.
From the documentation:
destroy()
Removes the dialog functionality completely. This will return the element back to its >>pre-init state.
This method does not accept any arguments.
That said, only destroy or remove on close if you have a good reason to.

$(this).dialog('destroy');
works!

.close() is mor general and can be used in reference to more objects. .dialog('close') can only be used with dialogs

I use the dialog as an dialog file browser and uploader then I rewrite the code like this
var dialog1 = $("#dialog").dialog({
autoOpen: false,
height: 480,
width: 640
});
$('#tikla').click(function() {
dialog1.load('./browser.php').dialog('open');
});
everything seems to work great.

I had the same problem with jquery-ui overlay dialog box - it would work only once and then stop unless i reload the page. I found the answer in one of their examples -
Multiple overlays on a same page
flowplayer_tools_multiple_open_close
- who would have though, right?? :-) -
the important setting appeared to be
oneInstance: false
so, now i have it like this -
$(document).ready(function() {
var overlays = null;
overlays = jQuery("a[rel]");
for (var n = 0; n < overlays.length; n++) {
$(overlays[n]).overlay({
oneInstance: false,
mask: '#669966',
effect: 'apple',
onBeforeLoad: function() {
overlay_before_load(this);
}
});
}
}
and everything works just fine
hope this helps somebody
O.

The jQuery documentation has a link to this article
'Basic usage of the jQuery UI dialog'
that explains this situation and how to resolve it.