How to create a VisualNEO Web input element at runtime using JavaScript? - Forum

Forum Navigation
You need to log in to create posts and topics.

How to create a VisualNEO Web input element at runtime using JavaScript?

Hi everyone,

I would like to create an input element dynamically at runtime in VisualNEO Web using JavaScript code.

For example, I want to generate a new <input> field (the style and variable should be the same like pre create input)and append it to a specific container (like a div) when a button is clicked.

Thank you!

BeginJS
// 1. We define Container (let's say you have named it Container1)
var container = $('#Container1');

// 2. We measure how many inputs are already inside the Container
to know the serial number (e.g. Input 1, Input 2, etc.)
var count = container.find('input').length + 1;

// 3. We create the new input.
The "form-control" class is the class of Bootstrap that gives the classic style of VisualNEO.
var newInput = $('<input type="text" id="DynamicInput_' + count + '" class="form-control" style="margin-top: 10px; " placeholder="New Input ' + count + '">');

// 4. (Optional) If you want the new input to automatically save what you write
to its own variable in VisualNEO (e.g. [MyVar1], [MyVar2] etc.)
newInput.on('input', function() {
var varName = 'MyVar' + count; Creates the name e.g. MyVar1
$rootScope[varName] = $(this).val(); It passes it to the memory of VisualNEO
if(!$rootScope.$$phase) $rootScope.$apply();
});

// 5. Add it (append) inside Container1
container.append(newInput);
EndJS

 

luishp, alangonzalez91 and 2 other users have reacted to this post.
luishpalangonzalez91danitoasmat