Hi,
I am using the DHTMLX Gantt library in my Ruby on Rails application. I have implemented logic to check when a task is dragged, and if there is a delay, the task’s color changes to orange (default is green). This functionality was working perfectly, but all of a sudden, it stopped working, even though no changes have been made to the code.
Below is a snippet of the relevant code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<% content_for :head do %>
<%= stylesheet_link_tag 'dhtmlxgantt-enterprise/dhtmlxgantt', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'dhtmlxgantt-enterprise/skins/dhtmlxgantt_terrace', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=6.1.7' %>
<%= stylesheet_link_tag "page_specific/gantt/controls_styles.css" %>
<script src="https://code.jquery.com/jquery-3.3.1.min.js?v=6.3.7" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.dhtmlx.com/edge/dhtmlx.js?v=6.3.7"></script>
<link rel="stylesheet" href="https://cdn.dhtmlx.com/edge/skins/terrace/dhtmlx.css?v=6.3.7">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?v=6.3.7">
<% end %>
The JavaScript code to handle task updates is as follows:
gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
var current_task = gantt.getTask(id);
const diff_no_of_months = getMonthDifference(projectInitialStartDate, changedStartDate, subscription);
console.log('diff_no_of_months:', diff_no_of_months);
if (parseInt(diff_no_of_months) > 0) {
current_task.color = '#f8a13f';
} else {
current_task.color = '#9FE5C5';
}
});
I suspect that the issue might be related to the version of the DHTMLX Gantt library being used. When I add the following two lines of code, the issue is resolved, and the functionality works again:
<link rel="stylesheet" href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" type="text/css">
<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
After making this change, my updated code looks like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" type="text/css">
<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<% content_for :head do %>
<%= stylesheet_link_tag 'dhtmlxgantt-enterprise/dhtmlxgantt', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'dhtmlxgantt-enterprise/skins/dhtmlxgantt_terrace', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=6.1.7' %>
<%= stylesheet_link_tag "page_specific/gantt/controls_styles.css" %>
<script src="https://code.jquery.com/jquery-3.3.1.min.js?v=6.3.7" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.dhtmlx.com/edge/dhtmlx.js?v=6.3.7"></script>
<link rel="stylesheet" href="https://cdn.dhtmlx.com/edge/skins/terrace/dhtmlx.css?v=6.3.7">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?v=6.3.7">
<% end %>
In short, I would like to understand why the code that was working earlier stopped functioning even though I haven’t updated any library or made changes to the code.
Thanks in advance for your help!