Uncaught TypeError: e.toLowerCase is not a function

Gantt
#1

Hi All,

I am getting below error while using “onLinkDblClick” event.
Uncaught TypeError: e.toLowerCase is not a function

Code:

(function(){
function endPopup(){
modal = null;
editLinkId = null;
}
function cancelEditLink(){
endPopup()
}
function deleteLink(){
gantt.deleteLink(editLinkId);
endPopup()
}

            function saveLink1() {       
                var link = gantt.getLink(editLinkId);
                var slink=[];
                var lagValue = modal.querySelector(".lag-input").value;
                if(!isNaN(parseInt(lagValue, 10))){
                    link.lag = parseInt(lagValue, 10);
                    // slink.push(link);
                }
                //var linkjson= JSON.stringify(slink);
                // linkUpdate(lagValue,linkjson);
                linkUpdate(lagValue,link.source,link.target,link.type);
                gantt.updateLink(link.id);
                if(gantt.autoSchedule){
                    gantt.autoSchedule(link.source);
                }
                endPopup();
            }
            var runDS = true; // DMND0117578: Added runDS condition to disable buffer functionality temporarily
            if({!isDS} && runDS) {
                var modal;
                var editLinkId;
                gantt.attachEvent("onLinkDblClick", function(id,e){
                    editLinkId = id;
                    var link = gantt.getLink(id);
                    var linkTitle;
                    switch(link.type){
                        case gantt.config.links.finish_to_start:
                            linkTitle = "FS";
                            break;
                        case gantt.config.links.finish_to_finish:
                            linkTitle = "FF";
                            break;
                        case gantt.config.links.start_to_start:
                            linkTitle = "SS";
                            break;
                        case gantt.config.links.start_to_finish:
                            linkTitle = "SF";
                            break;
                    }

                    linkTitle += " " + gantt.getTask(link.source).text + " -> " + gantt.getTask(link.target).text;

                    modal = gantt.modalbox({
                        title: linkTitle,
                        text: "<div>" +
                        "<label>Lag/Lead <input type='number' class='lag-input' /></label>" +
                            "</div>",
                        buttons: [
                            {label:"Save", css:"link-save-btn", value:"save"},
                            {label:"Cancel", css:"link-cancel-btn", value:"cancel"},
                            {label:"Delete", css:"link-delete-btn", value:"delete"}
                        ],
                        width: "1000px",
                        type: "popup-css-class-here",
                        callback: function(result){
                            switch(result){
                                case "save":
                                    saveLink1();
                                    break;
                                case "cancel":
                                    cancelEditLink();
                                    break;
                                case "delete":
                                    deleteLink();
                                    break;
                            }
                        }
                    });
                    modal.querySelector(".lag-input").value = link.lag || 0;
                    //any custom logic here
                    return false;
                });
            }
        })();

This is working fine on other sandbox.

#2

Hello Sheetal,

I cannot reproduce that issue in newer versions:
http://snippet.dhtmlx.com/60434cbf7
http://snippet.dhtmlx.com/8c96acd3e

Probably, there was a bug in the 4.0 version or that version didn’t have that functionality:

    buttons: [
        { label:"Save",   css:"link_save_btn",   value:"save" },
        { label:"Cancel", css:"link_cancel_btn", value:"cancel" },
        { label:"Delete", css:"link_delete_btn", value:"delete" }
    ],

If you change it to the following one, it works without error messages:

    buttons: ["Save","Cancel","Delete"],

To make the buttons working, you need to change the condition that checks the result in the callback function:

callback: function(result){
    console.log(result)
    switch(result){
        case '0':
        gantt.message("Link saved")
        saveLink1();
        break;
        case '1':
        gantt.message("Cancel")
        cancelEditLink();
        break;
        case '2':
        gantt.message("Link deleted")
        deleteLink();
        break;
    }
}

Here is the snippet:
http://snippet.dhtmlx.com/5e2f86787

#3

Hi Ramil,

Thanks for information.Current DHTMLx version is 4.0. I want to upgrade it to 6.1.3.Could you please share upgrade document if you have?

#4

Hello Sheetal,
We have the following article that explains how to migrate to a new version.
You can start by upgrading to the 6.0 version:
https://docs.dhtmlx.com/gantt/migrating.html#5260

#5

Hi Ramil,

Thanks for the reply.I have understood what are changes in latest release from given link.But I want to know how can i upgrade the existing libraries.Just updating Static resource with new zip file resolve my issue?

Or something else we have to do?

#6

Hello Sheetal,

But I want to know how can i upgrade the existing libraries.

You just need to load the files from the newer version and make sure that old files are not connected.

Just updating Static resource with new zip file resolve my issue?

If you mean Salesforce - you only need to load the zip file with a newer version. However, you might encounter some issues because of the deprecated parameters. In that case, you need to migrate your settings. Also, if you used inner methods or functions, some of your code might stop working, and you will need to update it (and use only the public methods and functions to avoid that in the future).