title: Inline editing - save new values on button click
body: <p>I have following code for jQuery DataTables:</p>
  
  <pre><code>Contact.DataTable = $('#otable').DataTable( {
  "ajax": {
                  "url" : '/Contact/' + Contact.id,
                  "dataSrc": function(check) {
                        return check.data;
                  },
               },
              "responsive": true,
              "columns": [
                  { "data": "id"},
                  { "data": "category", "sClass": "category" },
                  { "data": "name", "sClass": "name" },
                  { "data": "lname" },
                  {
                        "render": function ( data, type, method, meta ) {
                         return Contact.saveContact(method);
                      }
                  },
              ]
          } );
  </code></pre>
  
  <p><strong>Datatable - dropdown - inline edit:</strong> </p>
  
  <pre><code>$('#otable tbody').on('click', '.category', function () {    //second column
      var row = this.parentElement;
      if(!$('#otable').hasClass("editing")){
          $('#otable').addClass("editing");
          var data = Contact.DataTable.row(row).data();
          var $row = $(row);
           var thiscategory = $row.find("td:nth-child(2)");
          var thiscategoryText = thiscategory.text();
          thiscategory.empty().append($("&lt;select&gt;&lt;/select&gt;",{
              "id":"category" + data[0],
              "class":"in_edit"
          }).append(function(){
              var options = [];
              $.each(Categories, function(key, value){
                  options.push($("&lt;option&gt;&lt;/option&gt;",{
                      "text":value,
                      "value":value
                  }))
              })
              return options;
          }));
          $("#category" + data[0]).val(thiscategoryText)
      }
  })
  
  ;
  </code></pre>
  
  <p>For changing values in dropdown</p>
  
  <pre><code>$('#otable tbody').on("change", ".in_edit", function(){   //Inline editing
              var val = $(this).val();
              $(this).parent("td").empty().text(val);
              $('#otable').removeClass("editing");
          });
  </code></pre>
  
  <p>Below code for saving new values(after inline edit) while clicking save:</p>
  
  <pre><code>$('#divsave').on("click", ".saveContact", function() {
          var data = Contact.DataTable.row($(this).closest('tr')).data();
          // Here I have to get new values after inline editing  - but getting old values
      });
  </code></pre>
  
  <p>My problem is : while clicking edit, in 'data', I am getting old values in the row of datatable, not the modified value after inline edit</p>
  
  <p>datatable view - 1:
  <a href="https://i.stack.imgur.com/zSBAG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zSBAG.png" alt="enter image description here"></a></p>
  
  <p>datatable - dropdown in column:
  <a href="https://i.stack.imgur.com/X3S33.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X3S33.png" alt="enter image description here"></a></p>
  
  <p>datatable after inline editing:
  <a href="https://i.stack.imgur.com/eAXrj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eAXrj.png" alt="enter image description here"></a></p>
  
  <p>What I need: Save modified row while clicking 'save' image  - currently it saves older value before inline editing(datatable view - 1)
  <a href="https://i.stack.imgur.com/ABidt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ABidt.png" alt="enter image description here"></a></p>