Reload a form from onChange event inside a Layout?I

Suite and Optimus Suite 5
#1

I need to reload a form from an “onChange” event inside a layout.I get an error in browser console:

Uncaught TypeError: object is not a function

This is the code:

[code]var dhxLayout,
form,
fields= [{type:“input”, name: “test”, label: “Text:”}]

dhtmlxEvent(window,“load”, function(){
dhxLayout = new dhtmlXLayoutObject(“myForm”, “1C”);
form = dhxLayout.cells(‘a’).attachForm(fields)

form.attachEvent("onChange", function(_name, _value, _changed) {
    var fields= [{type:"input", name: "new", label: "NEW:"}]
    form = dhxLayout.cells('a').attachForm(fields)})});

[/code]

I think what happens is when a form is re-loaded the event is still executing. I think this may work by using setTimeout() function but can’t be a good solution.

May anyone advise on how to avoid the error?

#2

Hello
There are dynamic features to add/delete items ‘on fly’

#3

Yes, but the error persists:

[code]var dhxLayout,
form,
fields= [{type:“input”, name: “test”, label: “Text:”}]

dhtmlxEvent(window,“load”, function(){
dhxLayout = new dhtmlXLayoutObject(“myForm”, “1C”);
form = dhxLayout.cells(‘a’).attachForm(fields)

form.attachEvent("onChange", function(_name, _value, _changed) {
    
    var fields= [{type:"input", name: "new", label: "NEW:"}]
    form.removeItem('test')
    form.addItem(null, fields[0])})});[/code]

Uncaught TypeError: object is not a function

#4

I’m going to re-code the program so that it doesn’t need to delete the form field which triggers the “onChange” event (it’s probably better for the program flow).

However it would be nice to know if this problem has a solution. Because it looks like a legitimate functionality.

Please advise.

#5

Please, provide us completed demo with detailed description of thу issue
docs.dhtmlx.com/auxiliary_docs__ … pport.html

#6

Attached is the complete file. It loads with a one-cell layout that contains a single form field. There is an onChange event attached to the field. The event handler is supposed to “removeItem()” of that field and add a new field. A JavaScript error appears in the console:

Uncaught TypeError: object is not a function
c.childNodes.(anonymous function).childNodes.(anonymous function).onblur

I suspect it may be due to a DHTMLX core implementation.
form_q.html.zip (589 Bytes)

#7

Hi

try to call add/remove using timeout

dhtmlxEvent(window,"load", function(){ dhxLayout = new dhtmlXLayoutObject("myForm", "1C"); form = dhxLayout.cells('a').attachForm(fields) form.attachEvent("onChange", function(_name, _value, _changed) { window.setTimeout(function(){ var fields = [{type: "input", name: "new", label: "NEW:"}]; form.removeItem('test'); form.addItem(null, fields[0]); },1); }); });

#8

Yes, I have. I mentioned setTimeOut() in my first post. Imo it is not a “clean” solution. If this is a problem in the DHTMLX core code I would be happy to see it addressed there. setTimeOut() in this case appears like a hack :slight_smile:

#9

I’m afraid dhtmlx source code had to use setTimeout also due javascript is not 100% ideal :frowning: