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 = { };
Related
i have a parent jsp page in which i do all the manipulation for my retriving data to backend
I have a button in the parent page upon which if i make a click action then it will open a new dialog which contains a table of input fields
I need to make my parent page non editable when this dialog box is opened
Here is my javascript :
function addscenario() {
$( "#addscenariodiv" ).dialog({ dialogClass: 'no-close' });
dialog = $("#addscenariodiv").dialog({
autoOpen : false,
height : 100,
width : 700,
modal : true,
buttons : {
close : function() {
form[0].reset();
allFields.removeClass("ui-state-error");
}
}
});
dialog.dialog("open");
}
I see, you are already using a modal dialog. There might be few errors in your console. Anyways, I have fiddled a sample here in this link. Hope you can fiddle your solution there too.
<button id="dialogButton" >Open Dialog</button>
<div id="dialog-message" title="Important information" style="display: none;> .... </div>
This is the div which is hidden by default. Clicking on the button the content in the div dialog-message is rendered as the modal dialog.
$("#dialogButton").click(function(){
$("#dialog-message").show();
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function() {
$(this).dialog("close");
}
}
});
});
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();
});
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.
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
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;