Knockout foreach input value user updated value - php

Question

I have data-binding listing working fine. In listing, I have first column for order level. All data is coming from Ajax based server side.
HTML CODE:
<div class='general_content' id="designations_items">
<div class="listing-grid">
<div class="listing_wrapper">
<!--Listing Columns-->
<div class="column heading option_cols">
Order Level
</div>
<div class="column heading desig_cols">
Designation Name
</div>
<div class="column heading desig_cols">
Job Description
</div>
<div class="column heading option_cols">
Options
</div>
<!--Listing Data-->
</div>
<form name="desig_order_level" action="<?php echo $url?>manage/designation_order_level/" id="desig_order_level">
<div class="listing_wrapper" data-bind="foreach: Designations">
<div class="column data_display option_cols">
<input name="orders[]" data-bind="value: Desig_Order" class="fancyInput_smaller">
</div>
<div class="column data_display desig_cols" data-bind="text: Desig_Name"></div>
<div class="column data_display desig_cols" data-bind="text: Desig_Desc"></div>
<div class="column data_display option_cols">
Remove
</div>
</div>
</form>
</div>
</div>
This is my JS code:
function GetDesignations(handleData) {
$.ajax({
url: 'get_designations.php',
type: "post",
data: '',
dataType: 'json',
success: function(data){
handleData(data);
},
error:function(data){
alert('Failed');
}
});
}
$(function () {
var Designation_ViewModel = function() {
var self = this;
self.Designations = ko.observableArray();
self.update = function() {
GetDesignations(function(output){
self.Designations.removeAll();
$.each(output, function (i) {
self.Designations.push(new deisgnation_data_binding(output[i]));
});
});
};
self.addnewItem = function () {
var newitem = JSON.parse('{"Name":"'+$("#Name").val()+'", "Desig_desc":"'+$("#Desig_desc").val()+'"}');
self.Designations.push(
new deisgnation_data_binding(newitem)
);
};
self.removeToDoItem = function(item) {
self.Designations.remove(item);
};
};
var Designation_ViewModel = new Designation_ViewModel();
var y = window.setInterval(Designation_ViewModel.update,1000);
ko.applyBindings(Designation_ViewModel, document.getElementById("designations_items"));
});
var deisgnation_data_binding = function (data) {
return {
Desig_Order: ko.observable(data.Desig_Order),
Desig_Name: ko.observable(data.Desig_Name),
Desig_Desc: ko.observable(data.Desig_Desc)
};
};
After few seconds, listing is being auto updated for new records... In that case, order level is also getting new database entries for each record.
Issue is that at user side I cannot input new values in order level input box to update, when I select the text box to enter new value all listing gets update due to this reason unable to let user update order level.

Answer 1

As I see your records are updated every 1 second due to
var y = window.setInterval(Designation_ViewModel.update,1000);
I think you should use setTimeout instead of setInterval here. setTimeout will execute update function only once
window.setTimeout(Designation_ViewModel.update,1000);