When a user opens dialog, there are a bunch of ajax requests that have to be processed and therefore i have a second dialog that just displays loading information and closes once all the requests have been processed.
I am not able to close the user opened dialog with Escape key once it has opened. I have to click on the the dialog itself before I can use escape.
I have tried the following to assign the user opened dialog the focus after the loading dialog closes but to no avail, I still have to click on the dialog before it can close with the escape key.
$(document).ajaxStart(function () {
// IF loading dialog is not allready being shown show it.
if ($("#LoadingData").dialog('isOpen') === false) {
$("#LoadingData").dialog('open');
}
});
$(document).ajaxStop(function () {
//Close the loading dialog once the requests have finished
$("#LoadingData").dialog('close');
//Find the user opened dialog
$('.cmdialog').each(function () {
if ($(this).dialog('isOpen')) {
$(this).trigger('click');//set focus to dialog
// have also replaced .trigger('click') with .focus() but to no avail
}
}).on('click', function() {
//if click is triggerd set the focus of the dialog.
if ($(this).prop('id') != 'LoadingData') {
$(this).focus();
}
});
});
I have also tried setting the focus to the first element within the dialog with $('#DialogName:first-child').focus() and $('#DialogName:first-child').trigger('click') but this is also not working.
Any ideas as to why the focus is not set? Or am I misunderstanding/incorrectly using .focus() and .trigger('event')?
Thanks :)
Try the below code for close the dialog when Escap key is pressed:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $("#LoadingData").dialog('close'); } // esc
});
I had the same issue, and found pretty elegant solution, in case you want to close dialog before actually clicking inside it:
$("#LoadingData").dialog({
...,
focus: function () {
$('#LoadingData').closest('.ui-dialog').focus();
}
});
So, we just need to set focus to parent .ui-dialog container, and in that case Esc will work for all cases. Disadvantage of $(document).keyup solution, if you have nested dialogs, Esc button will close your most top dialog and bottom one too.
the focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links. docs here
You can try moveToTop method of the dialog, maybe it will help
And in your code, I think, you should bind "click" event before triggering it.
The following code should work even for multiple modals open:
$(document).on('keydown','.modal-dialog',function(event){
if (event.keyCode == 27) {
$(this).closest('.modal-dialog').find('[data-dismiss="modal"]').click();
}
});
Related
I have an input that when clicked shows a bootstrap 4 dropdown BUT I need it to open when a user tabs to it as well for ADA accessibility.
If I use a focus event that uses $('#input-name).dropdown('toggle') it works fine, but when the input is clicked focus fires first which opens the dropdown and then the click event closes it.
I have tried e.preventDefault(); e.stopPropagation(); but neither help solve this issue.
events: {
focus #healthPlanMenu": "openDropDown"
}
openDropDown: function (e) {
if ($('#healthPlanMenu').find('.dropdown-menu:no(.show)')){
$("#healthPlanMenu.dropdown-toggle").dropdown('toggle');
}//fails
$("#healthPlanMenu.dropdown-toggle").dropdown('toggle');//fails
$( "#healthPlanMenu" ).click();//fails
}
So ideally you'd probably solve this by having the focus event set the dropdown's state to open, that way if it gets "reopened" by the click event, no problem. However, as far as I can tell there is only a toggle option with the jQuery API; seems unnecessarily limiting...
Given that, we can know if a click is coming after our focus event by using mousedown. So a somewhat hacky way to solve this problem is to disable our focus event if we know a click is coming.
(function() {
var disable = false;
$('#healthPlanMenu.dropdown-toggle')
.on('mousedown touchstart', function() {
disable = true;
})
.on('focus', function() {
if (!disable) {
$(this).dropdown('toggle');
}
})
.on('mouseup touchend',function() {
disable = false;
})
})()
I don't know if the touchstart and touchend are necessary as most browsers probably fire mouse events on touch as well. But better safe than sorry.
Can I change backdrop to 'static' while my modal is open?
I have modal with form submit button. When I click this button I show loading spinner on my modal and that is the moment when I want to change backdrop to static
I tried $('#myModal').modal({backdrop: 'static', keyboard: false}), but I can still close my modal by clicking the backdrop or using escape button.
Second step should be changing backdrop back to true, but I didn't try this yet, because first I need to set backdrop to static.
I could set backdrop to static on modal show, but I want to avoid this and change it after submit.
Any ideas?
Ok I solved this. Maybe it is not the best solution, but it is working for my special case.
I added $('#myModal').off('click'); just after I show loading spinner on submit. This prevents from closing modal with mouse click.
There was a problem with disabling escape button, because browsers stops page loading when user press this button. So I decided to hide the spinner to unlock the form with this code:
$(document).on('keydown',function(e) {
if (e.keyCode == 27) {
$('#myLoadingSpinner').hide();
}
});
Edit:
I found another solution for backdrop:
$('#myModal').data('bs.modal').options.backdrop = 'static';
I tried this also for keyboard = false, but it doesn't work.
I had a modal that could be opened 2 different ways. When the user opened it one way, I wanted them to be able to close the modal. When they opened it the other way I didn't want them to be able to close it.
I found this question and used the solution from the original poster. I also tried adding keyboard which now works:
$('#myModal').data('bs.modal').options.backdrop = 'static';
$('#myModal').data('bs.modal').options.keyboard = false;
I had a different JavaScript object returned and thus the following solution:
$myModal.data("bs.modal")._config.backdrop = value;
The simplest method I've come up with is attaching to the hide.bs.modal event and calling preventDefault(). This doesn't technically set the backdrop to static, but it achieves the same effect in a toggleable manner.
let $myModal = $('#myModal');
function preventHide(e) {
e.preventDefault();
}
// if you have buttons that are allowed to close the modal
$myModal.find('[data-dismiss="modal"]').click(() =>
$myModal.off('hide.bs.modal', preventHide));
function disableModalHide() {
$myModal.on('hide.bs.modal', preventHide);
}
function enableModalHide() {
$myModal.off('hide.bs.modal', preventHide);
}
(Disclaimer, I didn't test making buttons allowed to hide the modal, as that wasn't my scenario. If it doesn't work, just call .modal('hide') from the click() callback.)
You can disallow closing of a modal when clicking outside of it, as well as on esc button. For example, if your modal ID is signUp:
jQuery('#signUp').on('shown.bs.modal', function() {
jQuery(this).data('bs.modal').options.backdrop = 'static';
jQuery(this).data('bs.modal').options.keyboard = false;
});
I found, that in Bootstrap 5 this is slightly different:
modal = new bootstrap.Modal($('.modal'));
modal._config.backdrop = 'static'; // or true
I have a popup window that has a form in it and to stop the popped up div clicks from closing the window I've used:
$(".popup").click(function () {
$(".popup").css("display", "none");
}).children().click(function(e) {
return false;
});
However this works perfectly except with checkboxes whereby it disables checking them.
Is there any way around this?
popup is an overlay, then popupInner holds the form.
Try replacing your code with this:
$(".popup").click(function(e) {
if (e.target == this) $(this).hide();
});
It would hide the popup only if clicked on the element with class popup and not its children, it would also keep the functionality of the children intact.
Currently, for my own project, I am using the following library or plugin (which one you called it) for pop up, it is way a great plugin, I really like that, but one thing that I want to modify is to not to close the dialog box on pressing the esc key or by clicking outside of the dialog box.
I already look at the JQuery UI.js file and there is a variable called closeOnEscape and a bunch of function logic to handle closeOnEscape on the dialog.
Is there any way that I can implement to modify like closeOnEscape to this great library or plugin? as well as not to close by clicking outside of the dialog box.
Here is the link:
Dialog
JS File
First of all, sorry to not post any codes or whatsoever.
Your answer much appreciated.
Thanks.
Try this one:
$(document).on('keydown', function(ev) {
if (ev.keyCode === 27) {
ev.preventDefault();
}
});
$(document).on('click', function(ev) {
if ($(this).hasClass('you outside box class')) {
ev.preventDefault();
}
});
Hope this helps
There is a property called
escape : true,
I assume you could set this to false
or in the actual plug in look for and change its function
if (key_code === 27) {
$[prefix]('close');
}
and change it to
// if (key_code === 27) {
// $[prefix]('close');
// }
That should disable the Escape Key
I have a confirm box on my colorbox("are you sure you want to leave?").
This triggers when i close the popup. This works when i click on the "cboxClose" div on the popup.
I am trying to show this confirm box on a button click. But the popup just closes right away without showing the confirm box.
My question is how do i trigger the the confirm box when i click on a cancel button. i tried several ways
//This just closes the pop up without showing the confirm box
$('#btnCancel').click(function () {
parent.$.colorbox.close(); });
//doesn't work
$('#btnCancel').click(function () {
$('#cboxClose').click()
});
COLORBOX
onComplete: function () {
$("#cboxClose").click(function (e) {
// stop any other script from firing
e.stopPropagation();
if (confirm('are you sure you want to leave?')) {
$.colorbox.close();
// ensure that the binding is removed when closed
$("#cboxClose").unbind();
}
});
} // close oncomplete
The issue here is that colorbox registers a click handler on the cboxClose element. As a result, neither stopping bubbling nor preventing the click (by returning false in a click handler) will have any effect because the colorbox handler is already registered. The only way of stopping that handler from being run is to unbind it. However, to do that you need a reference to the handler, which you won't get without modifying the colorbox code.
In any case, that's what's going on and why the code you have above doesn't work. Another option for you would be to override the colorbox close function (which is the public colorbox method that is called by colorbox's close button handler). All you need is this:
$.colorbox._close = $.colorbox.close;
$.colorbox.close = function() {
if(confirm("Close?")) {
$.colorbox._close();
}
}
The down side (which may not be an issue in your situation) is that this will affect all colorboxes on the page.
I solved this issue by making this method and binding it to the cancel button
var originalClose = $.colorbox.close;
$.colorbox.close = function (e) {
var response;
var formChanged = localStorage.getItem("isFormChanged");
var saveClicked = localStorage.getItem("saveClicked");
if (formChanged == "true" && saveClicked == "false") {
response = confirm('Do you want to close this window? All your changes will not be saved');
if (!response) {
return
}
}
originalClose();
};
<input type="button" value="Cancel" id="btncancel" onclick="parent.$.colorbox.close()"/>