Develop Reference

How to make kendo popup editor AUTO-CLOSE when click outside of the popup window?

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

Jquery UI box - Takes more than 1 click to run

I am dynamically appending a <div> to the body of my webpage. This <div> does not exist on my .html page.
Within this <div> I am creating a Jquery UI YES NO box. Quite simply, it will 'do something' and close the box when YES, and just close the box when NO.
I have a working piece of code to create this box. However, frequently it takes two clicks of the YES button to work, which is very confusing. You'll see I have used a variety of methods to close the box.
$(function () {
$('body').append('<div id="dialog-confirm"></div>').click(function (e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
$("#dialog-confirm").dialog({
autoOpen: true,
height: 200,
width: 200,
modal: true,
title: 'Choose item?',
buttons:
{
'YES': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
});

The problem is that there is a race condition between your adding the div and attaching the click handler. Sometimes it happens before, sometimes after. That's why you get inconsistent click behavior. Try the following:
$(function() {
$('body').append('<div id="dialog-confirm"></div>');
$("#dialog-confirm").dialog({
autoOpen : true,
height : 200,
width : 200,
modal : true,
title : 'Choose item?',
buttons : {
'YES' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
$('#dialog-confirm').click(function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
});

Dialog Box not getting closed on clicking button

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

Jquery dialog submit not working

yesterday I started working on a Jquery Dialog box to replace the default confirm box that jquery has... I came across an issue and all the tutorials I see tell me to use .submit() on my form but that does not seem to want to play nicely (or play at all for that matter)
This is the JSFIDDLE
And now this is my javascript that is not working for me :
<script>
$(document).ready(function() {
$(function() {
var currentForm;
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
draggable: false,
height: 310,
width: 500,
modal: true,
buttons: {
'Cancel': function() {
$(this).dialog("close");
},
'Enter Queue': function() {
currentForm.submit();
}
}
});
});
$("#signinform").submit(function() {
currentForm = this;
$('#dialog-confirm').dialog('open');
return false;
});
});
</script>
The problem is happening at the "Enter Queue" button. Pretty much the scenario (as it is shown on the jsfiddle) is I need users to acknowledge the rules of the office, and if they do so they click on a check-box, once they do so then they click Submit, which then sends a dialog explaining to the user what they are getting into. However for some reason the "Enter Queue" button does nothing. I am quite confused. Any help would be great.
Thanks

It's because your re-using the $(document).on('submit', "#signinform", function(e) method
which got e.preventDefault(); for first instruction when you call $('#signinform').submit();.
You need to set a temporary variable to see wether you come from your code or the submit button.
Here is a JSFiddle with a working test, but you should do something nicer =)
EDIT : Javascript is an asynchronous langage, it means that your $('#dialog-confirm').dialog('open'); doesn't block and just modify the html, so the submit event always will return false -> it will never be sent.
So I get that JSFiddle which not really works like you want but if you trigger the submit button a second time after clicked the Enter Queue button it will work, so i'm wondering why the submit() method don't work when called from here.
A method you could use is to send the form with ajax (look at post() in jquery) and then redirect your user with something like window.location = "yourpage".

Try this way (jsFiddle):
$(document).ready(function() {
window.enterQueue=false;
$("#signinform input:submit").on('click',function() {
return getDialog(window.enterQueue);
});
function getDialog(enterQueue){
if(!enterQueue){
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: true,
draggable: false,
height: 310,
width: 500,
modal: true,
buttons: {
'Cancel': function() {
$(this).dialog("close");
},
'Enter Queue': function() {
window.enterQueue=true;
$(this).dialog("close");
$("#signinform input:submit").trigger('click');
}
}
});
return false;
} else
return true;
}
});

I figured it out last night with the help of jquery website and a lot of google-ing. Thanks to the both of you for your help and time it took for the answers. + 1
This is my solution :
<script type="text/javascript">
$(document).ready(function()
{
var Form = $("#signinform");
$(function()
{
$("#dialog-confirm").dialog(
{
resizable: false,
autoOpen: false,
dialogClass: "no-close",
draggable: false,
height: 320,
width: 500,
modal: true,
buttons:
{
'Cancel': function()
{
$(this).dialog("close");
Form.data("confirmProgress", false);
},
'Submit Information': function()
{
Form.submit();
Form.data("confirmProgress", false);
}
}
});
});
Form.submit(function()
{
if (!$(this).data("confirmProgress"))
{
$(this).data("confirmProgress", true);
$('#dialog-confirm').dialog('open');
return false;
} else {
return true;
}
});
});
// Everything under this is the Jquery for my second Dialog that has always been working, the issue was the above dialog which is now fixed.
$(document).on('click', "#Cancel", function(e)
{
e.preventDefault();
var href = '<?php echo base_url(); ?>studentlogin_controller/studentlogin';
$("#dialog-noconfirm").dialog(
{
resizable: false,
dialogClass: "no-close",
draggable: false,
height: 320,
width: 500,
modal: true,
buttons:
{
"Cancel": function()
{
$(this).dialog("close");
},
"Go Back": function()
{
window.location.href = href;
},
}
});
});
</script>

modal popup javascript

Hi all I have a div in my page which represents a popup window. I have a button inside the window. On click of the button, I need to call a javascript function.(I need to do this only in client side, not in server). If the validation is successful, the popup can close. If not, it should display an alert message and STAY THERE INSTEAD OF CLOSING. I need to close my popup only if validation is successful. Else, it should display an alert and just stay. How do I make it stay? The following are my codes.
Div structure:
<script type="text/javascript">
$(function () {
$("#dialog:ui-dialog").dialog("destroy");
$('#TimeslotGroup').dialog({
autoOpen: false,
draggable: false,
resizable: false,
bgiframe: false,
modal: true,
width: 700,
title: "Timeslot Group Entry",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
function showDialog(id) {
$('#' + id).dialog("open");
}
function closeDialog(id) {
$('#' + id).dialog("close");
$("#dialog:ui-dialog").dialog("destroy");
}
//getter
var modal = $(".selector").dialog("option", "modal");
//setter
$(".selector").dialog("option", "modal", true);
</script>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
$('#TimeslotGroup').dialog({
autoOpen: false,
draggable: false,
resizable: false,
bgiframe: false,
modal: true,
width: 500,
title: "Timeslot Group Entry",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
</script><div id="TimeslotGroup" class="ui-widget-overlay" style="overflow-y: scroll;">

Use the beforeClose event
$( "#dialog" ).dialog({
beforeClose: function(e, ui){
if(!valid){
return false;
}
}
});