search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to refresh gannt chart based on dropdown values

Asked by vicky romanic
8 months ago.

I got two tables:
person{id,first,last,designation}
leave_event{id,person_id,leave_start,leave_end,priority}
I got a dropdown{ Senior,Attendants,Drivers}- which is the data in designation field.When I select one option the data should be refreshed and give me the person in that designation group and their corresponding planned leave. But I'm stuck it did not work.Please find my coding in the file uploaded.Let me know my mistake.

A help will be more appreciated

Answer posted by Dan Letecky [DayPilot]
8 months ago.

The following tutorial includes a project that displays a drop-down list with locations:

https://code.daypilot.org/61166/php-shift-planning-javascript-html5-mysql-database

When a user selects an item, the Scheduler view gets updated. The logic related to the drop-down list looks like this:

var locations = {
  list: [],
  find: function (id) {
    if (!locations.list) {
      return null;
    }
    return locations.list.find(function (item) {
      return item.id === id;
    });
  },
  element: document.querySelector("#locations"),
  activate: function (location) {
    var item = location;
    if (typeof location !== "object") {
      item = locations.find(location);
    }
    dp.events.list = [];
    dp.rows.load("backend_people.php", function (args) {
      args.data.splice(0, 0, {id: "L" + item.id, name: item.name, type: "location"});
    });
    dp.events.load("backend_assignments.php?location=" + item.id);
  },
  load: function () {
    DayPilot.Http.ajax({
      url: "backend_locations.php",
      success: function(ajax) {
        locations.list = ajax.data;
        locations.element.innerHTML = '';

        locations.list.forEach(function (item) {
          var option = document.createElement("option");
          option.value = item.id;
          option.innerText = item.name;
          locations.element.appendChild(option);
        });

        locations.activate(locations.list[0]);
      }
    });
  },
  init: function() {
    window.addEventListener("DOMContentLoaded", function() {
      locations.element.addEventListener("change", function(ev) {
        locations.activate(this.value);
      });

      locations.load();
    });
  }
};

locations.init();
Comment posted by vicky romanic
8 months ago.

No this does not work for me.

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