I am trying to make my jQuery UI dialog close after 5 seconds, but the code below doesn't do anything, any suggestions? I did test it with alert("hellow") and it did work fine but the code below is not working.
success: function(data) {
$(data).dialog({
modal: true,
width: 900,
height: 600,
resizable: false,
title: thetitle,
draggable: false,
open: function(event, ui) {
setTimeout('$(this).dialog("close");', 5000);
}
});
Why isn't this closing my dialog after 5 seconds? It does not do anything.
You'll want to pass setTimeout an actual function, rather than a string.
setTimeout(function() {
$(data).dialog("close");
}, 5000);
When you pass a string, the code is eval'd, which I'm pretty sure sets this to the global object (which is why $(this).dialog would never work).
Note that this won't with the above way either (since again this is the global object at that point), but it's still considered much, much better form than passing a string to setTimeout.
What about jquery .delay()?
success: function(data) {
$(data).dialog({
modal: true,
width: 900,
height: 600,
resizable: false,
title: thetitle,
draggable: false,
open: function(event, ui) {
$(this).dialog("close").delay(5000);
}
});
var sT = setTimeout('$(this).dialog("close");', 5000);
Related
here is my code with jquery ui:
jQuery("#nodeliverydate").dialog({
resizable:false,
draggable:false,
modal:false,
buttons:[{text:"Close",click:function(){jQuery(this).dialog("close");}}]
});
It is a very simple code that using jquery dialog as an alert box. I defined one button to close the dialog. However, it runs in a very odd way that the dialog will contain many buttons, and the text on the buttons are all function names such as "each","all","clone","select","size", etc. And after I close it, if the dialog shows again, it will be normal. Does anyone have any idea about why this happens?
jQuery("#nodeliverydate").dialog({
modal: true, title: 'Delete msg', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
This work pretty well: Yes or No confirm box using jQuery
I need to display & as it is in Jquery dialog box's title bar but it is getting converted to &. So, the idea is to display the value as it is in dialog box title. it is working fine for everything but when I am using & or ' then it is getting converted to & or ' respectively. Below is my code:
var name = '&'
$('#testdialog')
.dialog(
{
title: name,
autoOpen: false,
width: 900,
height: 400,
scrollable: true,
draggable: true,
modal: true,
resizable: false,
open: function (event, ui) {
jQuery.ajaxSetup({ cache: false });
callTest();
},
close: function (event, ui) {
jQuery.ajaxSetup({ cache: false });
$('#testdialog').html('');
},
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});$('#testdialog').dialog('open');
I want to display the value of name variable as it is. I tried keeping the value in a div and used $("#divID").html() in title attribute but it did not work. Could you please help me on this?
Update your variable to the following and you should be good to go:
var name = '&'
For ' use:
var name = '''
I have a funciton that accepts a configuration object which in turn generates a modal dialog with jQuery UI like so:
function modalDialog(settings) {
var options = $.extend({
selector: '.dialog', // the dialog element selector
disabled: false, // disables(true) or enables (false) the dialog
autoOpen: false, // dialog opens automatically when called (true), (false) dialog hidden until .dialog(open) method called
closeOnEscape: true, // dialog closes when focused and ESC key pressed
closeText: 'close', // specifies text for close button
draggable: false, // (true) dialog draggable by the title bar
resizable: false, // dialog is resizable
height: 'auto', // height of dialog in px
minHeight: false, // min-height in px
maxHeight: false, // max-height in px
width: 300, // width of dialog in px
minWidth: 150, // min-width in px
maxWidth: false, // max-width in px
modal: true, // disables other items on page
hide: null, // the effect to be used when dialog is closed
show: null, // the effect to be used when dialog is opened
position: 'center', // specifies where dialog should be displayed: single string, array of co-ordiantes, array of string values
title: '', // dialog title. Any valid HTML may be used
zIndex: 1000, // starting z-index for the dialog
stack: true // specifies if dialogs will stack on other dialogs
}, settings || {});
$(options.selector).dialog({
disabled: options.disabled,
autoOpen: options.autoOpen,
closeOnEscape: options.closeOnEscape,
closeText: options.closeText,
draggable: options.draggable,
resizable: options.resizable,
height: options.height,
minHeight: options.minHeight,
maxHeight: options.maxHeight,
width: options.width,
minWidth: options.minWidth,
maxWidth: options.maxWidth,
modal: options.modal,
hide: options.hide,
show: options.show,
position: options.position,
title: options.title,
zIndex: options.zIndex,
stack: options.stack,
create: function(event, ui){
if (typeof options.createCall == 'function') {
options.createCall.call(this);
}
},
open: function(event, ui){
if (typeof options.openCall == 'function') {
options.openCall.call(this);
}
},
beforeClose: function(event, ui){
if (typeof options.beforeCloseCall == 'function') {
options.beforeCloseCall.call(this);
}
},
close: function(event, ui){
if (typeof options.closeCall == 'function') {
options.closeCall.call(this);
}
},
focus: function(event, ui){
if (typeof options.focusCall == 'function') {
options.focusCall.call(this);
}
}
});
}
There is probably going to be a lot of modals on the project i am working on so i thought that it would be tidy to store the configuration objects within an object literal rather than generate them on the fly. Something like this:
icisSite.modalStore = {
tradeFlowGraph: {
selector: '.rtx-TradeFlowGraphs',
title: 'Fertilizer Trade Flow graphs',
width: 800,
openCall: function(){
carouselLink
.eq(0)
.trigger('click');
}
}
}
Then the modal could be created by passing the reference to the stored object:
modalDialog(icisSite.modalStore.tradeFlowGraph);
The issue i am having is that the openCall method is not being invoked when passed to the modalDialog function in this manner. It does work when the configuration object is passed like this and i don't know why:
modalDialog({
selector: '.rtx-TradeFlowGraphs',
title: 'Fertilizer Trade Flow graphs',
width: 800,
openCall: function(){
carouselLink
.eq(0)
.trigger('click');
}
});
Whilst it is not an issue to pass the parameters like this it would be nice to have them all stored centrally in an object literal that is available all the time, rather than creating and passing objects ad hoc.
It seems as though bringing the icisSite.modalStore object literal into the jQuery scope fixes the issue.
So wrapping it in the factory function like so:
$(function(){
icisSite.modalStore = {
tradeFlowGraph: {
selector: '.rtx-TradeFlowGraphs',
title: 'Fertilizer Trade Flow graphs',
width: 800,
openCall: function(){
carouselLink
.eq(0)
.trigger('click'); } } } });
I have multiple images on a page, that pops up the related big image in a dialog box.
But when I click image 2, images 1 shows first before image 2 comes in, in the first .5 seconds.
How can I clear image 1 out completed when I close it?
I try destroy, but that kills the entire functionality when time to click image 2.
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
resizable: false,
position: 'middle',
draggable: false,
minWidth: '960',
maxheight:'500',
overlay: true,
modal: true,
show: "fade",
hide: "fade",
position:'top',
close: function(event, ui) {
$("#dialog").dialog("destroy");
}
});
});
.dialog('destroy') only removes the dialog capabilities from that div. you need to empty it!
close: function(event, ui) {
$("#dialog").empty().dialog("destroy");
}
edit: ahh, right, you want to keep the dialog, but empty it right? take off the .dialog('destory') then, just empty it.
close: function(event, ui) {
$("#dialog").empty();
}
I use remove instead of empty..
close: function(event, ui) {
$("#dialog").remove().dialog("destroy");
}
Never happen to me when making a dialog with jquery-ui. I have a div and when I make it a dialog with .dialog I get this error
[Exception... "String contains an invalid character" code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)" location: "http://localhost/include/jquery-1.5.1.min.js Line: 16"] { constructor=DOMException, code=5, more...}
I have jquery 1.5.1 with UI 1.8.13 custom with all the plugin inside.
This is the code for the dialog in document ready
$("#dialog").dialog({
bgiframe: true,
height: 200,
width: 150,
modal: false,
show: 'blind',
hide: 'blind',
resizable: false,
position: [270,150],
autoOpen: false,
zIndex: 997,
buttons: {
"Reset": function() {
}
}
});
and this is the div
<div id="dialog">some text</div>
I am experiencing the exact same problem only difference is that that in my code the whole options is coming from an JSON encoded server response using $.getJson:
$.getJSON(
'/get-dialog',
function(r){
$('<div>' + r.content + '</div>').dialog(r.options);
}
);
At the moment I added a key called buttons to the r.options object this exact same error appeared.
So the response (r) basicly looks like this:
content
"<form action="/editor">...</form>"
options
resizable false
width 600
modal true
buttons
Ok "function(){alert('test')}"
Removing the buttons from the r.options makes the error message go away. I tried several different key / values for the buttons but none of that seems to matter.
Using jQuery UI version 1.8.16 and jQuery version 1.6.2 .
After reading some further I found out that we are both making the same mistake. If you look at the jQuery UI Dialog documentation it gives the following example:
$( ".selector" ).dialog({ buttons: [
{
text: "Ok",
click: function() { $(this).dialog("close"); }
}
] });
(Source: http://jqueryui.com/demos/dialog/)
So you shouldn't be using key / value pairs but a sub array containing the keys text and click.
Since we both where doing this wrong (and I've found others with the same problem) I'm guessing that this has been changed over some version in jQuery UI. I am not sure when it was changed though.
So in your case the correct code would be:
$("#dialog").dialog({
bgiframe: true,
height: 200,
width: 150,
modal: false,
show: 'blind',
hide: 'blind',
resizable: false,
position: [270,150],
autoOpen: false,
zIndex: 997,
buttons: [
{
text: "Reset",
click: function() { }
}
]
});