When I add the card to the in box. Then it is possible to double click on the card, and dialog pop up. In the dialog I have Tow buttons (Save) and (Cancel). When I press Cancel buttons a confirm window pop-ups.
I want when I press the close in the right corner, that confirm window pop-ups. I tried by this part of code to fix it, but not succeeded:
close: function () {
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
The issue is when I'm doing it in that way, the dialog window first close, then the confirm window pop-up. I don't want that, but I want the opposite.
JQuery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
$('<input/>', { "type": "text","class":"date"}).appendTo($div);
var cnt =0,$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id","div"+cnt);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center',
buttons: {
Save: function () { //submit
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val());
$('#modalDialog').dialog("close");
},
Cancel: function () { //cancel
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
},
close: function () {
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
});
});
$("#datepicker").datepicker({showWeek:true, firstDay:1});
});
Maybe I'm wrong, in that way I'm doing. Any idea how to fix it?
Live Demo
You may try use the beforeClose for the confirm window, and if confirmed then close the dialog.
Related
I have a jquery UI modal which opens on checkbox click and cause postback after clicking ok button but its not working .I have tried all solutions.please help.Asp.net button is inside form tag.
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "Other-Legend",
width: 300,
open: function (type, data) {
$(this).parent().appendTo("form");
},
buttons: {
Ok: function () {
$("[id*=btnConfirm]").click();
},
Close: function () {
$(this).dialog('close');
}
}
});
jQuery('input[type="checkbox"]').click(function () {
var parentClass = jQuery(this).parent('td').attr('class');
var checked = jQuery(this);
jQuery('.' + parentClass.substring(0, parentClass.length - 8) + ' input[type="checkbox"]').each(function (i, e) {
jQuery(this).prop('checked', false);
})
jQuery(checked).prop('checked', true);
if (parentClass.indexOf("mdclass") >= 0) {
$('#dialog').dialog('open'); }
});
<asp:Button ID="btnConfirm" runat="server" Text="Button" style="display:none" OnClick ="Button1_Click" />
You can try adding the jQuery UI v1.10 or greater syntax of appending the modal DIV to the form.
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "Other-Legend",
width: 300,
appendTo: "form",
buttons: {
Ok: function () {
$("[id*=btnConfirm]").click();
},
Close: function () {
$(this).dialog('close');
}
}
});
I have this jquery function that opens up a modal anytime a button is pressed of type 'btnClr'
$(document).ready(function () {
$('#[id*=btnClr]').onload(function () {
$dialog.dialog('open');
});
var $dialog = $("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});
I'm trying to move it into a function so that it's opened anytime the function is called instead of any time the button is clicked.
I was able to achieve this with this code
function modalOpen() {
var $dialog = $("#trUI")
.dialog({
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function(e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function(e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
}
However, any one of the buttons will only work once.
Does anybody have any recommendations for how to do this?
I believe your issue is that you also are not "opening" the dialog. Move $dialog.dialog('open'); into the new function you wrote, so whenever it is called it will open it.
I was able to get it working. It was a TINY change in code. All I had to change was the call to dialog("open")
// some function{
$("#trUI").dialog('open'); //instead of $dialog.dialog("open")
}
$(document).ready(function () {
$("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});
I am displaying a dialog box on opening of the page. But the problem is when I click on one of the buttons of dialog box, the dialog box window does not close. I don't know why.
Here is my code :
$(document).ready(function() {
var x=$('#loginstatus').val();
if(x==1){
$("#dialog").html("Do You Want to go for Face Recognition and Detection?");
$("#dialog").dialog({
autoOpen: true,
modal: true,
title: "Permission for Face Recognition",
width: 600,
height: 300,
resizable: false,
buttons: {
"Yes,Why Not": function() {
$(this).dialog("close");
callback("1");
},
"No,Thanx": function() {
$(this).dialog("close");
callback("2");
}
}
});
}
});
And in html I have the dialog div and other necessary inputs.
Html:
<div name="dialog" id="dialog"></div>
<input type="hidden" name="loginstatus" id="loginstatus" value="<%=firstlogin%>"/>
test this, I made some changes in button :
$(document).ready(function() {
var x=$('#loginstatus').val();
if(x==1){
$("#dialog").html("Do You Want to go for Face Recognition and Detection?");
$("#dialog").dialog({
autoOpen: true,
modal: true,
title: "Permission for Face Recognition",
width: 600,
height: 300,
resizable: false,
buttons: {
"Yes,Why Not": function() {
callback("1");
$(this).dialog("close");
},
Cancel: function() {
callback("2");
$(this).dialog("close");
}
}
});
}
});
Try
$("#dialog").dialog('close');
instead of
$(this).dialog("close");
It's not quite recommended to use this unless you are absolutely sure about the scope.
$('#dialog').click(function() {
$('.dialog').hide();
});
I have got a jquery dialog with autoOpen set to false:
$(document).ready(function() {
$('#test').text("hello!").dialog({
autoOpen: false,
resizable: false,
modal: true,
});
});
I trigger the dialog like this:
$('x').click(function() {$('#test').dialog('open');});
I want to add buttons with some functionality on open, something like this:
$('x').click(function() {$('#test').dialog('open', 'option', 'buttons', {
'Ok': function() {
myFunction();
$(this).dialog('close');
}
});
});
But no luck so far, any help?
Change the third part like :
open: function (type, data) {
$(this).parent().appendTo("form");
},
buttons: { "Ok": function() { $(this).dialog("close"); } }
I am using Jquery UI Dialog to display a popup box
I have a page with a grid on. Each row has an icon to open a dialog box
If there are lots of rows and you need to scroll down and click a row at the bottom, then when the dialog box opens it also scrolls the page to the top again
Is there any way to prevent this happening?
I just want the dialog box to be opened and the scroll position of the page to be maintained
$('#AmendLineDialogBox').dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
buttons:
{
'Ok': function () {
// ...snip
$(this).dialog("close");
},
'Cancel': function () {
$(this).dialog("close");
}
},
position: 'center',
title: 'Amendment'
});
You can do chaining like this:
$('#AmendLineDialogBox').click(function(e){
e.preventDefault(); //<--------------^-------prevent the default behaviour
}).dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
buttons:
{
'Ok': function () {
// ...snip
$(this).dialog("close");
},
'Cancel': function () {
$(this).dialog("close");
}
},
position: 'center',
title: 'Amendment'
});