Based on this threat I've managed (with special thanks to Tami) to create a dropdown menu with variable year numbers in it.
Now I would like to use that chosen value of that dropdown menu as a (part of the) placeholder for another input field.
I tried this with no luck:
[number* ba-maanden min:1 max:12 placeholder "cf7_get_input="recent-years""]
Does anyone has an idea how to get this done?
Thanks,
Vasco
This is not tested, but should work. You can either add this to your form itself by making it all inline and surrounded with <script> and </script> or add this to your theme's js file.
jQuery(function($) {
$('select[name="ba-maanden"]').on('change', function(){
// Assign variable $placeholder to the chosen value
let $placeholder = $(this).val();
// replace 'your-field-name' with the cf7 field name
$('input[name="your-field-name"]').attr('placeholder', $placeholder);
});
});
Related
Initially I setted the text as list in use-state and it change to grid when I click on it.How to show the list again when I click?
const [buttonText, setButtonText] = useState('List');
function handleClick() {
setButtonText('Grid');
};
This is the use-state and the function that changes the text.Can anyone help me ?
You can call same method and use ternary operator (check your current state and setState according to it).
function handleClick() {
setButtonText(buttonText == 'Grid' ? 'List' : 'Grid');
};
So i have a b-form-select with a v-model i need to change dynamically my issue is when i change the v-model to another element of the list the :options are taken from the selected value doesn't change
Code example :
<b-form-select :options="ListA" v-model="Depart" value-field="Livreur" text-field="Livreur"></b-form-select>
data(){
Depart:'',
ListA:[],
}
my method is simply :
function(){
this.Depart = this.ListA[0]
}
the list is structured as such :
this.ListA.push({Livreur:"example",id:0})
as far as i know it should change the selected value of the b-form-select but instead nothing at all happens , any ideas ? thank you in advance
Your value-field should probably be id not Livreur, except if Livreur is a unique identifier as well.
Relevant part in the documentation: https://bootstrap-vue.org/docs/components/form-select#changing-the-option-field-names
this.Depart should also not be an object, but the value of the identifier you chose in the value-field property. In your case it should be:
if value-field is id:
this.Depart = this.ListA[0].id
if value-field is Livreur:
this.Depart = this.ListA[0].Livreur
I am implementing the component like this:
<place-autocomplete-field
v-model="field"
name="field"
label="Address lookup"
:api-key="api_key.api_key"
placeholder="Start typing here"
#autocomplete-select="onPlaceInput"
>
</place-autocomplete-field>
...
data() {
return {
api_key,
field: null
};
...
While the #autocomplete-select event fires fine, and delivers the selected value, the value displayed in the component's input field does not update on selecting from the place options. All that is in the input field is whatever was typed in there. This is not how it works in the demo on Github. Can anyone spot what I may be doing wrong?
I have two components inside a parent, one component shows me a list, and I want the other component to show me the details of an item of the list. I'm using the List of this demo https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages
since I have these two components
<list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view>
<full-view on-close="_onClose"></full-view>
I would like to pass the Id of an item clicked on list-view to the full-view. So what would be the best way to execute an event on "full-view" when an item of "list-view" is clicked? I need to pass information from list-view to full-view.
Thank you.
What about of databinding? #SG_ answer is ok, but it can does using simple databinding, as follows:
<list-view data="[[fileData]]" on-item-click="_onItemClick" selected-id="{{idSelected}}"></list-view>
<full-view on-close="_onClose" selected-id="{{idSelected}}"></full-view>
Each element models should have a property "Selected ID", to make it possible to perform databinding. In <full-view> you must need to add a property as follows:
selectedId:{type:String, observer:"selectedIdChanged"}
So, when selectedId changes in <list-view> will also change in <full-view>
Now, you only need to add a new function in <full-view> to do something with this changed selectedId
selectedIdChanged: function(newValue, oldValue){
if(newValue!= undefined && newValue!=null){
//do something with selected Id
}
},
You could give an id for both list-view and full-view, then define & set data attribute/property for <full-view> from the _onItemClick.
<list-view id='l_view' data="[[fileData]]" on-item-click="_onItemClick"></list-view>
<full-view id="f_view" data="{}" on-close="_onClose"></full-view>
And in the script of parent.
_onItemClick: function() {
this.$.f_view.data = this.$.l_view.selected;//or any attribute of the selected item
this.$.pages.selected = 1;
},
I'm creating dijit widget from input:
<input name="serviceName" type="text"/>
input = new ValidationTextBox({required: true}, query('[name=serviceName]')[0])
I have a lot of inputs and I want to batch-process them, giving them to separate function.
The problem is, that I can't find in docs, how to get the input name back from widget (which can be also Select, DateBox etc., neither I can find that property inspecting element in Firebug
function processInput(input) {
var inputName = ???
}
I've tried input.name and input.get('name'), but they are returning undefined.
When instantiating your widget programmatically, properties are usually not copied. It's only when you use declarative markup that these properties are copied. This means that the name property is not copied from your original input node, so it's in fact empty.
When creating your ValidationTextBox, just provide the name property like the example below:
var inputNode = query('[name=serviceName]')[0];
var input = new ValidationTextBox({
required: true,
name: inputNode.name
}, inputNode);
You can then retrieve the name with either input.name or input.get('name').
I also made an example JSFiddle.