We Keep Coding

jQuery - multiple instances of dialog boxes won't open

I have the following problem:
I use dialog boxes to show different pages/content inside of them, however when two different dialog boxes are opened it crashes and they cannot be opened again. Everything is fine as long as one box is opened, it can even be opened multiple times. When I open second dialog box neither of them can be reopened. I have already tried to "destroy" the dialog on closing (as suggested here Jquery Dialog opening multiple dialogs) but it didn't help, I still can open only one instance of each box and when two different ones are opened it crashes and neither of them reopens.
I have something like that in html:
<ul>
<li>link1 title</li>
<li>link2 title</li>
</ul>
And then in the javascript:
$("#link1").click(function () {
$(function () {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('somePage.php');
},
height: 500,
width: 1300,
title: 'title1'
});
});
});
$("#link2").click(function() {
$(function () {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('otherPage.html');
},
height: 535,
width: 880,
title: 'title2'
});
});
});

Your $(function () { is not at the right place:
$(function () {
$("#link1").click(function () {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('somePage.php');
},
height: 500,
width: 1300,
title: 'title1'
});
});
$("#link2").click(function() {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('otherPage.html');
},
height: 535,
width: 880,
title: 'title2'
});
});
});
The code inside $(function() {…} is executed at document loading, the perfect time to register event handler on our HTML elements.

jQuery Dialog Popup showing, but not popping up

I have a Login Control I'd like to popup. The control is rendering, in a UI-dialog box even, but it's rendering on the page itself, not in a dialog popup. This is my first project using jQuery UI dialogs, but I haven't had a problem in other locations.
Because my access check is all code side I have attempted to simply the issue with
autoOpen: true,
Here is the jQuery:
function OpenLoginDialog() {
$("#divLoginOpen").dialog({
autoOpen: true;
appendTo: "#divSurveyMainPage",
modal: true,
dialogClass: "no-close",
width: 650,
height: 400,
title: "Login Please",
show: {
effect: "size",
duration: 800
},
hide: {
effect: "clip",
duration: 800
},
closeOnEscape: false
}).css('z-index', '1005');
return false;
}
My JSfiddle (below) has the HTML included, I've also moved the control HTML into the div where it belongs.
http://jsfiddle.net/p10bcxuq/
Please help! Thanks!
Actual Example: http://www.codelogically.com/Forms/Surveys/Surveys.aspx

I have updated your fiddle here - it had a lot of server side stuff which needed to be removed. You also need an opener.
$( "#opener" ).click(function() {
OpenLoginDialog();
});

jquery dialog too many buttons

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

Make a jQuery UI close with setTimeout()

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);

String contains an invalid character on jquery-ui dialog

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