We Keep Coding

jQuery dialog bug?

I am using jQuery UI dialog inside a function that is called by onClick event:
function showInCampaignOverlayBox(content_url) {
$("#cpd-overlaybox-content").html('<img src="../daten/imgs/loading_bar_5.gif" class="cpd-overlaybox-centered-loader">');
$("#cpd-overlaybox-content").attr('src', content_url);
$("#cpd-overlaybox-dlg-header-label").html("Contenunit bulk edit ");
$("#cpd-overlaybox-dialog").dialog({
confirmationType: null,
width:'90%',
modal: true,
draggable: false,
resizable: false,
dialogClass: 'view-cpd-overlaybox-dialog',
close: function() {
$("#cpd-overlaybox-content").attr('src', '');
$(this).dialog("destroy");
}
});
$('.cpd-overlaybox-element-exit_js').live('click', function(){
$('span.ui-icon.ui-icon-closethick').click();
});
}
For some reason sometimes appears that error:
Cannot read property 'appendTo' of undefined
and it refers to this line code inside JQuery UI widget library:
var c = (this.oldInstances.length ? this.oldInstances.splice(0, 1)[0] : b("<div></div>").appendTo ...
I figured out that this.oldInstances is not defined, how is possible?

Could you provide the jQuery version you are using?
Anyway you should replace live() with on() like this:
$('.cpd-overlaybox-element-exit_js').on('click', function(){
$('span.ui-icon.ui-icon-closethick').click();
)};
live() has been deprecated long time ago. 1

create jquery dialog from javascript object

I have an javascript / jquery object that renders html - a div with a table and an edit button, and a jquery popup dialog.
I have always called the jquery dialog in $(document).ready(function(){});
Is it possible to create the dialog when I create the object.
in other words
object = new newTable('div_id');
and in the object there is
$(document).ready(function()
{
$( "#" + this.popup_id ).dialog(
{
autoOpen: false,
height: 600,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Next": function()
{
process_account_wizard('next');
},
"Skip": function()
{
process_account_wizard('skip');
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
});
so when the document is ready the objects sets up the dialog.
An alternate question is can I automatically run initialization code for an object once the page is loaded?
Edit: I have confirmed I can first create the object then run object.init() in the document ready function and the dialog works correctly. Trying to avoid this an make the object do it automatically.
I might have to edit this question a few times to figure out how to ask it. Thanks for your help

Basically you want to convert your object variable (though I'd want to think up a more appropriate name than "object") and initialise the dialog against that.
So, within whatever function calls object = new newTable('div_id'); paste your dialog initialisation from your question replacing -
$( "#" + this.popup_id ).dialog(
with
$(object).dialog(

Get underlying element in jQuery dialog

I would like to attach a jQuery dialog to it's current parent (let's say, because it contains inputs and it's parent is a child in the form).
So the problem is illustrated here:
http://jsfiddle.net/pprrm4st/2/
I definetly need to find a .container of the current element and attach the dialog to it.
appendTo: $(this).closest('.container'), //I thougnt $(this) would be current .element
Otherwise is there a way to tell jQuery not to move .element nowhere?

this is not the element in that scope, you should note that there are no function calls that would set the thisvalue.
Here's how to solve it using an each loop, where this would be the element etc.
$(".element").each(function() {
$(this).dialog({
modal: true,
autoOpen: false,
appendTo: $(this).closest('.container'),
buttons: {
"I've read and understand this": function() {
$(this).dialog("close");
}
}
});
});
$('a').click(function(){
$(".element").dialog('open');
});
FIDDLE

This also does the trick if you don't wanna have a loop:
$(".element").dialog({
modal: true,
autoOpen: false,
buttons: {
"I've read and understand this": function() {
$(this).dialog("close");
}
}
}).dialog( "option", "appendTo", $(".element").closest('.container') );
$('a').click(function(){
$(".element").dialog('open');
});
or even shorter (and cheaper, because you only traverse once the DOM looking for .element):
var elem = $(".element")
elem.dialog({
modal: true,
appendTo: elem.closest('.container'),
autoOpen: false,
buttons: {
"I've read and understand this": function() {
$(this).dialog("close");
}
}
})
$('a').click(function(){
elem.dialog('open');
});

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 () {
------
}
}
}
});

jquery ui - making dialogs more "dynamic"?

I have a page that uses multiple dialogs for different things. Some dialogs may have buttons that others do not while other may need to be a different height than another... All of them have a set of params that will not change. My question, can I have a default like:
$('.someElement').dialog({
width: 999,
show: 'slide',
hide: 'slide',
ETC: 'some other option'
});
and use it for all of my dialogs, then pass buttons or height to it dynamically when I open a dialog? It just seems wrong to have something like the above for every dialog I need...
Thanks!

You could create a wrapper function for this:
function showDialog(target, options){
options.width = 999;
options.show = 'slide';
options.hide = 'slide';
$(target).dialog(options);
}
And then you would just call the function when you want to create a dialog. You could even get fancy and turn it into a jQuery plugin if you really want to...

You can use the "option" method (which takes an object, of the same format), like this:
$('.someElement').dialog({
width: 999,
show: 'slide',
hide: 'slide',
autoOpen: false
});
$('.someElement').dialog('option', {
buttons: { "Ok": function() { $(this).dialog("close"); } },
height: 400
}).dialog('open');
You can see a demo here, this just sets whatever options you want before calling the open method.