Question

I'm trying to get my kendo-dataSource to upload a post once submitted by the user to a DB and all the posts are displayed using a kendoListView.

When I am submitting the post request for the transport create method, I only receive null values in my DB and listView after a page refresh.

Code:

<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);
});

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top