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(
I am using ckeditor in Jquery accordion, I have a button in every accordion after ckeditor.
On that save button's click, I am checking the content of ckeditor, if value is none, then I want to show jquery's dialog box with proper error message.
But It is giving me error
Error: TypeError: $(...).dialog is not a function
My code to add ckeditor in accordion
$("#question-container textarea").each(function(){
CKEDITOR.replace(($(this).attr('id')), subjetive_config);
});
My code to call dailog in case of error
var editor = CKEDITOR.instances[textarea_id];
if (editor) { editor.destroy(true); }
$("#dialog").html("Answer can not be empty!");
$("#dialog").attr('title', 'Error');
$("#dialog").dialog({draggable: false,resizable: false,modal: true,buttons: { "Close": function() {
$(this).dialog("destroy");
}
}
});
}
Any pointer or suggestions would be great
Thanks
Make sure that you have included the jQuery library file.
In your code, you have missed the braces while initializing the dialog.
This will help you:
$("#dialog").dialog({
draggable: false,
resizable: false,
modal: true,
buttons: [
{
text: "Close",
click: function() {
$( this ).dialog( "destroy" );
}
}
]
});
Also have a look at Dialog Widget.
thsi is not a jquery ui question but a JavaScript object question
function uiDialog()
{
...............
...............
$('#dialog ').dialog({
width:'auto',
height :'auto',
resizable: false
});
..............
..............
}
Above is a jquery ui dialog code. Now everywhere i want a dialog am calling uiDialog(). Now ui has so many options that are rarely required. So i am considering passing a object as a parameter and appending it to this default data but how can i do it .can i do
$('#dialog ').dialog({
width:'auto',
height :'auto',
resizable: false,
myObject
});
Will this work or can you suggest any other way if this fails
Use the jQuery.extend(); function.
$('#dialog ').dialog(
$.extend(
{
width:'auto',
height :'auto',
resizable: false
},
myObject
)
);
I definitely don't think of myself as a jQuery/javascript expert, but I know enough programming to get by - but on this project I ran into a problem where jQuery UI fails to initialize the 2nd dialog. I have 2 if statements to test before initializing each of them, but only the 1st if statement seems to be kicking in.
$(document).ready(function(){
// regular dialog box
$("#dialog").dialog({autoOpen: false, modal: true});
$("#dialog_link").click(function(){
$("#dialog").dialog("open");
return false;
});
// confirm box
if($.cookie("modal_confirm").length > 0 && $.cookie("modal_confirm")!="") {
$("body").prepend(''+$.cookie("modal_confirm")+'');
var g = $("#confirm");
g.html( g.html().replace(/\+/g," ") );
$("#confirm").dialog({
modal: true,
stack: true,
buttons: {
'OK': function() { window.location.replace($.cookie("confirmGo"))); (this).dialog('close'); },
Cancel: function() { $(this).dialog('close'); }
},
close: function(){ $.cookie("modal_confirm",null); $.cookie("confirmGo",null);}
});
}
// alert box
if($.cookie("alert").length > 0 && $.cookie("alert")!="") {
$("body").prepend(''+$.cookie("alert")+'');
var f = $("#alert");
f.html( f.html().replace(/\+/g," ") );
$("#alert").dialog({modal: true, stack: true, buttons: {'OK': function() {$(this).dialog('close');}}, close: function(){ $.cookie("alert",null); }});
}
});
In this case, the alert modal wouldn't open while the confirm opens. If I move it in front of the confirm, then the alert would open but the confirm wouldn't open.
Is this a jQuery UI problem? If so, is there a workaround?
Please help and thanks in advance.
You had an extra parenthesis on line 18 and forgot the $ in front of (this) later on the same line. It should read:
'OK': function() { window.location.replace($.cookie("confirmGo")); $(this).dialog('close'); },
Used jslint to locate those errors.
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.