Dynamic dependent combobox

Webix JS
1

Hi.
I have 2 combo:

{view:“combo”, id:“telecast_type_id”, label:“Тип”, options:{body:{url:“provider/telecast_type.php?cmd=get-records” }}}
{view:“combo”, id:“telecast”, disabled: true, label:“Telecast”, options:[{id:1, value: “Choos type”}] }

When first combo change second combo must reload data:

$$(“telecast_type_id”).attachEvent(“onChange”, function(newv, oldv){
telecast = $$(“telecast”);
telecast.define(“options”,“provider/telecast.php?cmd=get-records-for-id&telecast_type_id=”+newv);
telecast.refresh();
telecast.enable();
});

In work data in second como reload correct, but if first combo change choose in field of second combo show id value /
How correct it?

2

Hi,

I don’t get the idea, could you reproduce your problem in the snippet and share it here? http://webix.com/snippet/eb75071a

Btw, serverside options for combo can be defined easier:

view:"combo", options:"provider/telecast_type.php?cmd=get-records"

You can use Russian here.

3

Спасибо за оперативный ответ.
Как можно создать сниппет? Или в случае редактирования, как сохранить изменения?

4

var data1 = [
{id:1, value:“opel”},
{id:2, value:“ford”}
];

var data2 = [
{id:0, value:"—"},
{id:1, value:“astra”},
{id:2, value:“vectra”}
];

var data3 = [
{id:0, value:"—"},
{id:1, value:“focus”},
{id:2, value:“mondeo”}
];

webix.ui({
rows:[
{
view:“combo”,
id:“telecast_type_id”,
label:“Тип”,
options:{
body:{
//url:“provider/telecast_type.php?cmd=get-records”
data:data1
}
}
},
{
view:“combo”,
id:“telecast”,
//disabled: true,
label:“Telecast”,
options:[
{id:1, value: “Choos type”}
]
}
]
});

$$(“telecast_type_id”).attachEvent(“onChange”, function(newv, oldv){
telecast = $$(“telecast”);
if (newv == 2){
telecast.define(“options”, data3);
} else {
telecast.define(“options”, data2);
}
telecast.refresh();
});
//----------------------------------

При изменении первого combo (в этом случае бренд, например опель) все работает правильно и отображаются модели опель, но если сделать выбор во втором (например, выбрать astra с id 1), а потом опять изменить бренд на ford, во втором combo будет выбран focus, а ожидается что ничего не будет выбрано.

setValue для установки определенного id использовать не получается.

5

Я сменил тип с “combo” на “select”, и это решило проблему.
Случай зависимых контролов с подгрузкой данных с сервера встречается достаточно часто и его можно было бы поместить в гайд. Это ни в коем случае не претензия )
У вас получился замечательный фреймворк! Спасибо!

6

Такое поведение комбо логично - только опции меняются, а значение нет, поэтому оно и оказывается выбранным.

Поэтому значение тоже необходимо сбросить одним из способов:

  1. Установить значение по умолчанию. Но id:0 в данных лучше не использовать, у опции допжно быть значение, 0 - это его отсутствие. id:“0” уже приемлемо.
telecast.setValue("0");
  1. Или сбросить значение вообще:
telecast.setValue("");

http://webix.com/snippet/0e2106f6

7

По поводу создания сниппета:

  1. Нужно зайти на http://webix.com/snippet/
  2. Заменить код по умолчанию на свой.
  3. Нажать кнопку “Share” и скопировать ссылку, которая появится в всплывающем окне. По этоу ссылке будет доступен сохраненный сниппет.
8

Спасибо большое! Замечательный фреймворк!
Не планировал использовать в коммерческих целях, но если получится довести до конца приложение, пожалуй разорюсь на лицензию!