I've written an application that uses keypress on a text input to trigger activating and deactivating a button. One of my users is using the handwriting function on a Windows 8 tablet to input text. He writes the text in, then hits the Insert button. The text gets inserted, but doesn't fire the keypress event. It also doesn't fire the onchange or onpaste events.
Does anyone know if there's an event that can be caught that will allow me to validate the form element? I can put an onchange event on it and then click out of the box, which will trigger the validation, but that's not intuitive.
Here's the JQuery code I tried for the change event, but I'm open to using run of the mill JS to get the job done.
var lastTerms ="";
$("input#searchbox").change(function()
{
var acTerm = $("#searchbox").val();
if (acTerm.length>2)
{
if (isDisabled($("#btnSearch")))
{
$("#btnSearch").removeClass("buttonDisabled");
$("#btnSaveSearch").removeClass("buttonDisabled");
}
}
else
{
if (!isDisabled($("#btnSearch")))
{
$("#btnSearch").addClass("buttonDisabled");
//$("#btnSaveSearch").addClass("buttonDisabled");
}
}
});
Related
I'm utilizing <v-dialog> component to display a form for my web app. I want to implement an unsaved changes dialog to popup when the user aborts their changes without saving and either close/keep the dialog open depending on a button press. Unfortunately, I'm having a bunch of trouble figuring out exactly how to prevent the default closing actions done by the framework.
So from what I can tell, you can close a dialog 3 different ways:
Setting the v-model property to false.
Clicking outside of the v-dialog modal unless the persistent prop is set to true.
Pressing the escape key.
Let's not worry about the 2nd way to close the dialog I referenced above and assume it is set to true.
Approach #1:
My first approach was to only allow the user to exit the dialog if they hit a cancel button on the form. I quickly hit a snag when I tried to disable the use of the escape button.
Here's what I have tried so far: In my App.vue mounted function:
mounted () {
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
console.log('The escape key was pressed.')
e.preventDefault()
e.returnValue = false
e.stopImmediatePropagation()
}
})
}
This should work. The log message is displayed in the console, but the dialog still closes after the escape key is pressed. I know I should be using key codes here, but this is for readabilities sake. I've also tried keyup and keypress with no success. There has to be something wonky happening in either the Vue.js or Vuetify framework that's messing this up.
Approach #2:
After I failed miserably trying to disable the escape key, I had to try something different. I tried adding this code inside the watch function to try and keep the dialog open if they cancelled:
dialog (val) {
if (val) {
console.log('Dialog is true')
} else if (!val && !confirm('Unsaved changes, do you still want to exit?')) {
console.log('User Wants to Keep Dialog Open')
this.dialog = true
} else {
console.log('Dialog is False')
this.close()
}
}
When I try and close the dialog, the confirm message pops up, and I hit the cancel button. Then, for some reason, the confirm dialog opens again. So, I hit cancel again, then the dialog dismisses like nothing ever happened. Here's what the console reads:
User Wants to Keep Dialog Open
Dialog is true
User Wants to Keep Dialog Open
Dialog is true
I understand why the dialog watch method is being called again, what I don't understand is why the confirm dialog is showing again. That code should never be executing after cancelling the confirm message the first time. The log message shows that there's no way that code should be executing again. Something must be happening behind the scenes that I don't realize.
Anyone have experience with preventing the v-dialog component from closing? Or any help with my two approaches? Thanks in advance.
It's a property on the dialog:
<v-dialog persistent
That will force them to keep it open unless you call the closure programatically by toggling the model.
I want to show a web notification to the user if they left the page open for 10 seconds. I have already taken the notification permission.
Problem here is the notification occurs multiple times even if the user comes back to the page in less than 10 secs. Already use clearTimeout for flushing myVar value....but no luck.....any help!
var myVar;
window.onblur = function myFunction() {
myVar = setTimeout(function () {
var notification = new Notification("XXX page is open in background ");
}, 10000);
clearTimeout(myVar);
};
want to make in such a way that only if user goes out of the page multiple times the notification will trigger everytime....but if he comes back to the page it will not appear..
Well, it could be due to testing. You must realize that window.onblur is triggered each time you leave the page. So if you leave, enter, leave, enter, leave, you will get 3 popups; each event runs independantly.
What you should do is call clearTimeout() in your window.onfocus event; don't forget to clear your myVar variable in both your popup handling code and your onfocus event (and test for it being null or not).
I have an XPage with 2 custom controls. The 1st custom control has a repeat control and the second is used just as a dialog box.
The user can delete a row from the repeat control by clicking on a delete link. then i use rowVar.getDocument.getNoteID and i delete the document.
What i want is to ask the user first: "are you sure you want to delete it?"
I used "window.confirm()" in CSJS but i dont like the default prompt box. So then i used dojo dialog box but i cant use rowVar of repeat control in it to get the documentId.
Currently i have code in the OK button of the dialog but i want to use OK/Cancel buttons only as a true/false and execute the code in the main custom control. Is there a way of passing the value of the button back to the caller?
I have done this in many ways. Basically, write the information you need to find the document to delete to a viewScope variable. Then create a stand alone event handler that is called from the OK or Cancel buttons of the dialog.
So the eventHandler looks like this post by Jeremey Hodge:
<xp:eventHandler
event="onfubar"
id="eventHandler1"
submit="false">
<xp:this.action><![CDATA[#{javascript:
// write the ssjs to save the doc base on viewScope parameters
}]]></xp:this.action>
</xp:eventHandler>
Then the dialog buttons look something like this (based on the Mastering XPages book and many other sources):
XSP.partialRefreshGet("#{id:eventHandler1}", {
params : {action :"OK" },
onComplete : function () {
// do something else if needed
},
onError : function() {
alert("no soup for you!");
}
});
Im trying to fire a click event on a tool bar button Dojo 1.8.1.
<div data-dojo-type="dojox.mobile.ToolBarButton" class="backButton" moveTo="cartView" transition="slide">
I have tried
function backClick(){
var backButton = dojo.query(".backButton", dojo.byId(currentView.id))[0];
writeLog("backClick::"+backButton);
if(backButton){
var backDijit = dijit.registry.byId(backButton.id);
writeLog("backDijit::" + backDijit.id);
writeLog("emit Click");
backDijit.emit("click", {bubbles:true});
writeLog("emit mousedown");
backDijit.emit("mousedown",{bubbles:true});
writeLog("emit mouseup");
backDijit.emit("mouseup",{bubbles:true});
writeLog("touchstart");
backDijit.emit("touchstart");
writeLog("touchEnd");
backDijit.emit("touchend");
}else{
//Exit App notification
navigator.app.exitApp();
}
}
mousedown/mouseup combo works on the browser.
But on the device it does not work(Android). What is the event that i have to send to 'click' the button on a device?
It seems that the sequence of events that will activate the toolbar button 'click' on a touch device is touchstart followed by touchend.
I suppose that your example do not work because the synthetic touch events that you are emitting do not contains any data, which fails the different methods that handle it.
Another way to trigger the click handler of the toolbar button would be to call its _onClick method.
I have a Dojo form that does not contain a submit button. Instead, I added an onkeypress handler to calls a method when Enter is pressed. The problem I am having is that when I hit enter before blurring off the current field, the _process method thinks that field is empty.
Or in other words: type in field1. hit tab. type in field2. hit enter. field2 is blank unless i click off the field or shift-tab back.
Any ideas?
dojo.connect(dijit.byId("fkrform"),"onKeyPress",function(e) {
if (e.keyCode == dojo.keys.ENTER) {
_process();
}
and the method it calls:
function _process()
{
var field1 = dijit.byId("field1").value;
var field2 = dijit.byId("field2").value;
alert(username);
alert(password);
...do stuff...
}
The fields are of dojoType: dijit.form.TextBox, and the form is: dijit.form.Form
Use dijit.byId('field1').get('value') instead of directly try to access the property "value". In your example you saved the value in the variable field1 and field2 and in the alert you use the variable username and password could be the answer why you don't get anything. But you still should use the get method to get a property instead of directly access the property.
When you press "Enter" your form will submit. So you need to connect to the "onSubmit" event on the form, instead of onkeyPress or onKeyUp.
The first example i created prints the value of the input box on every key someone pressed in the console.
http://jsfiddle.net/a8FHg/
But what you really wanted was hooking into the submit. I modified the example. The new example connects to "onSubmit" and creates an alert box with the text of the user input.
http://jsfiddle.net/a8FHg/1/
For completness if jsfiddle doesn't work some day. You JavaScript should looks like this.
dojo.ready(function(){
var form = dijit.byId('form');
var box = dijit.byId('box');
var submit = function(event) {
dojo.stopEvent(event);
alert("User input was " + box.get('value'));
};
dojo.connect(form, 'onSubmit', submit);
});
Assuming your form in your HTML has the id form and your box have the id box.