CODEWITHSUNDEEP
javascriptgantt-chartfrappefrappe-charts
Paulami Das
Paulami Das

Reputation: 11

Frappe gantt stopped working, error giving as Gantt not defined

I am using the frappe gantt chart library in my html file, it was all working fine till last week, after that it suddenly throwing me error as "Gantt not defined", though I’ve used online cdn links of the library, those are fine, it was working fine with that same link before. What can be done to fix this?

I have tried to add this locally and then use it, it is still the same, in network tab I can see it is loading.

Links I am using:

I have tried to add that library locally, then as well I saw in my network tab the frappe gantt library is loading, it was working fine, after a release it stopped working recently.

Here this error is coming on loading of the gantt chart library, error coming as below, though in network tab we can see that.

jira/:338 Error initializing Gantt chart: ReferenceError: Gantt is not defined
    at HTMLDocument.<anonymous> (jira/:283:21)
    at e (jquery-3.6.0.min.js:2:30038)
    at t (jquery-3.6.0.min.js:2:30340)

code snippet -

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frappe Gantt Chart Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    #gantt {
      height: 500px;
      overflow: auto; /* Allow scrolling if needed */
    }
  </style>
</head>

<body>
  <h2>Gantt Chart Example</h2>
  <div id="gantt"></div>

  <script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const tasks = [
        {
          id: "Task 1",
          name: "Task 1",
          start: "2023-09-01",
          end: "2023-09-05",
          progress: 100,
        },
        {
          id: "Task 2",
          name: "Task 2",
          start: "2023-09-03",
          end: "2023-09-10",
          progress: 50,
        },
        {
          id: "Task 3",
          name: "Task 3",
          start: "2023-09-06",
          end: "2023-09-12",
          progress: 25,
        },
      ];

      const gantt = new Gantt("#gantt", tasks, {
        on_click: (task) => {
          alert(`Task: ${task.name}`);
        },
        on_date_change: (task, start, end) => {
          console.log(`Task date changed: ${task.name} from ${start} to ${end}`);
        },
      });
    });
  </script>
</body>

</html>

Upvotes: 1

Views: 252

Answers (0)

Related Questions