CODEWITHSUNDEEP
javascriptjqueryknockout.js
dnlgmzddr
dnlgmzddr

Reputation: 648

Update field with jquery don't update observable

I want to say hello to the stackoverflow community.

I've just started using knockout a few days ago.

Right know I'm using it to make a dynamic menu builder for a CMS I'm working on.

Here is the code: http://jsfiddle.net/dnlgmzddr/HcRqn/

The problem is that when I choose an element from the select box, the input field update as I expect, but the observable doesn't reflect the change. Because of that, the add button is not enabled.

What am I missing? How can I fix it?

Thank you.

Upvotes: 2

Views: 2302

Answers (2)

RP Niemeyer
RP Niemeyer

Reputation: 114792

When you populate the url field, you would need to trigger the change event to get the observable to be upated. So, you could do:

$("#url").val('/pages/' + id).change();

Another option though that is more in the Knockout spirit is to use a binding on your select. In this case, you would likely want to populate an observable with that value, then use a manual subscription to default the formatted value into the input field. 

this.itemUrl = ko.observable();
this.selectedUrl = ko.observable();
this.selectedUrl.subscribe(function(newValue) {
    if (newValue) {
        this.itemUrl("/pages/" + newValue);                
    }
}, this);

Then, bind your select to selectedUrl:

    <select id="pagedList" data-bind="value: selectedUrl">
        <option value=""><option>
        <option value="test">Test</option>
    </select>

Here is a sample: http://jsfiddle.net/rniemeyer/HcRqn/21/

You could also eliminate the extra observable and manual subscription if the "value" of your options was the url.

Upvotes: 9

Trevor Norris
Trevor Norris

Reputation: 21089

I can't see anywhere in your code where you are actually enabling the button when a field is selected. So I might be missing something, but just enable the button on change. Like the following:

function LoadMenu() {
    $("#pagedList").change(function () {
        var id = $(this).val();
        $("#url").val('/pages/' + id);
        // remove the disabled attribute here
        $('button.space').removeAttr('disabled');
    });
}

Upvotes: 1

Related Questions