Is there a possibility to get an event when a modal closes on an Esc or backdrop click? Or is is possible to get a model change when the modal closes?
according to bootstrap docs you can only use following events: 'show', 'shown', 'hide', 'hidden'
Though if you want to detect if it was closed on pressing Esc key, or clicking backdrop you can bind your own event handlers
e.g. with jquery
$('.modal-backdrop').click(function(){
//backdrop clicked
})
$(document).keyup(function(e){
if(e.which == 27&&$('body').hasClass('modal-open')){
// esc pressed while modal is opened
}
})
Related
I want to form some kind of event trigger that would display Tailwind values only during when my click is pressed. If I keep on pressing the button would appear as if it is physically pressed i.e. "shadow-inner" or some other tailwind value
Do I need a separate event listener or is there some tailwind event like "hover:" that I don't know of
Use active: variant which represents :active pseudo-class.
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
<button type="button" class="bg-red-500 active:bg-blue-500">Button</button>
This button will be blue when clicked (pressed)
DEMO
There is no events in tailwind for this, since this is JavaScript.
You have to use mousedown and mouseup to achieve what you want.
For example :
const button = document.querySelector('button');
button.addEventListener('mousedown', () => {
// logic here
});
button.addEventListener('mouseup', () => {
// logic here
});
I took the JQuery UI dialog form sample from JQuery UI website.
Since I wanted that, once the dialog is opened and the form is displayed, that pressing the key submits the form, I added the following in the onReady() :
$.extend($.ui.dialog.prototype.options, {
open: function() {
var $this = $(this);
// focus first button and bind enter to it
$this.parent().find('.ui-dialog-buttonpane button:first').focus();
$this.keypress(function(e) {
if( e.keyCode == 13 ) {
$this.parent().find('.ui-dialog-buttonpane button:first').click();
return false;
}
});
}
});
This does perfectly the trick (I mean the click() is triggered when it has to), but the following occurs :
When the form is first submited through a press on the key, the submission is performed once.
If I reopen the dialog, and submit it again with a press on the key, the form is submitted twice.
If I reopen the dialog, and submit it again with a press on the key, the form is submitted three times, and so on...
This can be tested with the following fiddle :
http://jsfiddle.net/fWW2E/
Let me add that doing so by clicking on the dedicated "Submit" button works properly, this fails only when pressing the key is involved.
Any ideas ?
Thank you !
Because since you're assigning this on "open" and your buttons are "closing" the dialog.
When this gets called though:
$('something').dialog('close');
doesn't actually remove the element, it just hides it. So the next time you click to open up a "new" dialog, you're really just showing the first one again. However the "open" event is getting fired again every time it's opened, which is adding a new keypress handler onto it.
Here's the fiddle. I actually write out to the console an array of the current handlers on that element. You'll see everytime you open the dialog that there is another keypress handler.
DEMO
I have a TextArea and a Checkbox. I want to disable the SoftKeyboard when the checkbox is checcked, so the TextArea can be scrolled without it popping up. I can get the keyboard to disable when the Checkbox is clicked, but as soon as I click on the TextArea to scroll it pops back up. How do I enable/disable the keyboard with a checkbox? Below is my code:
protected function toggle_keyboard_clickHandler(event:MouseEvent):void
{
checkboxStatus = event.target.selected;
if(checkboxStatus == true){
SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE;
}else{}
}
A SoftKeyboardEvent object is dispatched when a software-driven keyboard is activated or de-activated on a device or operating system. A SoftKeyboardEvent object is dispatched by a TextField or InteractiveObject that has the needsSoftKeyboardproperty set to true.
How to disable Save As dialog while pressing Ctrl+S
Description: I am developing one web application.Here When i am going to form submitting using "Ctrl+S",In Firefox before submitting "save As dialog" will open.How to disable save As dialog in Firefox.
You can accomplish this by handling the window's onkeypress event to check whether the CTRL key and S are depressed, and if so, canceling the event from by calling preventDefault() on the event object:
window.onkeypress = function(event) {
if (event.charCode === 115 && event.ctrlKey) {
event.preventDefault();
// your code here....
alert("'Save As' dialog suppressed!");
}
};
Note that the keypress event may behave differently in different browsers. This did work in FireFox, however.
In my flex app I have some radio buttons. When a user clicks the radio button, I want to popup an Alert, and if the user clicks ok the radio button will change, otherwise their change will be discarded.
How do I accomplish that? I tried event.preventDefault(); while handling the click event, but that didn't do anything. Any other ideas?
Listen to the change event.
If the new value of selected is true, set it to false and show the popup
Update the selected value based on the result of popup.
You could listen for the valueCommit-event and try to stop the behaviour (changing the value) in an event handler. There you can also create a popup...
Listen for the MouseEvent.MOUSE_DOWN event and in your handler do the following:
function myHandler(event:MouseEvent) : void {
event.preventDefault();
event.stopImmediatePropagation();
// statements
}