'Undefined' buttons in lightbox caused by conflict?

Gantt
#1

I’m using a pretty standard implementation of dhtmlGantt. So far the only customisation is server-side to add some filters.

I’m getting ‘Undefined’ buttons in the default lightbox. The following code is being generated:

<div class="dhx_btn_set dhx_left_btn_set function (){var a=this.concat();for(var i=0;i<a.length;++i){for(var j=i+1;j<a.length;++j){if(a[i]===a[j])a.splice(j--,1)}}return a}_set">
  <div dhx_button="1" class="function (){var a=this.concat();for(var i=0;i<a.length;++i){for(var j=i+1;j<a.length;++j){if(a[i]===a[j])a.splice(j--,1)}}return a}"></div>
  <div>undefined</div>
</div>

After further investigating, it seems to be caused by the following snippet of javascript which I use elsewhere to ensure an array has only unique values:

Array.prototype.makeunique = function() {
    var a = this.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }
    return a;
};

Any ideas why the above code would be injected into the lightbox?

Thanks

#2

Hi,
make sure you’ve specified labels for custom buttons in a gantt.locale object
docs.dhtmlx.com/gantt/api__gantt … other.html

#3

Hi, pardon me getting into this thread, but I have the same problem.

I do not intend to use any custom buttons, just the plain examples to get started. Yet the light-box displays about 20 'Undefined buttons with some java-script stuff

It happens if I run the examples inside a Joomla page, but I don’t really know what could cause this.
I tried setting the labels manually, as suggested for save, delete, cancel. But still no luck.
Any pointers?
Regards
Andre

They all look like this. But I am not setting does buttons. Anything else works as advertised and is rather awesome.

undefined
undefined
#4

For now, a quick fix is to add css below, I can not find the source of the injected java-script

.function {display:none !important; } .function {display:none !important;}

#5

Hello,
the component takes values for a css class and a labels from following configs
docs.dhtmlx.com/gantt/api__gantt … onfig.html
docs.dhtmlx.com/gantt/api__gantt … onfig.html

These are arrays of strings, that should contain names of the buttons.
The code that generate the html looks about following-var button = gantt.config.buttons_left[i]; var html = '<div class="dhx_btn_set dhx_left_btn_set ' + button + '_set">' + '<div class="' + button + '" dhx_button="1"></div>' + '<div>' + gantt.locale.labels[button] + '</div>' + '</div>';
When everything is set as expected, button element receives a correct class name and a label if it’s defined in locale. But in your case it seems like the config arrays contain a functions instead of strings, and thats why there is a weird markup and ‘undefined’ in labels.

Can you give a link to the page with an example, or attach one?

#6

Hi and thanks for the answer.
Sorry for the late reply, I was away for a day.
So i was gong to create demo page for you just to end up NOT generating the problem, so I started digging in the source code and found something rather strange.

I did this to the source around line 5684
…

console.log(this.config.buttons_left); var buttons = this.config.buttons_left; console.log(buttons); for (var i in buttons){ console.log(this.locale.labels[buttons[i]]); html+="<div class='dhx_btn_set dhx_left_btn_set .. //cut of for clear reading.. }

The console then displays this.

[“dhx_save_btn”, “dhx_cancel_btn”] dhtmlxgantt.js (line 5683) //expected, since I
[“dhx_save_btn”, “dhx_cancel_btn”] dhtmlxgantt.js (line 5685) // also expected, just a copy
Save dhtmlxgantt.js (line 5687) //sure
Cancel dhtmlxgantt.js (line 5687) // yes
undefined 28 dhtmlxgantt.js (line 5687) //say what, 28 * undefined?

How does the loop “for (var i in buttons){” with clearly two objects loop 30 times?

#7

After some more digging, I changed the loops in to

for (var i = 0; i < buttons.length; ++i) {

And I get my two left, one right button as expected. Strange

I’m not sure what causes this behavior, maybe another library, I don’t know.
I develop on a local server, so I can’t just send you a link However, if this is something you would like to research/recreate, I could arrange for a temp login.

#8

Hi,
understood. Probably some of the libraries on the page amends the Array object by adding new functions. So for(var in array) loop iterates custom methods as well as the elements of an array. Thanks for the reporting, the problem is fixed in a dev version of the component, i’ll attach the fix

#9

Here is the fixed version of the component
dhtmlxGantt_140609.zip (321 KB)

#10

Works for me, Thank you very much