object HTMLInputElement instead of value in knockout js textInput binding

Question

I want to pre fill fields of the form on load with existing data from database. On page load i am making an ajax call which queries the data and assign the returned data to a knockout observable array.

client.js:

function clientModel()
    {
        var self = this;
        this.lastTenClients = ko.observableArray();
        this.pendingClients = ko.observableArray();
        this.foundCustomerResult = ko.observable();
        this.shouldShowCustomerMessage = ko.observable(false);
        this.foundCustomers = ko.observableArray();

        var base_url = window.location.origin;
        var pathArray = window.location.pathname.split( '/' );
        if(base_url === "http://localhost"){
            var url = base_url+"/"+pathArray[1]+"/client/";
        } else {
            var url = base_url+"/client/";
        }

        $.ajax({
            url: url+"get_last_ten_clients",
            type: "get",
            cache: false,
            success: function(client_list) {
                var data = $.parseJSON(client_list);
                self.lastTenClients(data);
            }
        });

        $.ajax({
            url: url+"get_pending_data_clients",
            type: "get",
            cache: false,
            success: function(client_list) {
                var data = $.parseJSON(client_list);
                self.pendingClients(data);
            }
        });

        this.search_client = function()
        {           
            self.shouldShowCustomerMessage(false);
            self.foundCustomers.removeAll();
            crsf = $("input[name=csrf_test_name]").val();
            dataString = $("#search_client_input").val();
            $.ajax({
                url: url+"search_client_database",
                type: "post",
                cache: false,
                data: {csrf_test_name: crsf, search_client_input: dataString},
                success: function(customer_details) {
                        var data = (customer_details);
                        self.foundCustomers(data);
                },
                error: function(xhr, ajaxOptions, thrownError)
                {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
        }
    }

    ko.applyBindings(new clientModel());

Sample data in observable after ajax call:

foundCustomers {"id":"1","nameMusicCompany":"Company","natureMusicCompany":"Music"}

In the view i am trying to assign the value using textInput binding like following:

<input type="text" class="form-control input-sm" name="nameMusicCompany" id="nameMusicCompany" placeholder="Name of the Music Company" 
                        data-bind="textInput: nameMusicCompany">

But instead of showing the value "company" it displays [object HTMLInputElement] inside the input box.

Controller:

public function search_client_database()
{
    if(!empty($this->input->post('search_client_input')))
                {
                    $result = $this->client_model->get_client_data($this->input->post('search_client_input'));
                        echo json_encode($result);
                }

}

Model:

public function get_client_data($client_name)
        {
                $client_name = strtoupper($client_name);
                $sql = "SELECT * FROM client_data where UPPER(nameMusicCompany) = ?";
                $query = $this->db->query($sql, array($client_name));

                if($query->num_rows() > 0)
                {
                        return $query->row();
                }

                return false;
        }

We need to see more of your code, ideally a [mcve] using Stack Snippets (the `<>` toolbar button) here on-site. At a bare minimum, we need to see how you're creating your viewmodel and your call to `ko.applyBindings` that's binding that model to the DOM. — T.J. Crowder, Mar 30 '16 at 11:19
@T.J.Crowder I have shared more code from the JS file. Knockout Code. — Saurabh, Mar 30 '16 at 11:28
I don't see `nameMusicCompany` anywhere in your viewmodel code at all. That would be why Knockout is using the automatic global. — T.J. Crowder, Mar 30 '16 at 12:55

score 5 · Answer 1 · answered Mar 30 '16 at 11:18

5

What's happening is that Knockout is picking up the predefined nameMusicCompany global created by the browser because you gave your input element an id instead of the nameMusicCompany property of your viewmodel.

You haven't shown us enough of your code for us to tell you how to fix it, but that's what's going on. It could be as simple as that your attribute should be data-bind="foundCustomers.nameMusicCompany", but that's a guess without seeing more of your code.

answered Mar 30 '16 at 11:18

T.J. Crowder

1,031,962
187
1,923
1,875

1

I'm fairly new to KnockoutJS and this issue appeared for me because I named my input element id the same as my view model property. – dotnetesse Jul 25 '16 at 15:25

score 0 · Answer 2 · answered Mar 30 '16 at 12:50

In your ajax success callbacks you're setting lastTenClients and pendingClients, which are both observable arrays.

If you mean to render several inputs:

If you want to render all items inside an observable array you'll have to use a foreach data-bind. The HTML markup inside a foreach cannot have a static id property; it is used as a template and could be included many times. Reusing the same id on several HTML elements will get you in to trouble.

As an example, try:

If you mean to render an input for only one of the items that are returned

If the <input> element you've specified only appears once in your page, you'll have to tell it which customer's nameMusicCompany property it has to render. If the property does not exist in the current binding context, it will look for it someplace else and eventually end up in window. (If I'm not mistaken, this is because knockout uses with: $data internally). Because you've named your <input>'s id the same as the property's name, window will contain an HTMLInputElement.

As an example, try:

<!-- ko with: foundCustomers()[0] -->
<input 
  type="text" name="nameMusicCompany" id="nameMusicCompany" 
  data-bind="textInput: nameMusicCompany">
<!-- /ko -->

object HTMLInputElement instead of value in knockout js textInput binding

2 Answers2