How can I detect when someone has indeed picked some files from the file explorer and has hit select? I want to add an event on the selection of files.
I figured it out. You have to tie the input form to the onChange method.
<input type="file" data-dojo-attach-event="onChange:_onUpload" data-dojo-type="dojox/form.Uploader"/>
_onUpload: function(evt){
}
Related
Recenty, I noticed that the checkboxes that I wrote a click event worked incorrectly from time to time. Not everytime but sometimes their #click event works in reverse. Here is what I am trying to tell;
<label class="form-switch">
<input type="checkbox" #click="showElement = !showElement"/>
</label>
I have a simple form switch and there are some css on it which I didn't put here, it looks like a toggle switch. It toggles a data which is showElement. The default state of the data is false and when you click on the toggle it becomes true and false respectively.
<div v-show="showElement>
some content here
</div>
When the showElement is true I want to display the above div, and when it becomes false, I want it to be hidden. There is no problem with that. But here is my question;
If my observation is corret, usually when the project is started for the first time, in other words, when I type npm run serve and start the project, I immadiately go and check if it is working fine or not so I click on the checkbox very quickly over and over andsometimes the click event breaks down and starts working backwards. I mean, when the switch is off, the content is visible, when it is false, the div is showing, but it should be reversed. This happens sometimes when I browse the other pages of the project and return to this component. Is this a bug? Or am I doing something wrong? In the first version of the code it was like below;
<label class="form-switch" #click="showElement = !showElement>
<input type="checkbox"/>
</label>
I accidentally typed the click event to the label element instead of input. I thought that might be the problem. I am still thinking that is the problem but the bug that I explained above still happens sometimes. Do you know why? Can anyone explain?
Usually i find that with checkboxes in VueJS #Click is not the way to go. Try to use #Change event instead. This should make it more consistent.
The reason behind this is that the click event triggers before the value has been updated. Therefore creating the risk of it overwriting the old value instead of the newly updated one
EDIT:
I actually think in this case you might even be able to get around this by simply adding a v-model to the checkbox like so:
v-model="showElement" instead of having either #click or #change.
Verison 1:
<label class="form-switch">
<input type="checkbox" #change="showElement = !showElement"/>
</label>
Version 2:
<label class="form-switch">
<input type="checkbox" v-model="showElement"/>
</label>
Check this fiddle: https://jsfiddle.net/x4wykp2u/4/
Hope this makes sense
IBM web experience factory uses dojo library, I am wondering if the I set <input type="text" name="usrname" required> in the consumer model, does the button still work if the input is not filled?
Well, HTMLFormElement has a method called checkValidity() which you can use.
So, in your case, you could use the :input selector with dojo/query to query all input elements inside a form (includes buttons, checkboxes, textfields, text areas and select boxes) and then use the onChange event to check if the form is valid and change the buttons disabled attribute.
For example:
query("[name=myForm] :input").on("change", function(evt) {
var isInvalid = !evt.target.form.checkValidity();
query("button[type=submit]").attr("disabled", isInvalid);
});
Now all you need to do is to make sure that your button is initially disabled/enabled depending on the initial state of the form.
A full example can be found on JSFiddle: http://jsfiddle.net/j8L6j77g/
The "multiple files" feature enables to select more files for uploading. The listener is called after each transmission. But I don't know how many files will be uploaded by the component at all.
I would like to navigate to the next page after all the selected files were processed. Any suggestion is highly appreciated.
fileUploadListener="#{uploadBean.handleFileUpload}"
maybe not a good solution but you can use the oncomplete from p:fileUpload to trigger a hidden button, which invokes a action to navigate.
<p:fileUpload ... oncomplete="$('#btn').click()" />
and
<p:commandButton id="btn" action="#{myBean.actionToNavigate}" style="display:none;" />
I have listeners on the event of radio being checked, which works perfect for the first time.
But if I refresh the page,the radio input is checked because of browser cache,and the event is not fired at all.
How to avoid this trouble?
I've run into this a lot, especially with Firefox. I'm not sure its necessarily valid but i read somewhere recently that adding autocomplete="off" to your form tag will prevent any form element value caching.
There is a post here that provides a JavaScript solution that looks like this:
setTimeout(
function(){
document.getElementById( "form" ).reset();
},
5
);
EDIT
As your radio's arent in a form this should work:
<input type="radio" name="foo" value="bar" autocomplete="off">Bar
<input type="radio" name="foo" value="baz" autocomplete="off">Baz
You could propably unselect everything using javascript when the beforeunload event fires.
I have a customer dialog widget that I am attempting to use dojox.form.Manager on.
I have just stumbled across this control and it looks to do most of what I was implementing (unified onchange events) but much more. There is just one problem, the observer events will not fire.
I have a form element containing multiple digits, form, and custom widgets. Each is set up something like
<form id="resd_tab_details"dojoType="dojox.form.Manager">
<input type="checkbox" dojoType="dijit.form.CheckBox" name="w01" value="w01"
observer="testfunction1">
</form>
I can attach to the form set values and everything else I have tried, except the events.
What might I be doing wrong?
IIRC an observer is a method name on a form manager, not a standalone function. While you didn't give the complete example to test, your naming suggest that you use a standalone function.
You can define a method on the form manager either inline (see an example in its "tests" subdirectory), or in the code by subclassing a manager.
like this...
js portion
dojo.mixin(dijit.byId('frmMngr1'), {
'prvUpdate':function(){
console.log("clicked a check box");
}
})
html portion:
<form dojoType='dojox.form.Manager' id='frmMngr1'><input dojoType='dijit.form.CheckBox' observer='prvUpdate' checked name='title' />