How to load row axis based on selected items from dropdown by the user

Asked by vicky romanic
2 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.

backend-designations.php

backend-employees-admin.php

index-admin1.html

Answer posted by Dan Letecky [DayPilot]
2 years ago.

You need to make sure that the URL used in dp.rows.load() call returns the data correctly. I recommend using browser developer tools (Ctrl-Shift-I or Option-Command-I), the Network tab, to inspect the HTTP call.

First, check that backend_employees_admin.php script is called and that the parameter (resource=) is correct.

The HTTP response body should look like this:

[
  {id :1, name: "Employee, Name"},
  // ...
]

Also, check the Console tab in the developer tools for any JavaScript errors.

Comment posted by vicky romanic
2 years ago.

I have checked backend_employees_admin.php
The output is as follows:-

Notice: Undefined index: resource in C:\xampp\htdocs\vishalProgram\daypilot\backend_employees_admin.php on line 4 
 
Notice: Undefined index: resource in C:\xampp\htdocs\vishalProgram\daypilot\backend_employees_admin.php on line 32 
[{"id":"22683","name":"CASSIM, Hossen","resource":"11"},{"id":"20133","name":"GOOLAMY, Mahmad Hafezal","resource":"10"},{"id":"47597","name":"GROOCHURN, Vickram Mehear","resource":"12"},{"id":"9792","name":"JOYNAUTH, Assoo","resource":"10"},{"id":"20990","name":"KUPPAN, Coopoosamy","resource":"10"},{"id":"31615","name":"MAMOODEE, Bijayen","resource":"11"},{"id":"17760","name":"MOOTOO, Jean Patrice L.","resource":"10"},{"id":"61212","name":"MUDUN, Sanjay","resource":"12"},{"id":"31658","name":"MUNDHOO, Ajay","resource":"11"}]

But still the row axis not working.

Comment posted by Dan Letecky [DayPilot]
2 years ago.

As you can see, the output includes an error message. You need to fix the problem.

The if ($_GET["resource"]) condition is incorrect - you need to check the query string parameter using isset():
https://www.php.net/manual/en/function.isset.php

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

How to load row axis based on selected items from dropdown by the user

Products

Learn

Get Support

DayPilot Pro