Dynamically altering a combo box list

Webix JS
1

Hello everyone,

in my application I have two combo boxes. The second combo box list values depend on the selection in the first combo box. In order to get this behavior I wrote this on change event handler for the first combo box. What I want is to be able to automatically select the first item in the second combo box if the result coming from the server has only one option:

onCustChange : function (nval, old) {
    var url = "ui/cust/" + nval + "/apps";
    webix.ajax().get(url, null, function (text, data) {
      var as = $$("app_selection");
      var dt = data.json();
      as.define("options", dt);
      as.refresh();
      if (dt.length == 1) {
        as.setValue(dt[0].id);
      }
      ...
    });
  }

The first time this code runs everything works as expected. When I change the value in the first combo box, the second combo seems not to reload the list of options properly and displays the id I set instead of the description. I suppose the popup suggest is recreated lazily so until I open the list I don’t get anything.
Is there a way to force the popup list to reload from code so I get the correct description inside the combo input field? The strange thing is the first time it works properly.
Thank you in advance for your help.

Luca

2

While popup will repaint self only on second opening, the inner state ( api, selected value, data loading ) must work without relation to the visibility of popup.

Instead of

as.define("options", dt);
      as.refresh();

Try to use

var list = as.getPopup().getList();
list.clearAll();
list.parse(dt);
3

It seems not to work. I tried it but get an error in $setValue of richselect: “undefined is not a function”. By the way, can the double var definition of the variable text cause problems?


	$setValue:function(value){
		if (!this._rendered_input) return;

		<b>var text</b> = value;
		var popup = this.getPopup();

		if (popup)
			<b>var text</b> = this.getPopup().getItemText(value);

		this._settings.text = text;
		var node = this.getInputNode();
		if (webix.isUndefined(node.value))
			node.innerHTML = text;
		else 
			node.value = text.replace(/<[^>]*>/g,"");
	},