How to remove clicked row while sending parametr to a function? Knockout

Question

I have some complication with service removing. I have function that removes service on the server but I have to reload page to update table. I found way how to remove row by click-binding but there is the issue beacuse I can only remove row or get ID for delete service from server NOT both. :/

This is example of code that removes service on the server but doesn't remove table row.

HTML:

<table id="serviceView" class="fixed_header" border: 1>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Adress</th>
                    <th>Notification</th>
                </tr>
            </thead>
            <tbody  data-bind="foreach: services">
                <tr>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: address"></td>
                    <td data-bind="text: serviceId"></td>
                    <td ><button data-bind="click: $parent.DeleteService.bind(this, serviceId)">Remove</button></td> 
                </tr>
            </tbody>

        </table>

JS:

self.services = ko.observableArray([]); 
    self.lastCheck = ko.observable();
    $.getJSON("http://localhost:55972/api/status", function (data) {
        self.services(data.services);
        self.lastCheck = data.lastCheck;
    });    //////This is loading data to the table from server

    self.DeleteService = function (serviceId) {
        $.ajax({
            type: "GET",
            url: "http://localhost:55972/api/services/remove/" + serviceId,
        }).done(function () {
            self.services.remove(serviceId)
        })

    };

This is example of code that removes table row

When I use click-binding like this:

<button data-bind="click: $parent.DeleteService">Remove</button>

And change delete function to this:

self.DeleteService = function (serviceId) {
        self.services.remove(serviceId)
        $.ajax({
            type: "GET",
            url: "http://localhost:55972/api/services/remove/" + serviceId,
        }).done(function () {
            // here I want to remove row but i doesnt goes here without service ID.
        })

    };

It removes row but instead serviceId I got [object, object] in the URL.

Can you help me with it ? I got idea to use jquery to just update the table but it's seems unnecessarily complicated for me when I can use knockout.

I know the solution is not that hard but I'am just unable to solve it..... -_-

I'am sorry for taking time with this bullshit but this is my first real project and I'am so desperate at this point beacuse I have lot of things to do and I'am stucked on this.

have you tried console.log(serviceId); in your function? Its returning an object. — Leonardo Wildt, Aug 20 '18 at 15:49
I tried now. It shows me this: {serviceId: 3096, name: null, address: null, lastCheck: "2018-08-20T18:07:52.1800892+02:00", status: 0} in console but doesn't save it to variable for URL. — Ondra Bařina, Aug 20 '18 at 16:09
Ok! I got it! Thanks! :) After few minutes of watching in the console I reliazed that I have an object in serviceId not just ID. :D This solved it: serviceIdRemove = serviceId['serviceId']; :) — Ondra Bařina, Aug 20 '18 at 16:32
Glad you got it! abuse that console! ko.toJS is your best friend — Leonardo Wildt, Aug 20 '18 at 19:03

Skatt · Answer 1 · 2018-08-20T16:04:11.933

1

In your Js code, you can try this:

self.services = ko.observableArray([]); 
    self.lastCheck = ko.observable();
    $.getJSON("http://localhost:55972/api/status", function (data) {
        self.services(data.services);
        self.lastCheck = data.lastCheck;
    });    //////This is loading data to the table from server
var serviceIdRemoved; 
    self.DeleteService = function (serviceId) {
serviceIdRemoved = serviceId; // now you can do whatever you need more with this value
        $.ajax({
            type: "GET",
            url: "http://localhost:55972/api/services/remove/" + serviceId,
        }).done(function () {
            self.services.remove(serviceId)
        })

    };

With this way of work you can user the content of the variable and don´t loose it. Also if you get [Object, Object], you can:

console.log(serviceId) // to see the content in the console.

JSON.stringify(data) //to see the content in html

This source could help you to understand it better.

edited Aug 20 '18 at 16:04

answered Aug 20 '18 at 15:59

Skatt

372
3
10

I doesn't work. Value of serviceId in self.DeleteService = function(serviceId) is [object, object] in this case. In the first example I got serviceId's value from table but then it doesn't work this: self.services.remove(serviceId) – Ondra Bařina Aug 20 '18 at 16:06
serviceIdRemoved = serviceId['serviceId']; solved it. :) ServiceId was object there and the ID I needed was under index 'serviceId' :D I have to better name my variables etc... :D – Ondra Bařina Aug 20 '18 at 16:36
Great! This happen a lot! :P Have a nice day! – Skatt Aug 21 '18 at 07:19

score 1 · Answer 2 · answered Aug 20 '18 at 16:56

The [object, object] you are seeing is actually the data and event objects which are secretly added to the JS function parameters by Knockout. If you want to add your own parameter to the click binding then you should do it like this:

<button data-bind="click: function(data, event) { $parent.DeleteService(serviceId, data, event) }">Remove</button>

You can then define your JS function as follows:

self.DeleteService = function (serviceId, data, event) {
    [code here...]
}

You can read up on the exact details of it in the excellent Knockout documentation here: http://knockoutjs.com/documentation/click-binding.html

It's about half-way down under the heading that reads Note 2: Accessing the event object, or passing more parameters

How to remove clicked row while sending parametr to a function? Knockout

2 Answers2