Click here to Skip to main content
15,881,281 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hello,

i'm creating a simple page with listing data from database and I would like to create the option of editing a selected row by transferring the row data into a form.
Then the user can update the data and submit the form.

The problem might be that i'm using the same form for inserting and editing data (depending whether objectID is null or not).

I managed to refresh both parts of the page by using ko.applyBindings(PAGMODEL, DOM_ELEMENT), but i'm having trouble displaying data when user needs to find and load data with 'livesearch'/'autocomplete' (I get the data, it just won't show on html)

Code:
JavaScript
function MedicalCentersPM(parameters) {
	var self = this;

	self.MyModelArray = ko.observableArray();
	self.MyModelToManipulate = new MyModel();

	self.SearchQuery = ko.observable('');

	self.loadData = function () {
		loadDataRowsSync(
			parameters.filter,
			self.SearchQuery(),
			'',
			function () {
				self.MyModelArray.removeAll();
			},
			function (jsonData) {
				$.each(jsonData, function (i, mc) {
					self.MyModelArray.push(new MyModel(mc));
				});
			}
		);

		/// UPDATING HTML (ONE WAY)
		try {
			ko.applyBindings(self, parameters.dataDOM);
		} catch (exc) { }
	};
	self.manipulateRow = function () {
		axaxManipulationCall(
			parameters.manipulationUrl,
			ko.toJSON(self.MyModelToManipulate),
			function () {
				self.resetForm();
				self.loadData();
			},
			function (message) {
				alert(message);
			}
		);
	};

	self.selectRow = function (row) {
		self.MyModelToManipulate(MyModel(ko.toJS(row)));

		ko.cleanNode(parameters.formDOM);
		ko.applyBindings(self, parameters.formDOM);
	};

	self.resetForm = function () {
		self.MyModelToManipulate = new MyModel(JSON.parse(parameters.defaultModel));

		ko.cleanNode(parameters.formDOM);
		ko.applyBindings(self, parameters.formDOM);
	};
	self.messageRow = function () {
		alert(ko.toJSON(self.MyModelToManipulate));
		return false;
	};

	self.loadData();
	self.resetForm();
};


JSFiddle: link

I might be doing something very wrong or I missed some small detail.... so...
Could anyone please point me in the right direction?

Thank you
Posted
Updated 4-Nov-15 3:34am
v3
Comments
Sergey Alexandrovich Kryukov 2-Nov-15 6:20am    
"Having troubles" is not informative. Are you using AJAX? If so, how? In all cases, comprehensive description of the problem can help.
—SA
vezo11 2-Nov-15 6:29am    
I tried two ways of editing data:
- using method: self.selectRow(row){
self.ModelToEdit(row);
}
- using method: self.selectRow(row){
self.ModelToEdit = new MyModel(ko.ToJS(row));
}

when using method no2 i had to reload parts of html page with ko.appyBindings(MODEL, dom)

and when using method no1 i, the data was successfully 'copied' but i couldn't see it on html :(

and yes, i'm using jQuery ajax to retreive data to MODEL collection

i hope this helps...
if not, please say what else might be more helpful..

thank you

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900