DayPilotHow to load row axis based on selected items from dropdown by the user
Asked by vicky romanic
4 years ago.
4 years ago.
I got the following tables:
person{id,last,first,designation_id}
designation{id,name}
I have a dropdown on top with all the designation name. Initially,when the page is loaded the system should load all the person on row axis then when the user choose an a particular designation, the row axis will change and display person having this designation_id.
Find my code below it is not working if someone can really help me doing so.
The dropdown is ok, it load all designation name
Dropdown parts:
<div class="space">
Employee: <select id="employee"></select>
</div>
loadResources();
document.querySelector("#employee").addEventListener("change", (ev) => {
loadEvents();
});
async function loadResources() {
const {data} = await DayPilot.Http.get("backend_designations.php");
var select = document.querySelector("#employee");
data.forEach(function(item) {
var option = document.createElement("option");
option.value = item.id;
option.innerText = item.name;
select.appendChild(option);
});
loadEvents();
}
The only issue that I'm having is when page load no data in row axis and even when select one option.
Row axis code from index_admin.html
function loadEvents() {
const employee = document.querySelector("#employee").value;
const url = `backend_employees_admin.php?resource=${employee}`;
dp.rows.load(url, () => {
});
}
backend_employees_admin.php coding:
Please if someone could improve the code for me.