kendo-dataSource を取得して、ユーザーが投稿した投稿を DB にアップロードしようとしていますが、すべての投稿は kendoListView を使用して表示されます。
transport create メソッドのポスト リクエストを送信すると、ページの更新後に DB と listView で null 値しか受信しません。
コード:
<article class="box">
<h4><center><dt>Feedback & Suggestions</center></h4></dt>
<div id="feedback_zone">
<dd>
<input data-bind="value: name" type="text" class="k-textbox" placeholder='Your Name' />
<textarea data-bind="value: text" class="k-textbox" placeholder='Your Comment...' /></textarea>
<center><button data-bind="click: dbInsert" class="k-button">Add Feedback</button>
</dd>
<div data-role="listview" data-bind="source: comments" data-template="template"></div>
<div class="k-pager-wrap">
<div id="pager" class="k-pager"></div>
</div>
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="fb k-widget">
<img width="48" height="48" src="images/goose.gif" />
<p class="k-text">${text}</p>
<div class="metadata">
|
Posted by: ${name}
|
</div>
</div>
</script>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "includes/readFB.php",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
create: {
url: "includes/insertFB.php",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
}
},
schema: {
data: function(response) {
return response.data;
},
total: function(response) {
return response.data.length;
},
model: commentModel
},
pageSize: 5
});
$("#pager").kendoPager({
dataSource: dataSource
});
var commentModel = kendo.observable({
comments: dataSource,
name: null,
text: null,
dbAdd: function() {
$("#add_fb").toggle();
$("#add_bt").toggle();
},
dbInsert: function(e) { {
dataSource.add(this);
}
this.set("name", "");
this.set("text", "");
}
});
kendo.bind(document.body.children, commentModel);
});