I am using the frappe gantt chart library in my html file, it was all working fine till 13th sep 2024, 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, can anyone guide me what to be done to fix this?
Need urgent resolution on 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 from friday.
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>