Is it possible to call multiple functions on click of an html element?
For example:
<input type="text" click.delegate="myFunc1();myFunc2()" />
Simply write a wrapper function to call your functions. And call the parent function on button click.
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 using Vue 2 and I am using an anchor tag as a "button" (for styling purposes with an svg).
The drawback of using an anchor tag in this way is that you can't disable it in the same way as a button.
I would like to make a vue component that simply wraps an anchor tag. I would like the component to pass all properties of the custom component onto the child anchor tag so that someone can use it like this:
<custom-comp id="closeButton" title="Close" class="c-btn" #click="close" :disable="true"></custom-comp>
I want to intercept the click on the child anchor tag and only emit that if the component is not disabled.
How can I achieve this?
You can't. disable property is used only in form elements. What you're looking for here is to use v-if:
<a id="closeButton" title="Close" class="c-btn" #click="close" v-if="isConditionMatched">
Only show if isConditionMatched returns true
</a>
Or, conditionally you can use return false statement inside your method:
close() {
if(!isConditionMatched) return false;
// continue your close function
}
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 noticed that if I define a JavaScript function in the JS panel and include the function in an onclick attribute in the HTML mark-up, the function is not recognized. But if I define the same function using opening and closing script tags in the HTML panel like so:
<script>
function myfunction(){
alert("chow");
}
</script>
<button id = "mybutton" onclick = "myfunction()">Click me</button>
the function is recognized.
Example where function is defined in HTML panel
Example where function is defined in JavaScript panel
You just have to configure jsFiddle to not wrap the JS code in the load or ready event handler (which it does by default):
Otherwise the function will be local to those event handlers, not global. To make event handlers defined HTML work, you have to define the function in global scope.
More information can be found in the documentation.
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).