Hi All and @nolimits4web ,
I have impressed with Framework7, so thought to develop my application using Framework7 v2.
I have a form page which contains multiple dropdowns where data load from server as JSON. I achieved this through multiple asynchronous app.request on pageInit. Now my question is how can i populate these data to appropriate select tags through Template7. I tried with data attribute which not working. And once all dropdown’s data loaded then how DOM know that all ajax requests were completed to file the form
Please help to achieve this to succeed in my first app using Framework7 v2
<template>
<form id="testForm">
<select id="select1" name="select1">
{{#each list1 }}
<option value="{{ this.itemValue }}">{{this.itemText}}</option>
{{/each}}
</select>
<select id="select2" name="select2">
{{#each list2 }}
<option value="{{ this.itemValue }}">{{this.itemText}}</option>
{{/each}}
</select>
</form>
</template>
<script>
return {
on: {
pageInit: function() {
/*First DropDown data Ajax call*/
app.request({
.
.
.
success: function(data, status, xhr) {
/*list1 is available*/
list1=data;
}
});
/*Second DropDown data Ajax call*/
app.request({
.
.
.
success: function(data, status, xhr) {
/*list12 is available*/
list2=data;
}
});
/*Form fill data Ajax call*/
app.request({
.
.
.
success: function(data, status, xhr) {
/*Form Values*/
responseData={"select1":"val1", select1":"val2"}
app.form.fillFromData("#testForm", responseData);
}
});
}
}
}
</script>