Fill select on click with Knockout

Question

I'm having a trouble when I'm trying to load the data of select. Once the page is loaded, when I do my first click on the select it doesn´t show nothing, any data. I close it and when I click again on the select it shows me the data.

http://jsfiddle.net/r3AA9/19/

Any suggestion? HTML

<div>   
<select data-bind="options: values, value: option, optionsCaption: 'Selecione...', event: { click: onClickSelect }" ></select>
<label data-bind="text: option"></label>

JS

var ViewModel = {
    option : ko.observable(),
    values : ko.observableArray()
};

ViewModel.onClickSelect = (function() {  
    //Simulate server side 
    setTimeout(function()
               {
                   ViewModel.values(["one", "two", "three"]);
               }, 2000);

});

ko.applyBindings(ViewModel);

Any suggestion?

Is your question "How to fill the select with Knockout in the click event?" or "In this sample I need to double click on select to fill it." — Mark C., May 14 '15 at 12:34
Hi, my question is "How to fill the select with Knockout in the click event?" With a simple click on the select should expand with the values — Gus, May 14 '15 at 13:12
The problem is not that you need to double click, but the fact that the select options are shown before you add the new values.If you test again your example, you'll see that if you click and then wait two seconds(the waiting time you put in setTimeout), then when you click one more time, you'll see the values.I'm not sure how to achieve what you want.I found a question where somebody was searching for the same behavior: http://stackoverflow.com/questions/20576346/how-to-update-select-options-before-showing-them-in-jquery What is the use case where you need to load the select options on click? — Flavia Obreja, May 14 '15 at 13:20
So you only want to load the values for the select when someone clicks on the select? Not prior to that? — Mark C., May 14 '15 at 13:23
So, I think because the select's observable is empty, then you `click` to bind the select's observable, instead of pushing them to the `observableArray([])`, they aren't appearing until that second click? — Mark C., May 14 '15 at 13:36
This may align with your question.. http://stackoverflow.com/a/9934535/2679750 — Mark C., May 14 '15 at 14:00
@Gus good question issue is something to do with knockout i believe , test sample here http://jsfiddle.net/r3AA9/21/ . cheers . — super cool, May 15 '15 at 08:08
@supercool, the problem is that select does not expand. Removing the optionsCaption property the first item is selected. — Gus, May 15 '15 at 17:35
@supercool Yes, it was just a test for you to see that the values are already in the select. — Gus, May 15 '15 at 19:40
@Gus ok but the select wont expand as it needs focusout later you can see the list binded . there is no way we can fix this i believe . — super cool, May 16 '15 at 06:57

score 1 · Answer 1 · answered May 18 '15 at 14:07

there is a way to do this.

try this code

ViewModel.onClickSelect = function (v, e) {
    var sel = e.target;
    if (sel.childNodes.length === 1) {      
        sel.childNodes[0].innerText = 'Loading...'
        setTimeout(function () {
            sel.childNodes[0].innerText = 'Selecione...'
            ViewModel.values(["one", "two", "three"]);
            sel.blur();
            v.openSelect(sel);
        }, 2000);
    } 
};

//to open 'select' programmatically
ViewModel.openSelect = function (element) {
    if (document.createEvent) {
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent('mousedown', true, true, window);
        element.dispatchEvent(e);
    } 
    else if (element.fireEvent) element.fireEvent("onmousedown");
};

ko.applyBindings(ViewModel);

Demo JSFiddle

hmm... looks like `dispatchEvent` and `fireEvent` both are not working in IE. i didnt use Jquery, so try using `Jquery` to trigger `event` if you really want it to work in IE — Ja9ad335h, May 18 '15 at 20:00

score 0 · Answer 2 · answered May 18 '15 at 11:50

It's natural.

When you load the page for the first time, the values array is empty, so there are nothing to show in the dropdown. Then when you click on the drop down, you trigger the select, which invokes this code:

 setTimeout(function()
           {
               ViewModel.values(["one", "two", "three"]);
           }, 2000);

What this code does is, after waiting two seconds, it loads the 3 values in the drop down list. So, if you close the drop down list, and click on it again at least 2 seconds later, the options are there. If you do it quickly enough you'll realize that clicking again in the drop down before the 2 seconds go by, the select is already empty.

So the code is working perfectly, as expected. For your question it's impossible to know what you was trying to do.

Fill select on click with Knockout

2 Answers2