CODEWITHSUNDEEP
jqueryasp.net-mvc-4knockout.js
Murali Bala
Murali Bala

Reputation: 1143

MVC4 Knockout data-bind click event not firing

I am getting started with Knockout and having an issue with click event not firing.

The above is not firing the GetWaiters function. Not sure what I am doing wrong or missing.

TIA

I have the following html:

<h2>Create</h2>
<table>
    <thead>
        <tr>
            <th>WaiterId</th>
            <th>RestId</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Waiters">
        <tr>
            <td data-bind="text: waiter_id"></td>
            <td data-bind="text: rest_id"></td>
            <td data-bind="text: name"></td>
        </tr>
    </tbody>
</table>
<br />
@Scripts.Render("~/bundles/myBundle")   
<input type="button" id="btnGetWaiters" value="Get Waiters" data-bind="click: GetWaiters" />

And following in my js file:

var WaiterViewModel = function () {
    //Make the self as 'this' reference
    var self = this;
    //Declare observable which will be bind with UI 
    self.waiter_id = ko.observable("0");
    self.rest_id = ko.observable("0");
    self.name = ko.observable("");

    //The Object which stored data entered in the observables
    var WaiterData = {
        waiter_id: self.waiter_id,
        rest_id: self.rest_id,
        name: self.name
    };

    //Declare an ObservableArray for Storing the JSON Response
    self.Waiters = ko.observableArray([]);

    GetWaiters(); //Call the Function which gets all records using ajax call

    //Function to Read All Employees
    function GetWaiters() {
        alert("fetching");
        //Ajax Call Get All Employee Records
        $.ajax({
            type: "GET",
            url: "/api/WaiterAPI",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                self.Waiters(data); //Put the response in ObservableArray
            },
            error: function (error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });
        //Ends Here
    }
};
ko.applyBindings(new WaiterViewModel());

Upvotes: 3

Views: 5201

Answers (3)

Olga
Olga

Reputation: 1690

Small tip

I had a similar problem with event click binding not firing. The problem was misspelled function name in my case. The problem is that knockout is very silent in this case as oposed to bindings that are executed right away, where you get proper errors in console.

Upvotes: 0

ebram khalil
ebram khalil

Reputation: 8331

your function is fine but the way you declared it is not right.

First try to inspect your model console.log(new WaiterViewModel()). you 'll find that it does not have any function with name GetWaiters(). Recalling from @vadim answer GetWaiters() is declared as private method.

all what you need to do is to associate GetWaiters() with your viewmodel. for example like what you did with waiter_id, so declare it like this:

self.GetWaiters =  function() { //your code goes here }

to call it use this self.GetWaiters()

Upvotes: 2

vadim
vadim

Reputation: 1726

When you trying to bind click event the binding method should be the method of the view model but in your implementation GetWaiters() is declared as private method. Define this method like this and try again:

self.GetWaiters =  function() {
    // your code
};

Upvotes: 8

Related Questions