This question is locked. New answers and comments are not allowed.
With the following code, I'm able to read data from my read WCF method ("GetListOfProducts") and display the data in one of the #test textbox. When I update the data in one of the #test textboxes then click save, I'm expecting it to call the update WCF ("SetProductName") method. But, when I click save, nothing happens. Can someone help me? Thanks!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="scripts/login.js"></script>
<script src="scripts/location.js"></script>
<script src="scripts/weather.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div data-role="layout" data-id="pageLayOut">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#homeView" data-icon="home">Home</a>
<a href="#productsView" data-icon="action">Products</a>
</div>
</div>
</div>
<div data-role="view" id="homeView" data-title="Home" data-layout="pageLayOut">
<h1>Welcome!</h1>
</div>
<div data-role="view" id="productsView" data-title="Products" data-model="viewModel" data-layout="pageLayOut" data-init="bindForm">
<ul id="productsList"
data-bind="source: productsData"
data-endlessscroll="true"
data-template="productsTemplate"
data-role="listview"
data-style="inset"></ul>
<input type="button" value="Save" data-bind="click: save" />
</div>
<script id="productsTemplate" type="text/x-kendo-template">
<input type="text" id="test" data-bind="value: ProductName, events: { change: change }" />
</script>
<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "pageLayOut" });
</script>
<script>
var viewModel = kendo.observable({
productsData: new kendo.data.DataSource(
{
transport: {
read: {
dataType: "json",
url: "http://localhost/productWCF/productService.svc/GetListOfProducts",
data: {
Accept: "application/json"
},
type: "GET"
},
update: {
dataType: "json",
url: "http://localhost/productWCF/productService.svc/SetProductName",
type: "PUT"
},
parameterMap: function (data, operation) {
alert(operation);
if (operation !== "read" && data.models) {
for (var i in data.models) {
return kendo.stringify({ ProductID: "ProductID", ProductName: "ProductName", Status: "Status" });
}
}
return data;
},
batch: false,
schema: {
model: {
id: "ProductID",
fields: {
ProductSiteID: { type: "string" },
ProductName: { type: "string" },
Status: { type: "string" }
}
}
}
}
}),
save: function (e) {
this.productsData.sync();
},
change: function () {
alert("change was made");
}
});
function bindForm() {
alert("Bind called");
kendo.bind($("#productsView", viewModel));
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="scripts/login.js"></script>
<script src="scripts/location.js"></script>
<script src="scripts/weather.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div data-role="layout" data-id="pageLayOut">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#homeView" data-icon="home">Home</a>
<a href="#productsView" data-icon="action">Products</a>
</div>
</div>
</div>
<div data-role="view" id="homeView" data-title="Home" data-layout="pageLayOut">
<h1>Welcome!</h1>
</div>
<div data-role="view" id="productsView" data-title="Products" data-model="viewModel" data-layout="pageLayOut" data-init="bindForm">
<ul id="productsList"
data-bind="source: productsData"
data-endlessscroll="true"
data-template="productsTemplate"
data-role="listview"
data-style="inset"></ul>
<input type="button" value="Save" data-bind="click: save" />
</div>
<script id="productsTemplate" type="text/x-kendo-template">
<input type="text" id="test" data-bind="value: ProductName, events: { change: change }" />
</script>
<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "pageLayOut" });
</script>
<script>
var viewModel = kendo.observable({
productsData: new kendo.data.DataSource(
{
transport: {
read: {
dataType: "json",
url: "http://localhost/productWCF/productService.svc/GetListOfProducts",
data: {
Accept: "application/json"
},
type: "GET"
},
update: {
dataType: "json",
url: "http://localhost/productWCF/productService.svc/SetProductName",
type: "PUT"
},
parameterMap: function (data, operation) {
alert(operation);
if (operation !== "read" && data.models) {
for (var i in data.models) {
return kendo.stringify({ ProductID: "ProductID", ProductName: "ProductName", Status: "Status" });
}
}
return data;
},
batch: false,
schema: {
model: {
id: "ProductID",
fields: {
ProductSiteID: { type: "string" },
ProductName: { type: "string" },
Status: { type: "string" }
}
}
}
}
}),
save: function (e) {
this.productsData.sync();
},
change: function () {
alert("change was made");
}
});
function bindForm() {
alert("Bind called");
kendo.bind($("#productsView", viewModel));
}
</script>
</body>
</html>