I have one page with a first request where I recover all the necessary data for my page.
This information is like this one:
"A1": 8, "A2": 61, "A3": 585, "A4": null.........etc
Where every value is the id of a specific select which one is loaded in knockout:
<div class="col-lg-3 col-md-3">
<label class="obligatory">*</label>
<label for="id_A1">A1</label>
<select class="form-control" data-bind="options: $root.A1List, optionsText: 'A1name' , optionsValue: 'idA1', value: $data.A1, optionsCaption: '---------------'"></select>
</div>
<div class="col-lg-3 col-md-3">
<label class="obligatory">*</label>
<label for="id_A2">A2</label>
<select class="form-control" data-bind="options: $root.A2List, optionsText: 'A2name' , optionsValue: 'idA2', value: $data.A2, optionsCaption: '---------------'"></select>
</div>
<div class="col-lg-3 col-md-3">
<label class="obligatory">*</label>
<label for="id_A3">A3</label>
<select class="form-control" data-bind="options: $root.A3List, optionsText: 'A1name' , optionsValue: 'idA3', value: $data.A3, optionsCaption: '---------------'"></select>
</div>
<div class="col-lg-3 col-md-3">
<label class="obligatory">*</label>
<label for="id_A4">A4</label>
<select class="form-control" data-bind="options: $root.A4List, optionsText: 'A4name' , optionsValue: 'idA4', value: $data.A4, optionsCaption: '---------------'"></select>
</div>
These select have Dependency On Each Other in function of the choice you choose:
root.A2List = ko.observableArray([]);
root.A2ListFuncion = ko.computed(function(){
$.ajax({
url: RUTA_GLOBAL + "/api/A2/",
dataType: 'json',
async: true,
type:'GET',
data: {
A1: root.Data().A1()
},
success: function(data) {
root.A2List(ko.mapping.fromJS(data)());
}
});
}, root);
root.A3List = ko.observableArray([]);
root.A3ListFuncion = ko.computed(function(){
$.ajax({
url: RUTA_GLOBAL + "/api/A3/",
dataType: 'json',
async: true,
type:'GET',
data: {
A1: root.Data().A1()
A2: root.Data().A2()
},
success: function(data) {
root.A3List(ko.mapping.fromJS(data)());
}
});
}, root);
root.A4List = ko.observableArray([]);
root.A4ListFuncion = ko.computed(function(){
$.ajax({
url: RUTA_GLOBAL + "/api/A4/",
dataType: 'json',
async: true,
type:'GET',
data: {
A1: root.Data().A1()
A2: root.Data().A2()
A3: root.Data().A3()
},
success: function(data) {
root.A4List(ko.mapping.fromJS(data)());
}
});
}, root);
I got all the values of every select Correctly , but I lose the correct value or id Which one Should be selected the first time the user make the request . I understand due to computed list of my select , feature I want but I need the first time When the pre -selected value in every select the first time the page is loaded.
Any idea?
Thanks Artem by your clue:
root.A3ListFuncion = ko.computed(function(){
$.ajax({
url: RUTA_GLOBAL + "/api/A3/",
dataType: 'json',
***async: false,***
type:'GET',
data: {
A1: root.Data().A1()
A2: root.Data().A2()
},
success: function(data) {
root.A3List(ko.mapping.fromJS(data)());
}
});
Changing the ajax request to async false the problme was resolved.