Task on creation does not use server response


#1

https://recordit.co/HiDtZNjveA

Gantt placeholder task id is not updated on create, and it’s not marked as ‘updated’.
Previously it worked well.
Possibly it’s regression after version upgrade. Current version is 6.3.4.
Tried to disable all events but that didn’t help.


#2

Hello,
Probably, it should be related to Gantt configuration, but it is hard to suggest what might be wrong as I don’t see your code.
Please send me a ready demo with all the necessary JavaScript and CSS files so that I can reproduce the issue locally.


#3

Unfortunately it’s impossible to create such demo, we have too much code built on Gantt.
Do you have access to Gantt’s source code?
If so you can go through the chain from receiving server response till the applying received ID to updated task and checked what can affect this chain in the middle and break it.

My assumption is that maybe expected response has wrong format. We currently send

{
action: “inserted”,
tid: number
}

maybe it expects other format in 6.3.4?

Also have the second question related: how can I access docs version for specific version? I don’t see possibility to select docs version on https://docs.dhtmlx.com/gantt/api__refs__gantt.html


#4

Hello,
I’ve checked the related code in dhtmlxgantt.js v6.3.4 and can’t see any obvious reason for it not to work.

Could you switch the app to a non-minified version of dhtmlxgantt.js (found in codebase/sources/dhtmlxgantt.js) and run a debugger through the after-insert callback inside the Gantt?

In order to do it, you’ll need to put a breakpoint in codebase/sources/dhtmlxgantt.js at line 9034:

    DataProcessor.prototype.afterUpdate = function (that, xml, id) {
        debugger; // <-- here
        var _xml;

Then create a task on the page and execute this function step by step.
Normally, the code should enter the function afterUpdateCallback (line 9078 of codebase/sources/dhtmlxgantt.js v6.3.4):

            if (tag) {
                var action = tag.action || this.getState(id) || "updated";
                var sid = tag.sid || id[0];
                var tid = tag.tid || id[0];
                that.afterUpdateCallback(sid, tid, action, tag, mode);

And inside afterUpdateCallback it should reach these lines (line 9004):

        switch (action) {
            case "inserted":
            case "insert":
                if (tid != sid) { // tslint:disable-line
                    this.setUpdated(sid, false);
                    this.$gantt[this._methods[2]](sid, tid);

this.setUpdated(sid, false); — removes temporary styles from new item (changes font weight from bold to normal)
this.$gantt[this._methods[2]](sid, tid); — applies the id

So can you please run the debugger and tell me what you see?


#5

My dhtmlxgantt.js contains minified version. “afterUpdate” present there but code is obfuscated to understand something.
Have also dhtmlxgantt.d.ts, it contains non-minified version but nothing is found when search file with “afterUpdate” word


#6

Hello,
Unless you’re using a trial version of the component, the package you download from our website contains the non-minified version of dhtmlxgantt.js . You can find it in codebase/sources/dhtmlxgantt.js of the zip package you download.
In case you no longer have the zip package at hand and can’t download the new one - can you please send me a private message with your license number or with the email address used to obtain the license, I’ll send you a package for your version under the appropriate license.


#7

Hi, did debug and look what I found.

At the end of DataProcessor.prototype._sendData = function (dataToSend, rowId) { there is query line with ajax.query(queryParams); is fired. queryParams looks like
{ callback: some function, method: "POST" (when create) or "PUT" (when update) }

So when method is “PUT”, then callback is fired, if “POST” it’s not fired.

Checked
gantt.ajax = webpack_require(
/*! ./common/ajax */ ‘./sources/core/common/ajax.js’
)(gantt);

but can’t debug further, because don’t have core folder in sources (only ‘ext’, ‘locale’, ‘skins’)


#8

Hello,
It is hard to suggest what might be wrong as I don’t see your code. The callback should be always called after the server returns the response and the response status is 200 (i.e. no server error).
Also, you don’t need to look for the core folder, all the code is inside the dhtmlxgantt.js file.


#9

Hi, created recording to illustrate better


#10

Hello,
You can find the ajax.js code definition in dhtmlxgantt.js file that you have since all modules are already bundled there,
you can do a text search either by the following function definition:

_call: function(method, url, postData, async, onLoad, headers)
or you can do a text search for Microsoft.XMLHTTP string, (it’s a legacy callback which wasn’t removed from code). You’ll find this string at the very beginning of the _call function, which you’ll need to inspect.

There you’ll see the XMLHttpRequest object is created and you’ll be able to put console logs in onreadystatechange callback of XMLHttpRequest.

You can also add this event handler somewhere in your code, in case there is some ajax error that is registered by Gantt:

gantt.attachEvent("onAjaxError", function(xhr){
   console.log("Ajax Error", xhr);
});

#11

Thanks for the hint!
Issue solved.

We sent 201 status on create but looks like new gantt version considers 201 as error.
changing it to 200 make everything work fine.


#12

Hello,
Thank you for the update!
It looks like a bug from our end, since all 2xx statuses are supposed to indicate successful action. I’ve already submit the bug to our tracker and linked this conversation to it. I’ll post here as soon as we fix it, in case you’ll want to switch back to 201 status for create actions