javascript - knockout.js observablearray push not binding click -


i have html follows:

<table id="table">     <thead>         <tr>             <th>employee id</th>             <th>name</th>             <th>role</th>             <th>actions</th>         </tr>     </thead>     <tbody data-bind="foreach: employees">                 <tr>             <td data-bind="text: empid"></td>             <td data-bind="text: name"></td>             <td data-bind="text: role"></td>             <td>                 <a data-bind="click: editemployee">edit</a>             </td>         </tr>                  </tbody> </table>  <div id="createform">     <input id="empidc" />     <input id="namec" />     <input id="rolec" />     <button type="button" id="insertemployee">create</button> </div> 

and have javascript file containing knockout code:

    $('#insertemployee').click(function () {          var empidc = $("#empidc").val(),             namec = $("#namec").val(),             rolec = $("#rolec").val();          $.ajax({             type: "post",             url: "/employees/create",             data: json.stringify({ "empid": empidc, "name": namec, "role": rolec }),             contenttype: "application/json; charset=utf-8",             datatype: "json",             success: function (msg) {                  // data gets inserted in db , alert statement executing                 alert(msg);                                elist.employees.push({                     empid:empidc,                     name:namec,                     role:rolec                 });              },             error: function (xhr, status, error) {                 alert(xhr.responsetext);             }         });      });      var getemployees=function(){         return $.get("/employees/fetchemployees");     }      //view model employees     var employeelistvm = function () {         var self = this;          self.employees = ko.observablearray();                   getemployees().done(function (data) {             var emp = data.map(function (e) {                 return (new employees(e));             });             self.employees(emp);         });      };      //model employees     function employees(data) {          var self = this;          this.empid = ko.observable(data.empid);         this.name = ko.observable(data.name);         this.role = ko.observable(data.role);          this.editemployee = function (record) {              var eedit = new singleemployee(record);              var cont = document.getelementbyid("editform");             ko.cleannode(cont);             ko.applybindings(eedit, cont);              $("#editform").dialog({                 autoopen: false,                 modal: true,                 width: 450,                 title: "edit selected record(s)"                             });              $("#editform").dialog("open");                     };      }      // viewmodel editing single record     function singleemployee(data) {          var self = this;         this.empid = ko.observable(data.empid);         this.name = ko.observable(data.name);         this.role = ko.observable(data.role);     };      var elist = new employeelistvm();     ko.applybindings(elist, document.getelementbyid("table")); 

when insert new record in div "createform", error:

uncaught referenceerror: unable process binding "click: function (){return editemployee }" message: editemployee not defined

the new row getting displayed, edit link newly inserted record not work

edit:

i solved problem. problem "object" getting passed employees(data) , not "employees". in insertemployee click, changed code to:

            var newemp = new employees({                 empid: empidc,                 name: namec,                 role: rolec             });              elist.employees.push(newemp); 

is data getting server side controller , updating db? ajax call post data , call create method on server, in success section assumes ok on server. success path here client side call ok, it's not server success. have alert statement, need ensure server side posted data before attempting retrieve later in refresh of page.


Comments

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

mercurial graft feature, can it copy? -