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'
});
Related
i am displaying html form inside jqueryui dialog and i am using jquery validation plugin to validate it.
Problem - when i submit form by changing content to original, default form action is running.
It is only happening if i change html content to original content before form closing.
Here is my code:
$(document).ready(function() {
var getOldForm = $("#send-pm-win").html();
$("#pmLink").click(function() {
$("#send-pm-win").dialog({
modal: true,
draggable: false,
resizable: false,
autoOpen: true,
buttons: [{
text: "Cancel",
click: function() {
$(this).dialog("close");
},
style: "outline: none;"
}],
close: function(event, ui) {
$("#send-pm-win").html(getOldForm);
$(this).dialog("destroy");
}
});
});
});
I use kendo ui popup editor in this way：
editable: {
mode: "popup",
window: {
actions: [],
title: false,
modal: false,
resizable: false,
animation: false,
clickOutside: true
}
I don`t know if i can make the popup window auto-close through the editable configuration.
I have tried to add autoHide:true, autoClose: true configurations, but it doesn`t work.
I know this is an old question but maybe someone can benefit from this:
$("#btnSave").kendoButton({
click: function (e) {
e.preventDefault();
var dialog = $("#dialog").data("kendoWindow");
dialog.center();
dialog.open();
}
});
$("#dialog").kendoWindow({
width: 225,
height: 70,
modal: true,
visible: false,
title: false,
actions: [],
open: function() {
setTimeout(function () {
$("#dialog").data("kendoWindow").close();
}, 2000);
},
animation: {
open: { effects: "fade:in"},
close: { effects: "fade:out"}
}
});
Just in case any one feel lazy, here is how popup edit window could be closed:
$(document).on('click', function (e) {
//kendo popup edit window selector
var windowCont = $('.k-popup-edit-form.k-window-content');
//if it was first click on kendo grid edit button exit function
//otherwise popup window will be closed immidiatelly
if ($('.k-grid-edit').is(e.target))
return;
//if click was outside popup window, trigger close button
if (!windowCont.is(e.target) && windowCont.has(e.target).length === 0)
windowCont.find('.k-grid-cancel').click();
})
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.
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"); } }