We Keep Coding

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

Dialog Removes All My Binds That are not related to it

Everytime I use dialog, all my other elements bind get lost, for example, I bind click event of elements with class '.submit-button' it works fine until I open a dialog...
Any idea?
Yours,
Diogo
edit:
Example:
Sure!
<span onclick="normalDialog()">Open Dialog</span>
<span class="submit-butto">alert ok</span>
<script>
$('.submit-butto').click(function(){
alert('Ok');
});
function normalDialog(){
$("#dialog").dialog({
title: 'Hello',
bgiframe: true,
resizable: false,
draggable: false,
height:160,
width:290,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
"Close": function() {
$(this).dialog('close');
}
});
}
</script>
When I click 'open dialog','alert ok' stops working...

Found the problem, it was nothing related to dialog,
Found this line on my code, it was resetting everything:
jQuery.cache = { };

Show Popup on Click

Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)

You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.

jQuery UI Dialog Caches for quick second

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

jquery: the parent modal dialog textbox is not editable

jquery ui.dialog
after open a modal dialog, if I will open another modal dialog again and close it, the textbox is lock in the parent dialog. I can not resolve this problem.
if I open a non-modal dialog , it works fine,
but the parent dialog can be closed ,How to resolve it , thanks , waiting online
html:(dotnet mvc2)
<input id="btnDlg" type="button" value="open dialog"/>
<div id="dlg1"><%=Html.TextBox("txtName","can not edit") %><input id="btnShowDlg" type="button" value="dialog again" /></div>
<div id="dlg2"><div>the second dialog</div><%=Html.TextBox("txtName2") %></div>
jquery:
//first modal dialog
$("#dlg1").dialog({
autoOpen: false,
height: 350,
width: 300,
title: "The first dialog!",
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'OK': function() {
$(this).dialog('close');
}
}
})
//second modal dialog
$("#dlg2").dialog({
autoOpen: false,
height: 200,
width: 300,
title: "This is the second dialog!",
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'OK': function() {
$(this).dialog('close');
}
}
})
//show the first modal dialog
$("#btnDlg").click(function() {
$("#dlg1").dialog("open");
})
//show the second modal dialog
$("#btnShowDlg").click(function() {
$("#dlg1").dialog("options", "hide",true);
$("#
dlg2").dialog("open");
})

I just figured it out, just in case sb ever needs an answer and doesn't find one
One needs to change the z-index in CSS file of #btnShowDlg to this (not exactly)# 638746and then the fields within the modal preview are editable.. No need to change anything else :)
Just go to your css file, locate #btnShowDlg and either change or set z-index:638746;