When i click on an <input type=text>, a list of old values appear. If I chose one of them with the mouse, the event "change" from jQuery doesn't trigger.
What event should/could I use to detect this?
You have to use oninput event, using jquery:
$('#myinput').on('input',function(){
//your code here
});
change will only trigger if field loose it's focus (blur event). And the term old values appear is browser feature that remembers form data for fields with same name. You can not trigger change event with that. You need an alternate event like paste , input.
$("#field").on("input DOMAttrModified paste",function(){
});
I'm not sure of event. You can try some though.
Related
I'm using Angular 9 and ng-lightning 7. I'm trying to use the ngl-datepicker-input component, but I'm having trouble having it behave how I want. The effect I'd like to achieve is to have a save() method be invoked EITHER:
When a date is selected in the datepicker popup window
When the user is done making changes to the input box (ie: the Angular (change) event binding for an input box)
However, it seems like the ngl-datepicker-input (https://ng-lightning.github.io/ng-lightning/#/components/datepickers) only provides the (valueChange) EventEmitter. This fires when the user selects a date in the datepicker popup window (ok for me) but it also fires on every keystroke into the input box (NOT ok for me). I don't want to save() until the user is done with editing.
I tried using just an ordinary (change) event binding on the input like below. This works very well for any user interactions with the input box. However, selecting a date out of the input box does not fire the (change) event, so I'm not able to capture those changes.
<ngl-datepicker-input
format="middle-endian"
[openOnInputClick]="false"
[class.slds-has-error]="!model.valid"
[(ngModel)]="checkpointDate"
#model="ngModel">
<input nglDatepickerInput type="text" (change)="save()">
</ngl-datepicker-input>
How can I either:
Use the (change) event binding on the input box, and then separately handle changes emitted by ONLY the datepicker popup window?
Allow selections in the datepicker popup window to also trigger a (change) event in the input box?
I was reading the documentation of the .on event handler of jQuery and I started playing around with it.
I have a simple <select> element with the multiple attribute set to true.
However, I want the user to be able to select multiple items without having to press the ctrl or shift key(s)
According to the .on documentation, if you specify a selector it will automatically add those event handlers to any new items added inside that container that match the selector specified.
So in my case, I could for example decide to replace the <option> elements available in the listbox, but I still want to have the same functionality for those options without having to rebind those events etc.
One might think that the following snippet should do the trick (atleast, I did):
$('#dropdownlist').on('mousedown', 'option', function(e){
e.preventDefault();
$(this).prop('selected', $(this).prop('selected') ? false : true);
return false;
});
So when a users clicks on an option in that listbox, the default action will be cancelled and depending wether the item is already selected or not, it will invert that selection.
I have created a small fiddle demonstrating this behaviour: fiddle
In that fiddle, the first dropdownlist is behaving as expected, but the functionality is lost when replacing the items. This only works in FF & Chrome.
The second dropdownlist is how I thought it should've been (event handling wise), but that doesn't seem to work besides in Chrome -.-
The functionality is kept when replacing items, because the console will still log '2' when clicking on an item after replacing them.
Can someone explain me why this is happening? Am I doing something wrong?
Please point me in the right direction!
Thanks!
~ Dirk
IE doesn't respect the mousedown event on the option tag itself. You've got to use the OnChange event of the select tag, which is not what you (nor I) want. I was trying to do the exact same thing as you and was stopped at every attempt. I finally gave up and made it a list of checkboxes because I can get the same behavior out of mine that you are trying to do here.
You can see this question for some options, but I never did get it to work the way you are describing.
I have a page with some generated HTML that survives the form's reset button. It is a problem because that HTML is inconsistent with the values in the cached default form.
In principle I guess it could be solved easily if I could force a hard reload from the server when the user presses the reset. However I see that the Chrome browser does not support the onReset event (in fact it is deprecated in HTML5).
But perhaps I could work around the missing onReload event. Can I re-define what happens when the reset button is pressed? In my case the apply and reset buttons are located in general HTML templates which I cannot change. Can I attach a function to the button from JavaScript?
You can replace the "reset" button , by a regular button.
And use the "onClick" event, to trigger a page reload.
EDIT
oops I missed the template part,
You can add a function to a button from Javascript.
First you need to "get" the button, with something like document.getElementbyId('resetButton');
If the button doesn't have a ID, you still can to retrieve it by doing javascript dom traversal
then you can add a function like :
var resetButton = document.getElementbyId('resetButton');
resetButton.onclick= reloadPage;
function reloadPage(){
window.location.reload();
}
When I'm dragging an item from a tablewidget, what triggers the the drag events, is it the QTableWidget, or the QTableWidgetItem? Or, something all together different? I need to alter my mimeData when it gets selected and is being dragged to a list.
Ok, I figured out my problem:
It's the QTableWidget that triggers the event. The problem I was having was that I set setDragEnabled(True) after I was trying to use my overridden event function.
I am designing a checkbox for a for and I absolutely cannot have the checkbox to toggle when the user clicks on its label, as this label contains a link to open a small infobox where the user gets to know what he or she is accepting by selecting the checkbox.
How can I disable checkbox toggle when clicking on its label?
The code looks simply like this (this element is inside a FormPanel items list:)
{
xtype:'checkbox',
id: 'privacyCheck',
fieldLabel: 'I have read, understood and accepted the privacy policy of ABCDE'
}
Instead of using the boxLabel property or field label on the checkbox, create a separate label object next to the checkbox. This should make it easier to manipulate your handler for the label. Otherwise, you will need to dig through the appropriate DOM element for the boxLabel (not pretty) to get at it.
I know, this topic is rather old, but I found it, searching for a solution to the exact same problem. So I'd like to share.
I needed to modify the browsers behaviour to mimick the behaviour of a legacy site, while making said site "accessible". (The for-attribute of the label tag is needed and a label without a for-attribute can not be used.)
I don't know about ExtJS, but since the legacy site uses jQuery in the frontend, I solved the problem this way:
//[...]
$(document).ready(function () {
$('.donotToogleCheckbox').click(function (event) {
event.preventDefault();
// do other stuff like displaying a dialog or something
})
});
//[...]
<label class='donotToogleCheckbox' for='myCheckbox'>DaLabel</label>
<input id='myCheckbox' name='myCheckbox' type="checkbox">
//[...]