why doesn't work delete element table , refresh page ? got web api delete method implemented works fine on postman. have no idea doing wrong. i've implemented using jquery , knockout.
<table data-bind="foreach: students"> <tr> <th>id</th> <th>nume</th> <th>prenume</th> <th>data</th> </tr> <tr> <td><input type="text" id="id_" size="1" data-bind="value: studid" disabled="disabled"></td> <td><input type="text" size="60" data-bind="value: nume" disabled="disabled"></td> <td><input type="text" size="60" data-bind="value: prenume" disabled="disabled"></td> <td> <input type="text" size="15" data-bind="value: data" disabled="disabled"> <input type="button" value="sterge" class="button button1" id="sterge" /> <input type="button" class="button button2" value="editeaza" /> </td> </tr> </table> <br /><br /> </div> var uri = 'api/student' function studentmodel() { var self = this; self.students = ko.observablearray([]); $.getjson(uri, function (data) { self.students(data); }) } ko.applybindings(new studentmodel()); $(function () { $('#sterge').click(function () { var id = $('#id_').val(); $.ajax({ type: 'delete', url: uri + '/' + id, success: function (result) { alert('student sters cu succes! '); location.reload(); }, error: function (error) { alert('stergere esuata! '); } }); }); });
there 2 things going wrong here:
- at time you're attaching event listeners, elements need attached not yet exist.
- you're using
idattributes insideforeachbinding: result in duplicate ids.
when knockout applies bindings, students observable array still empty. items loaded via api.
i'd suggest using click binding attach delete method. should remove id attributes.
var testdata = [ { studid: 1, nume: "jane", prenume: "deer", data: 14 }, { studid: 2, nume: "john", prenume: "doe", data: 10 } ]; var uri = 'api/student'; var studentsviewmodel = function() { this.students = ko.observablearray(); this.loadstudents(); }; studentsviewmodel.prototype.loadstudents = function() { var self = this; $.getjson(uri, function(data) { self.students(data); }); }; studentsviewmodel.prototype.deletestudent = function(id) { console.log("post delete id: " + id); $.ajax({ type: 'delete', url: uri + '/' + id, success: function(result) { alert('student sters cu succes! '); }, error: function(error) { alert('stergere esuata! '); } }); }; // mock jquery ajax stuff var $ = { getjson: function(uri, cb) { settimeout(cb.bind(null, testdata), 750); }, ajax: function() {} }; // apply bindings ko.applybindings(new studentsviewmodel());input { width: 50px }<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <table > <tr> <th>id</th> <th>nume</th> <th>prenume</th> <th>data</th> </tr> <!-- ko foreach: students --> <tr> <td> <input data-bind="value: studid" type="text" size="1" disabled="disabled"> </td> <td> <input data-bind="value: nume" type="text" size="60" disabled="disabled"> </td> <td> <input data-bind="value: prenume" type="text" size="60" disabled="disabled"> </td> <td> <input data-bind="click: $parent.deletestudent.bind($parent, $data.studid)" type="button" value="sterge" class="button button1"/> </td> </tr> <!-- /ko --> </table> <br /> <br /> </div>
Comments
Post a Comment