Knockout push new array item using Ajax form

Question

My application is MVC 5 c#, I am using the following form to update a table:

  @using (Ajax.BeginForm("AddOha", "Medication", new AjaxOptions()
{
    UpdateTargetId = "result",
    OnSuccess = "getresult",
    HttpMethod = "POST"
}))
{
    <input id="MedName" name="MedName" value="" class="input-sm form-control" style="width: 100px" placeholder="Value"/>
    <input type="submit" value="Save" class="btn btn-primary"/>
}

Here is my Knockout list:

<tbody data-bind="foreach: OhaList">
    <tr>
        <td>
            <input data-bind="value: Name" class="input-sm form-control" style="width: 100px" placeholder="Value" />
        </td>
    </tr>
</tbody>

Here is the ViewModel:

var ViewModel = function() {
    var self = this;
    this.OhaList = ko.observableArray([]),
        $.ajax({
        type: "GET",
        url: '@Url.Action("xxx", "xxx")',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            self.OhaList(data);
        },
        error: function (err) {
            alert(err.status + " : " + err.statusText);
        }
    });
    var ohaMed = {
        Name: self.Name
    };
self.ohaMed = ko.observable();
}
    ko.applyBindings(new ViewModel());

I tried to update the list using:

var getresult = function(data) {
    if (data[0].Name !== "") {
        // alert(data[0].Name);
        ViewModel.OhaList.push({ Name: data[0].Name });
        // ViewModel.OhaList.push({ Name: "1});
    } else {
        alert("failed");
    }}

Although I get the results from the controller, or even if I code the value, I get the following error:

Unable to get property 'push' of undefined or null reference

Would appreciate your suggestions.

Could you explain what's getresult function and how're you calling it? — tede24
– tede24, Commented Feb 3, 2016 at 1:51
If you are trying to update an element try modifying the JSON data then binding it in a table. [link] (stackoverflow.com/questions/15897629/…) — Ting Shun Ng
– Ting Shun Ng, Commented Feb 3, 2016 at 2:18
getresult is called from the form - OnSuccess. The controller returns the new values that I want to push to the array. — hncl
– hncl, Commented Feb 3, 2016 at 2:44

Travis Schettler · Accepted Answer · 2016-02-03 03:33:51Z

1

You need to keep a reference to your viewmodel handy, here's one way to do that:

window.viewModel = new ViewModel();
ko.applyBindings(window.viewModel);

Then in your getresult function, you need to use that instance of ViewModel to push the values to, rather than the ViewModel type itself:

var getresult = function(data) {
    if (data[0].Name !== "") {
        // alert(data[0].Name);
        window.viewModel.OhaList.push({ Name: data[0].Name });
        // ViewModel.OhaList.push({ Name: "1});
    } else {
        alert("failed");
    }
}

answered Feb 3, 2016 at 3:33

Travis Schettler

8541 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hncl Over a year ago

Excellent solution. Works great, I appreciate your assistance.

Collectives™ on Stack Overflow

Knockout push new array item using Ajax form

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related