List Input type

[dkmurakaru]

I needed to render select components inside listinputs so I setup the template as follows:
`

	{% if (typeof hide_remove === 'undefined') { %}
	<div class="col-12">
	
		<button class="btn btn-sm btn-outline-primary">
			<i class="ion-plus"></i> Add new
		</button>
		
	</div>
	{% } %}

	{% for ( var i = 0; i < options.length; i++ ) { %}
	<div class="col-12">
		<div class="input-group">
			{% if (options[i].inputtype === SelectInput) { %}
			<select class="form-control">
				<option value="">{%=options[i].placeholder%}</option>
				{% for (var j = 0; j < options[i].data.options.length; i++) { %}
				<option value="{%=options[i].data.options[j].value%}">{%=options[i].data.options[j].text%}</option>
				{% } %}
			</select>
			{% } else { %}
			<input name="{%=key%}_{%=i%}" type="text" class="form-control" value="{%=options[i].value%}" placeholder="{%=options[i].placeholder%}" />
			{% } %}
		</div>
		<br/>
	</div>
	{% } %}
	<div class="col-12">
		<button class="btn btn-sm btn-danger">
			<i class="ion-trash-a"></i> Remove
		</button>
	</div>
		
</div>`

and the field definition as follows:
{ name: "Field Filters", key: "$fields", inputtype: ListInput, data: { options: [ { placeholder: "Select the field", text: "Field", key: "$field", inputtype: SelectInput, data: { options: [] } }, { placeholder: "Select the operation to apply to this field", text: "Operation", key: "$operation", inputtype: SelectInput, data: { options: [] } }, { placeholder: "Select the comparator to apply with this operation", text: "Comparator", key: "$comparator", inputtype: SelectInput, data: { options: [] } }, { placeholder: "Enter the name you want the field to be called", key: "$as", text: "As", inputtype: TextInput } ] }, onChange: function(node, value, input) { console.log(value); // $(node).find('thead').append('<th>'+ +'</th>') // $(node).find('tbody tr').append('<td>{{' ++ '}}</td>') } }

The issues are:

• I can only render the first select options after which subsequent fields don't get rendered;
• I can't listen to onChange events on either the child fields or the parent;
• Add and remove buttons don't work.

I'm curious is it possible to render the input type from the option directly in the template by calling it's init function?

How can I wire the add and remove buttons?

Thanks

[givanz]

Hi

Can you post an url with example or codepen?

Can you check for javascript errors in developer tools (F11 in the browser) this might be the cause for rendering only the first elements and probably for the rest of issues.