After opening the modal, I am creating some functions. The RefreshBirths() function requires the motherId and fatherId which are obtained from the getDictionaryMother() and getDictionaryFather() functions (these display my mothers and fathers on the page so that I can retrieve values in the refreshBirths() function).
I have noticed that the refreshBirths() function is receiving my ids too early, resulting in undefined ids at the end.
While calling my refreshBirths() function in the .done section of the mother/father methods resolves the issue, I prefer explicitly doing it in a specific part of the code.
Even though this solution works, I would rather have the method called elsewhere:
$('#create-modal').on('shown.bs.modal', function() {
refreshBreeds();
getDictionaryMother();
getDictionaryFather();
$.when(getDictionaryFather()).done(function() {
refreshBirths();
});
});
The problem remains unresolved, but I wish to execute that method in a different location.
function getDictionaryMother() {
$.ajax({
url: "/admin/api/dictionary/" + "ANIMAL_MOTHER",
type: "GET",
dataType: "json"
})
.done(function(response) {
$('#mother-create').empty();
$('#mother').empty();
response.forEach(function(mother){
$('#mother-create').append('<option value='+ mother.id +'>'+ mother.value +'</option>');
$('#mother').append('<option value='+ mother.id +'>'+ mother.value +'</option>');
});
refreshBirths();
})
.fail(function(jqxhr, textStatus, errorThrown) {
displayErrorInformation("Cannot get dict: " + name + " due to: " + jqxhr.responseText);
});
}