Form block bug

Suite and Optimus Suite 5
#1

Hi,
So i have this dataset for the form

var formData = [
  {type: "block", list: [
    { type:"settings" , labelWidth:100, labelAlign:"right", inputWidth:500, position:"label-left", offsetTop: 20  },
    { type:"input" , name:"titre_fr", label:"Titre", required: true },
    { type:"ckeditor" , name:"desc_fr", label:"Description", required: true  },
    { type:"ckeditor" , name:"contenu_fr", label:"Contenu", required: true  },
    formSubmitBtn
  ]},
  {type: "block", id: "form_content_tab_en", list: [
    { type:"settings" , labelWidth:100, labelAlign:"right", inputWidth:500, position:"label-left", offsetTop: 20  },
    { type:"input" , name:"titre_en", label:"Titre", required: true  },
    { type:"ckeditor" , name:"desc_en", label:"Description", required: true  },
    { type:"ckeditor" , name:"contenu_en", label:"Contenu", required: true  },
    formSubmitBtn
  ]},
  {type: "block", id: "form_content_tab_ar", list: [
    { type:"settings" , labelWidth:100, labelAlign:"right", inputWidth:500, position:"label-left", offsetTop: 20  },
    { type:"input" , name:"titre_ar", label:"Titre", required: true  },
    { type:"ckeditor" , name:"desc_ar", label:"Description", required: true  },
    { type:"ckeditor" , name:"contenu_ar", label:"Contenu", required: true  },
    formSubmitBtn
  ]}
];

When i attach more then one form using the same dataset these two blocks “form_content_tab_en” and “form_content_tab_ar” will be gone from the first form and move to the second form.
When i made another dataset and changed the block names, every thing went as expected.

#2

Hi

unfortunately can’t reproduce issue localy, 2 forms with same formStruct works fine
any link/demo? you can send it to support@dhtmlx.com if any

#3

So i attached a simplified version of the code that i made (By the way i used the designer)
What i have is this :
A tabbar with two tabs.
Each tab contains a tabbar, this last one have a form attached to it. The form contains three blocks (french, english and arabic), each block is shown in the corresponding tab.
form_tabs_bug.rar (511 KB)

#4

Hi

you need to specify unique ids for blocks

#5

Yes that is what i said in the initial post changing the name attribute fix things.

The question is; why will i need to change the name attribute if i have two different form objects .
Now all other input items and buttons… work even they have the same name attribute in both forms.
Shouldn’t the blocks works accordingly ?
When i’m doing this

tabbar_form1.cells("tab_en").attachObject("form_en");

Then doing this

tabbar_form2.cells("tab_en").attachObject("form_en");

In my humble opinion, the “form_en” block should get the data from the dataSet without touching the first form.
The thing is i’m using the exact same form data set to make a new form each time the user clicks the add button or the edit button.
Now fixing this makes things easier, because i’m going to focus on my application logic and not on how to change the block attribute’s name each time i want to make a new form.
In the end i want to thank you and your team for this great framework, and i frankly hope that this get tweaked because that will make others and me very happy, plus it makes the framework more flexible and easier to deal with.

#6

well…

let me describe a bit how it works

“type:block” have two attrs: name and id

  • name attr used inside form for inner ref to item
  • id attr is a real dom-element id

finaly you have the following struct:

and on your page with two forms you have two items with the same id
how tabbar will find needed item? it take first or last (depending on browser)

when you attach block to tabbar - tabbar simply do:

elem.appencChild(document.getElementById(“form_en”))
where elem - div inside tabbar cell,
so tabbar doesn’t know that you’re attaching part of form, from one side,
as form doesn’t know that tabbar “stole” block and attached it to a cell, from another

and in a two code lines:
tabbar_form1.cells(“tab_en”).attachObject(“form_en”);
tabbar_form2.cells(“tab_en”).attachObject(“form_en”);
“form_en” is ambiguous

for this you need a loop, like:

[code]var tabbarIds = {“en”: “English”, “ar”: “Arabic”, “fr”: “French”};
var mainTabbar = new dhtmlXTabBar(…);

for (var q=0; q<tabbars_count; q++) {

var tabbar = new dhtmlXTabBar(); // this tabbar will with 3 tabs for each lng
var ids = {
    "en": "some_id_en_"+q,
    "ar": "some_id_ar_"+q,
    "fr": "some_id_fr_"+q
};
var formData = [
    ....
    {type: "block", id: ids["en"], ...}
    {type: "block", id: ids["ar"], ...}
    {type: "block", id: ids["fr"], ...}
];
var form = new dhtmlXForm(formData);

// and now split form into tabs
var tabbar = mainTabbar.cells(..).atatchTabbar(..);
    for (var a in tabbarIds) {
    tabbar.addTab(a, tabbarIds[a]);
    tabbar.cells(a).attachObject(ids[a]);
}

}[/code]

#7

Thank you for taking time to answer me.
In my real application i did something like that, i had a counter that i use it’s value to make the id = “some_id”+counter;
and then increment each time i add new form.
But if you may i have another question, i saw in the tabbar generated html that you use the attribute “tab_id” to insert the cell names in the html code.
So why you didn’t do the same with the block id ?
Thanks :wink: