Alpaca - Is there a form onReady? - alpacajs

Question

Using Alpaca js I am trying to use setValue of another alpaca form on the fly
I get
SyntaxError: JSON.parse: unexpected end of data at line 8 column 5 of the JSON data
My guess is that its happening because the form is not rendered yet? is there a way to set its "onReady" function?
Simple example to demonstrate the scenario:
$(document).ready(function(){
createForm("alpacaForm1","firstName","Copy from this form","FORM1 value","string");
});
function updateForm(){
createForm("alpacaForm2","firstName","To this form", "FORM2 value","string");
$("#alpacaForm2").alpaca().setValue($("#alpacaForm1").alpaca().getValue());
}
function createForm(divName,fieldName,fieldLable,fieldVal,fieldType){
$("#" + divName).alpaca({
"data": { fieldName: fieldVal },
"schema": {
"type": "object",
"properties": {
fieldName: {
"type": fieldType,
"title": fieldLable
}
}
}
});
}
<!-- jquery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- bootstrap -->
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- handlebars -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<!-- alpaca -->
<link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca#1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca#1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<div id="alpacaForm1" ></div>
<div id="alpacaForm2" ></div>
<button onclick="updateForm()">create form 2 and cop from form 1 </button>

Answer 1

The postRender allows to perform operations when a control is rendered.
A way to use this callback is to modify createForm to receive a postRender callback function as an argument and configure it as an option for the form.
$(document).ready(function() {
const postRender = () => {};
createForm("alpacaForm1", "firstName", "Copy from this form", "FORM1 value", "string", postRender);
});
function updateForm() {
const postRender = control => control.setValue($("#alpacaForm1").alpaca().getValue());
createForm("alpacaForm2", "firstName", "To this form", "FORM2 value", "string", postRender);
}
function createForm(divName, fieldName, fieldLable, fieldVal, fieldType, postRender) {
$("#" + divName).alpaca({
"data": {
fieldName: fieldVal
},
"schema": {
"type": "object",
"properties": {
fieldName: {
"type": fieldType,
"title": fieldLable
}
}
},
"postRender": postRender
});
}
<!-- jquery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- bootstrap -->
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- handlebars -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<!-- alpaca -->
<link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca#1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca#1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<div id="alpacaForm1"></div>
<div id="alpacaForm2"></div>
<button onclick="updateForm()">create form 2 and cop from form 1 </button>
A better way that minimizes DOM manipulation is to forward data to override the second form data as an argument in createForm function.
function createForm(divName, fieldName, fieldLable, fieldVal, fieldType, dataOverrides={}) {
$("#" + divName).alpaca({
"data": {
fieldName: fieldVal,
...dataOverrides
},
"schema": {
"type": "object",
"properties": {
fieldName: {
"type": fieldType,
"title": fieldLable
}
}
},
});
}
Then pass down values from the first form when creating the second form.
function updateForm() {
const dataOverrides = $("#alpacaForm1").alpaca().getValue();
createForm("alpacaForm2", "firstName", "To this form", "FORM2 value", "string", dataOverrides);
}