I want to be able to reset all text fields to their default values when a button is clicked.
What I've done so far is query for all text fields and bind a function I wrote called 'textChanged' to the change event as follows:
require(["dojo/on","dojo/query"], function(on,query){
query(".Text").on("change",textChanged);
});
The function is defined as follows:
function textChanged(newVal)
{
...
}
I found I can reset the value in the body of the function by doing the assignment:
newVal.target.value = newVal.target.defaultValue;
If this function is triggered by a change event.
What I want to do is if a button is clicked, then I want to execute the newVal.target.value = newVal.target.defaultValue and am having trouble getting the context correct.
I've tried preserving the 'this' variable when it is called as well as preserving the 'newVal' parameter. If I try setting the value outside of the the context, then the update doesn't preserve. I've tried setting the 'this' value to some other value (nt = this) and the newValue to another variable (nv = newValue) and then I want to execute:
nv.target.value = nv.target.defaultValue;
and although it clears the field on the form, when the form is submitted, its actual value is still the manually modified value. I noticed that the 'this' is different from when I textChanged is called from the change event verses when I call it directly in my button clicked context.
I tried calling it using 'hitch' to set the context of this to its value that it had from the change event, but that doesn't seem to set the correct context:
require(["dojo/on", "dojo/_base/lang"], function(on, lang) {
lang.hitch(nt, textChanged(nv));
});
To be precise - inside textChanged I display the value of 'this' using console.log(this);
When textChanged is invoked when the text changes from the UI, 'this' is:
Yet when it is invoked from clicking my button that calls it via the
lang.hitch(nt, textChanged(nv));
'this' is:
Window fauxRedirect.lsw?applicationInstanceId=guid%3A1eae6af09bf6f543%3A-6644aeb4%3A13a8a4c429e%3A-7ffe&zWorkflowState=2&zTaskId=p1&applicationId=2&zComponentName=CoachNG&zComponentId=3028.b1094dc3-da2b-461a-8d56-f6444891c174&zDbg=2#%20%20
I've confirmed that 'nt' is indeed the same '
So, I'm trying to execute the textChanged function such that 'this' is set to that value.
Or, if there is a better way to reset a field to its default from another control - that would work as well.
Thanks in advance.
I'm not sure of the full context of what you are trying to do, so don't know if this answers your question?
You can reset all of the widgets within a form to their default value as long as they are wrapped in a dijit/form/Form widget. If all the widgets are wrapped correctly it should be a simple matter of calling reset() on the form.
NB: This will not work for native elements (ie. standard <input> or <textarea> fields, they must be dijit/form/TextBox ...etc).
eg:
<form data-dojo-type="dijit/form/Form" data-dojo-id="theForm">
<label for="field1">Field 1:</label>
<input
type="text" id="field1" name="field1"
data-dojo-type="dijit/form/TextBox" value="default1"
/><br />
<label for="field2">Field 1:</label>
<input
type="text" id="field2" name="field2"
data-dojo-type="dijit/form/TextBox" value="default2"
/>
<br /><br />
<button
type="button"
data-dojo-type="dijit/form/Button"
onclick="theForm.reset();"
>Reset</button>
</form>
Clicking the reset button here should reset the fields to: field1="default1" and feield2="default2".
The form is calling each widget's reset() method. If you create your own widgets you need to ensure that their reset() method works correctly (as well as the _getValueAttr() method for setting their value).
Related
The title was kinda long-winded but the question itself is pretty simple.
So I'm looping over some strings and want to make a button for each. On click, the button will call a Vue method. I want to bind the string into the HTML element somehow - it will be more clear with the code:
<li v-for="(name, idx) in $store.state.lobby" :key="idx">
<button data-name="{{name}}" v-on:click='send_game_request'> request game </button>
</li>
so, as you can see, this is very simple. When the send_game_request method gets run, it can read the name off the data-name attribute and do what it needs to with that information.
But, this is invalid syntax, because {{name}} raises an error. I'm really hoping I don't have to wrap each button into it's own sub-component, because that is just extra boilerplate that's not necessary.
I've seen other examples that use v-bind but I don't really have any need to store this information in the component's internal state. I literally just need to know what button was pressed.
You can pass the name as an argument with an inline handler:
<button #click="send_game_request($event, name)">
where $event is the original event data.
In addition to what Tony mentions in his answer,
<li v-for="(name, idx) in $store.state.lobby" :key="idx">
<button :data-name="name" v-on:click='send_game_request'> request game </button>
</li>
You could then extract value of name with datasets like so:
function send_game_request(event){
const name = event.target.dataset.name;
}
NOTE: In this instance you don't need to explicitly pass the $event into your v-on:click function binding, it will already be made available by Vue. So, you can simply invoke your method with the event argument.
I am trying to have a checkbox inside a button and both clicking on the checkbox or the button should toggle the checkbox and the boolean value bound to it from the view model.
app.html:
<template>
<h1>${heading}</h1>
<button type="button" click.trigger="toggleIsChecked()">
<input type="checkbox" checked.bind="isChecked"> ${isChecked}
</button>
</template>
app.ts:
export class App {
isChecked: boolean;
toggleIsChecked() {
this.isChecked = !this.isChecked;
}
}
What happens is that when I click the button (outside the checkbox) everything works as expected. But when I click the checkbox the boolean value in the view model changes but the checkbox is not checked or unchecked. What could be causing this?
I have tried different approaches but they all produce similar results. While debugging I noticed the checkbox gets checked but something in the Aurelia framework removes it almost instantly. Seems like the event handling is not working properly?
EDIT: I made a gist so you can try it yourself: https://gist.run/?id=4a7b2c11db33bdb37213eb4ea1b5b2b0
It's not the Aurelia framework that is "removing" the checking. What is happening is that when you click the checkbox, the isChecked is automatically set to true, then toggleIsChecked() is fired and isChecked is set to false (isChecked is set twice when you click the checkbox). To solve this you have to not set isChecked if the target is the checkbox. Something like this:
JS
toggleIsChecked(event) {
if (event.target.tagName === 'INPUT') {
return true; //checkbox has been clicked, do nothing!
}
this.isChecked = !this.isChecked;
}
HTML
<button type="button" click.trigger="toggleIsChecked($event)">
<input type="checkbox" checked.bind="isChecked"> ${isChecked}
</button>
Same explanation with Fabio Luz & going to do the same thing, but instead of checking event target tag name, You can use self binding behavior, like this
<template>
<require from='./self'></require>
<h1>${heading}</h1>
<button type="button" click.delegate="toggleIsChecked() & self">
<input type="checkbox" checked.bind="isChecked"> ${isChecked}
</button>
</template>
What self binding behavior does here is to ensure toggleIsChecked only fires when you click on button itself, not its descendant, same with this block of code:
toggleIsChecked(event) {
if (event.target === this.button) {
// Do your thing
}
}
Note: self just got merged, but has not been released yet. I have included the code at this gist: https://gist.run/?id=5e66dfd996d852344a524010ae82a936
You can read more about the PR here: https://github.com/aurelia/templating-resources/pull/263
Kind people at the Aurelia Gitter chat provided me with an answer. What is happening in my gist is that the default event handler is not being called. Reason for this is that Aurelia automatically calls the event.preventDefault() function. In order for the default event handler to be called I must return true from my own event handler. Here's a working gist proving how it works: https://gist.run/?id=3cb545572065cffd737f98788a4105a1
Thank you all for your answers. I decided to answer this myself since I got the answer from the Gitter chat, but the kudos belongs to the awesome Aurelia community and especially #CasiOo.
How do I make an AJAX call or submit form in ATG. Here's the code I'm using:
document.getElementById("myP").style.visibility = "hidden";
Will this work in the sense of ATG?
For ajax calls, in applications like spring and standard J2EE, you do a GET or POST call using AJAX for the form's action URL.
In ATG, you dont have action URLs. Rather, you have bean references, somewhat like
<dsp:form id="myForm">
<dsp:input type="myField1" bean="ABCFormHandler.myField1" />
<dsp:input type="myField2" bean="ABCFormHandler.myField2" />
<dsp:input type="submit" bean="ABCFormHandler.myProcess" style="display:none"/>
<dsp:input type="button" id="formSubmitter" value="Submit"/>
</dsp:form>
Here, we have defined a method called handleMyProcess in the ABCFormHandler, which also contains the properties myField1 and myField2.
Notice that the form tag has the id "myForm".
Next, there are two fields viz. "myField1" and "myField2".
There is a submit button which is hidden, by setting the style to "display:none"
Lastly, we have a normal button, for which we have simply set an id called "formSubmitter".
Now, we will use this normal button to submit the form with id "myForm".
We just need to call the form's submit() method using jQuery, which can be done simply as:
$('#formSubmitter').on('click', function(){
$form = $('#myForm');
$form.submit();
});
Hope this helps!
I am trying to implement multiple submit buttons in a Struts jsp. To do so, I am passing the value of the submit button to the ActionForm and reading that value. My setup is like this:
JSP
...snip...
<form name = "formName" action = "action.do" onSubmit = "return myFunc()" method = "POST">
<input type = "text" name = "myValue" />
<input type = "submit" name = "myButton" value = "Submit" />
</form>
...snip...
MyForm
...snip...
String myButton;
String myValue;
[Generated getters and setters]
...snip...
As far as I can tell, the submit button from the jsp should submit a value of 'Submit' to the myButton variable in MyForm, but when I try to access it in the Action Class I always get a value of null.
I know that my struts-config.xml file is configured properly because the text input in the jsp successfully populates the 'myValue' variable in MyForm, which can be read by my Action Class.
Is there something special about submit buttons in Struts that I am missing? It seems everything should work...
Any help would be appreciated.
You need to use a input type hidden for that, value property of submit buttons is only used for text on the button not for sending that value with the rest of the form data.
It is possible by using Struts JSP tags to define the form and the submit button. Why dont you use Struts JSP tags?
<html:form action="action.do">
<html:submit property="myButton" value="Submit"/>
Hope it helps
I have a problem with this jQuery Change function:
<input type="radio" name="words" value="8" checked><span class="word">word1</span>
<input type="radio" name="words" value="6"><span class="word">word2</span>
$("input[#name='words']:checked").change(function(){
alert("test");
});
The problem is that the event gets only triggered when I click the first option (value=8) which is checked by default.
How Can I trigger the event when clicking any other option?
Please note: I have tried the above function on both Chrome and Firefox and I have the same problem.
Thanks!
should be $("input[name='words']").change(function(){
You are only binding the event handler to :checked elements. So as the first input has the checked property set, that's the only one that receives the event handler. Remove :checked and it should work fine:
$("input[name='words']").change(function(){
alert("test");
});
Here's a working example. Note that I've also removed the # character from your selector. You haven't needed it since like jQuery 1.2 or something like that.
$("input[#name='words']:checked").change(function(){
That finds all the input elements with the name words (actually, it won't work: the XPath-style # attribute selector has been removed since jQuery 1.3) that are checked and binds an event handler to them. If the elements are not checked when the selection is made, no event handlers will be bound to them.
The easiest solution is to bind to all relevant elements, and only fire code if they have been unchecked:
$('input[name="words"]').change(function() {
if (!this.checked) { // checkbox was checked, now is not
alert('unchecked');
}
});
working link
$("input[name='words']").change(function(){
alert("test");
});
$("input[#name='words']:checked").change(function(){
alert("test");
});
You've subscribed change function only to the radiobuttons whitch is checked (:checked). Remove it from selector.
$("input[name='words']").change(function(){
alert("test");
});
Code: http://jsfiddle.net/DRasw/1/
Give id property of Radio buttons
Add property of OnClick="CheckClick()" on second redio button.
In jquery CheckClick() function
if ($('#rb2').attr('checked')) {
alert('rb2 test');
}