Window confirm OK/Cancel strange behavior in Dialog Box? - javascript

(I made a post about this before but I'll try to be a little more clear in this one.)
I'm having some problem with a windows.confirm box. My click-event opens a jquery dialog-box and loads a list of objects. Every object has a deletebutton which deletes and sends back an updated list (via Django view).
Im trying to put a OK/Cancel confirm before the delete. It works one time. The problem im having is that the next time i open the dialog, click delete i have to press OK/Cancel two times, then three times and so on..
Any ideas? (I've tried also else return false)
$("#mylist").click(function(event) {
event.preventDefault();
$('#dialog').load($(this).attr('href')).dialog({
width: 800,
height: 530,
resizable: false,
title: "Dialog Title",
autoOpen: true,
modal: true
});
$("#dialog").on("click", ".delete", function(event) {
event.preventDefault();
var val = window.confirm('Are you sure you want to delete this?');
if(val == true) {
$("#dialog").load($(this).attr("href"));
}
});
});

Try closing the first function before you define the second:
$("#mylist").click(function(event) {
event.preventDefault();
$('#dialog').load($(this).attr('href')).dialog({
width: 800,
height: 530,
resizable: false,
title: "Dialog Title",
autoOpen: true,
modal: true
});
});
$("#dialog").on("click", ".delete", function(event) {
event.preventDefault();
var val = window.confirm('Are you sure you want to delete this?');
if(val == true) {
$("#dialog").load($(this).attr("href"));
}
});

Maybe your problem is that the click event which contains the confirm is inside the #mtlist click event.
Try this:
$("#mylist").click(function(event) {
event.preventDefault();
$('#dialog').load($(this).attr('href')).dialog({
width: 800,
height: 530,
resizable: false,
title: "Dialog Title",
autoOpen: true,
modal: true
});
});
$("#dialog").on("click", ".delete", function(event) {
event.preventDefault();
var val = window.confirm('Are you sure you want to delete this?');
if(val == true) {
$("#dialog").load($(this).attr("href"));
}
});

Try this instead:
$("#mylist").click(function(event) {
event.preventDefault();
$('#dialog').dialog('destroy').remove();
$('#dialog').load($(this).attr('href')).dialog({
width: 800,
height: 530,
resizable: false,
title: "Dialog Title",
autoOpen: true,
modal: true
});
If it breaks everything try without the remove

Related

IF ELSE statements both are getting executed on click of a link in jquery

There is a student table, if the student is pass then i want to delete the record from the table on a click on link otherwise not and for that i am checking status and showing popup. But in both the cases it is showing me both the popup.
Bellow is my anchor tag :
<a data-dialog-href="#" id="delete-#Model.StudentId" href="#" data-status="#Model.Status">Delete</i></a>
and Jquery :
<script>
jQuery('body').on('click', '[data-dialog-href]', function (e) {
var studentStatus = jQuery(this).attr('data-status');
if (studentStatus == "Completed") {
$("#dialog-delete").dialog({
resizable: false,
modal: true,
title: "Confirm Delete",
height: 250,
width: 400,
buttons: {
"Yes": function (e) {
$("dialog-confirm").css("display: block");
$(this).dialog('close');
},
"No": function () {
$(this).dialog('close');
}
}
});
}
else
{
$("#dialog-ok").dialog({
resizable: false,
modal: true,
title: "Inforamtion",
height: 250,
width: 400,
buttons: {
"OK": function () {
$("dialog-confirm").css("display: block");
$(this).dialog('close');
}
}
});
}
});
</script>
div for popup :
<div id="dialog-delete">
Are you sure you want to Delete Student?
</div>
<div id="dialog-ok">
The student is not pass, Cant Delete this student.
</div>
dialog-ok is getting executed first then dialog-delete.
Please help me out. Thanks in advance.
You are getting value in studentStatus variable and you are using status variable in the rest of your code.

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

Confirm Jquery UI Dialog Prompt on Enter Key

I've tried the techniques suggested in the following stack answer to no luck:
Submit jQuery UI dialog on <Enter>
Something must be off with my code. On login, I have a disclaimer that pops up to warn the user that the information found within the site is confidential. I would like it so that to continue, all the user has to do is hit the enter key. Here is my original code (I've included a browser check):
$("#loginForm").submit(function (e) {
e.preventDefault();
if ($.browser.msie) {
$("#dialog-confirm")
.dialog({
resizable: false,
height: 300,
width: 550,
modal: true,
buttons: {
"Continue": function (e) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
},
Cancel: function (e) {
e.preventDefault();
$(this).dialog("close");
}
}
})
}
else {
$("#dialog-browser")
.dialog({
resizable: false,
height: 220,
width: 480,
modal: true,
buttons: {
"Close": function (e) {
e.preventDefault();
$(this).dialog("close");
}
}
})
};
});
Now here is my code with the keyup commands:
$("#loginForm").submit(function (e) {
e.preventDefault();
if ($.browser.msie) {
$("#dialog-confirm")
.dialog({
resizable: false,
height: 300,
width: 550,
modal: true,
buttons: {
"Continue": function (e) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
},
Cancel: function (e) {
e.preventDefault();
$(this).dialog("close");
}
},
HERE>>> open: function() {
$("#dialog-confirm").keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
}
});
}
})
}
else {
$("#dialog-browser")
.dialog({
resizable: false,
height: 220,
width: 480,
modal: true,
buttons: {
"Close": function (e) {
e.preventDefault();
$(this).dialog("close");
}
}
})
};
});
This unfortunately is not working for me and I can't for the life of me figure out why? If anyone can see where the issue is, I'd be extremely grateful!
Thanks!!
I put this aside for most of the day and just revisited it. I got it working! Here's my code:
$("#loginForm").submit(function (e) {
e.preventDefault();
if ($.browser.msie) {
$("#dialog-confirm")
.dialog({
resizable: false,
height: 300,
width: 550,
modal: true,
buttons: {
"Continue": {
text: "Continue",
id: "btnContinue",
click: function (e) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
}
},
Cancel: function (e) {
e.preventDefault();
$(this).dialog("close");
}
},
open: function () {
$(document).keydown(function (event) {
if (event.keyCode == 13) {
$("#btnContinue").click();
}
});
}
})
}
Essentially, I assigned the button in my dialog an ID value, and instead of $("#dialog-confirm").keydown I used $(document).keydown. Since the function is set only after the dialog opens, it won't necessarily affect the rest of my page. Inside of the keydown function, I have it hitting the continue button of which I call out by ID.
Thanks for the help everyone.
Try using this:
$("#dialog-confirm").keydown(function (event) {
if (event.keyCode == 13) {
// Submit it
}
});
If you don't have any elements in the dialog that will get focus (i.e: input elements), you can try the approach suggested in this question: jquery-ui Dialog: Make a button in the dialog the default action (Enter key)

jquery dialog not opening/closing

i have code like this:
The dialog does not open when i use this.
else if (json.score == -3) {
$("#dialog-unauthenticated").dialog('open');
}
but does when i use this! I have it initialized with autopen false above too.
else if (json.score == -3) {
$("#dialog-unauthenticated").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
}
what is wrong?
close does not work either.
initialized with:
$("#dialog-unauthenticated").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
Not sure if this helps, but im invoking this in response to a jquery post.
you need to initiate the dialog first.
then you can do actions after.
so e.g.
$('<div id="dialog" />')
.dialog({
modal:true,
buttons:{
cancel:function(){
$(this).dialog('close');
}
}
});//init dialog
$('#open').click(function (){
$('#dialog').dialog('open');
});
$('#close').click(function (){
$('#dialog').dialog('close');
});
As you are trying to open the dialog when its not initiated. therefore the dialog does not exist so it cnt be opened

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;

Categories