So I have some jQuery UI Dialogs and for user usability I think it would be best if users would be able to close the dialog box when clicking outside the box instead of having to click the small close button on the dialog box.
jQuery Code:
$(document).ready(function() {
var dlg=$('#createTeam').dialog({
title: 'Create a Team',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:600,
height:285,
clickOutside: true, // clicking outside the dialog will close it
clickOutsideTrigger: "#addEngineer",
close: function(event, ui) {
location.reload();
}
});
$('#createTeamLink').click(function(e) {
dlg.load('admin/addTeam.php');
e.preventDefault();
dlg.dialog('open');
});
});
Can anyone advise on what I need to add to the code above to be able to close the dialog box on mouse click outside of the box?
I'm not sure why the clickOutside : true property isn't working though I can provide a simple workaround. On the page with the modal, you can catch body click events like so:
$(document).click(function() {
dlg.dialog('close');
});
However, this will be ANY click event on the page, so we have to exclude clicking on the modal from firing this event handler. It seems you have already done this with e.preventDefault() however, so add the above code and it should work. A better solution would be to include a modal backdrop in your modal HTML, and catch click events on that. If you provide your HTML I'll give you an example of this.
Related
I'm using the Magnific Popup plugin and I would like to make my main action button (Save), focused when the pop up opens so that if a user clicks the enter key, it simply triggers a click event.
I tried doing the following on the console with no luck:
$('.popup-modal-save').focus();
Is there a way of doing this without using a key down event listener?
Here is a link to my JSFiddle: https://jsfiddle.net/dwjfq1gp/25/
You can use the focus option of magnific-popup.
$.magnificPopup.open({
items : {
type : 'inline',
src : '#idOfInlinePopUP'
},
focus: '#closeButton',
closeOnBgClick:false,
enableEscapeKey:false
}, 0);
Code of button:
<input type="button" value="close" onclick="$.magnificPopup.close();" id="closeButton">
In this code the focus option consists of the ID of the button which you want to open. And src has to contain the id of the inline popup.
If you are able to open your popup successfully then you just need to add focus attribute with ID of the button you want to click on enter click.
In this answer, on opening of popup the default focus will be on closeButton. On clicking this button the popup will close.
you should use events to focus on save button when popup opened.
fiddle
$('.popup-modal').magnificPopup({
...
callbacks: {
open: function() {
$('.popup-modal-save').focus();
},
}
});
You actually need to listen the keypress event for that. And when the modal is opened then you need to attach the focus event. Here is a working fiddle https://jsfiddle.net/2fb3d841/1/
// I've just added this
callbacks: {
open: function() {
$('.popup-modal-save').focus();
$(document).keypress(function(e){
if (e.which == 13){
$(".popup-modal-save").click();
$.magnificPopup.close();
}
});
},
}
I know that there are people ask kendo to prevent kendo tooltip from close/hide whenever we click outside the tooltip. They are suggesting it here but seems that it has not been implemented yet.
I couldn't find the method which closes/hides when we click outside kendo tooltip so far. I only found the event triggered when we click on close or cancel button on kendo tooltip. But is there any way/hackish way to achieve this using javascript/jquery/anything?
Like you see in link that you included the kendo tooltip (with autoHide: false property) hides when you:
click outside the tooltip
scroll page
hit Esc
Until Telerik will not implement function to prevent it, the only way is using jquery event.stopImmediatePropagation(). For example for block tootlip from hide when you click outside you can write:
$("#target").kendoTooltip({
autoHide: false
});
$('html').on('mousedown', function(e){
e.stopImmediatePropagation();
});
Working demo: http://dojo.telerik.com/ugUCI
Unfortunately it will prevent any html onmousedown events like DropDownLists/ComboBoxes hiding etc.
You can override the close function of the kendo UI popup class to prevent execution. My solution was to throw a custom exception in the 'hide' handler and prevent the close from happening if this custom exception is caught.
kendo.ui.Popup.fn.close = function (close) {
return function (skipeffects) {
try {
close.call(this, skipeffects);
} catch (err) {
// suppress error if its the right type
if (!(err instanceof PreventTooltipHideException)) {
throw err;
}
}
}
}(kendo.ui.Popup.fn.close);
var tooltip = $('#' + areaId).kendoTooltip({
content: "Hello World!",
hide: function (e) {
throw new PreventTooltipHideException();
},
autoHide: false
});
I am using jquery ui dialog. In the dialog i have 1 save button, when user click on the save button in the callback of the save button i am disabling it. My code :
$("#Form1").dialog({
width: 500, autoOpen: false, modal: true, resizable: false, draggable: false,
buttons: {
"Save": function (event, ui) {
$(event.currentTarget).button({ disabled: true });
... .
....
}
}
, beforeClose: function () {
//here how can i enable the save button
}
});
Now my problem is that when user open the dialog again the save button still disabled so thats why i want to enable the button at dialog beforeClose event. How can i do this?
The element you invoke the dialog on gets wrapped in a parent so title bar, buttons etc can be added. All the buttons have class ui-button
This should do what you need
beforeClose:function(){
$(this).parent().find('.ui-button').button({ disabled: false });
}
You might find it easier to enable and disable the button in the following way:
btn_save = $('#Form1').parent().find(':button:contains("save")');
//disable the save button
$(btn_save).prop('disabled', true).addClass('ui-state-disabled');
//enable the save button
$(btn_save).prop('disabled', false).removeClass('ui-state-disabled');
The added css class will give the button it's disabled css styling. Also note that the :contains selector is case sensitive.
I am new to jQuery but have already implemented successfully several modal dialogs using the jqueryUI dialog widget. In trying to implement another one, the modal dialog opens, but the code continues on to execute without stopping for user input. Using jQuery 1.7.1 and jquery-ui-1.8.16.
Here is the definition of a "prototype" of the dialog (it is a "prototype" because it doesn't take the actions on the "OK" selection that would be needed to meet requirements):
var $confirm = $('#confirm');
$confirm.dialog(
{
autoOpen:false,
width:440,
modal:true,
buttons:
{
OK: function()
{
$( this ).dialog( 'close' );
},
Cancel: function()
{
$( this ).dialog( 'close' );
}
}
});
Here is some test code that opens the dialog:
[ some javascript that does error checking]
alert('stop1');
$('#confirm').dialog('open');
alert('stop2');
[ more javascript including submitting the form]
What happens is the the first alert displays. Upon clicking on it the dialog opens along with the second alert, indicating that the dialog is not waiting for user input. The second alert is modal and prevents the dialog from being accessed. When it is clicked on, the form submits. This sequence shows that the dialog is not waiting for user input.
I have looked and looked at my other successfully implemented modal dialogs and do not see what might be causing this one to fail.
The dialog won't wait. Instead you'll want to use this as a point to decide what you want to happen. So instead of including additional code that you may or may not want to run after the dialog modal, let that be the last part of the function.
Then, with your OK or Cancel functions, make the call there to continue on with the workflow if they chose ok, or just hide and do whatever cancel stuff needs to be done with the cancel.
In short, the modal dialog will not pause execution of the javascript, it will just run the code to open the modal and keep on going.
You should use a promise:
function deferredConfirm(message) {
$('<div></div>').html(message).dialog({
dialogClass: 'confirmDialog',
buttons:
[{
text: buttonText,
click: function () {
$(this).dialog("close");
defer.resolve();
}
},
{
text: buttonText2,
click: function () {
$(this).dialog("close");
defer.reject();
}
}],
close: function () {
$(this).remove();
}
});
return defer.promise();
}
And to call it:
deferredConfirm("Oh No!").then(function() {
//do something if dialog confirmed
});
I have a jQueryUI tabs object, and i want to handle the event of a tab being clicked, when is already selected.
using:
$("#tabs").tabs({
select: function (event, ui) {
onSelected();
}
});
I'm able to handle the event when the tab is first clicked (selected), but when i click it again - the handler isn't called.
is there any solution for that?
If not - another option that will suit my needs is the following:
define the tabs as collapsible, and collapse them by script (and not by user click).
i define the tabs object as:
$("#tabs").tabs({
collapsible: true
});
but when i try to simulate a click using:
$("#tabs").tabs("select", 0);
or
$("#tab-link-0").trigger('click');
nothing happens.
I need to point out that the tabs are added dynamically, using:
$("#tabs").tabs("add", "#tab-link-0", "title 0");
any ideas\suggestions for any of the cases?
Thanks,
I experimented a bit and found out that you can prevent the collapse of a tab by calling event.preventDefault() in the select handler. You obviously only want to do this when the select handler is fired on your currently-selected tab (to prevent collapsing the tab), or you'll never be able to switch the tab. This is worth testing, due to the call to preventDefault() on the jQuery event, but it appears to give you the behavior you want, at least in Chrome:
var tabs = $("#tabs").tabs({
collapsible: true,
select: function(event, ui) {
if (tabs.tabs('option', 'selected') === ui.index) {
// Prevent the tab from collapsing if the event fired on the
// currently-selected tab
event.preventDefault();
}
onSelected();
}
});