datasource POST not working when sync is called

[Robert Smallwood]

Hello,

I'm following the "Getting started with the Kendo UI datasource" video. All is going well until I reach the "create new item" part. Populating the grid from the source json file works just fine. Looking at the network tab of the developer tools in Chrome, a POST is never sent when the datasource.sync() is called. 

I am using jquery 1.8.2, Kendo UI Q3 2012 SP1 and Chrome 24.0.1312.56.

My javascript is as follows:

 

dataSource = new kendo.data.DataSource({

    transport: {

        read: {

            url: "data.json",

            dataType: "json",

            cache: false

            },

        create: {

            url: "addItem.php",

            type: "POST"

        },

        schema: {

            model: myDataSource

        }

        }

        });

Any help would be greatly appreciated.

[Vaughn]

Hi, 

I'm experiencing a similar problem with KendoUI .2012.3.1315

In more detail, I have 

$("#button-create").click(function() {

    var myInstance = new myModel({ email: $("#input-email").val(), name: $("#input-name").val() });

    console.log(myInstance.isNew());  // this returns true

    myDataSource.add(myInstance);

    myDataSource.sync(); // transport.create is not being called from myDataSource. "create" is simply create: function() { alert("creating"); }

});

and FYI my model is defined as follows. 

var myModel = kendo.data.Model.define({
id: "id",
fields: {
id: {
editable: false,
nullable: true,
},
email: {
type: "string",
},
name: {
type: "string",
},
},
});

any ideas? 

[Petur Subev]

Hello,

I tried to play with this demo and I can see in the net tab the request is performed. 

http://jsbin.com/ipecul/4/edit

However in Robert's code I can see the schema is inside of the transport which is not right.

Kind Regards,
Petur Subev
the Telerik team

[Robert Smallwood]

Petur,

You are correct. I had it incorrectly placed. Moving the schema outside transport corrected the problem and it is now executing the post correctly. The POST is reaching my PHP serverside correctly, but I am getting a javascript error and the popup "create" window for my grid is not closing after data entry.

My current code:

var myDataSource = kendo.data.Model.define({

    id: "id",

    fields: {

        id: { editable: false, nullable: true },

        Case: { validation: {required: true}},

        hpc: { validation: {required: true}, type: "boolean" },

        AHU: { validation: {required: true}},

        ASHR: { validation: {required: true}},

        RedACH: { validation: {required: true}},

        RAT: { validation: {required: true}},

        RAH: { validation: {required: true}}

    }

});

 

var DSource = new kendo.data.DataSource({

transport: {

    read: {

        url: "cases.json",

        dataType: "json",

        cache: false

        },

    create: {

        url: "addItem2.php",

        type: "POST"

    }

    },

    schema: {

        model: myDataSource

    }

    }

    );

     

    DSource.group({ field: "Case" });

 

$("#parametric").kendoGrid({

    columns: [{ title: "Case", width: 100, field: "Case" },

              { title: "Heat Pump Chiller", width: 125, field: "hpc" },

              { title: "AHU", field: "AHU", width: 80 },

              { title: "Air-side Heat Recovery", width: 150, field: "ASHR" },

              { title: "Reduced ACH", width: 100, field: "RedACH" },

              { title: "Room Air Temp Setpoint", width: 100, field: "RAT" },

              { title: "Room Air Humidity Setpoint", width: 100, field: "RAH" }],

    dataSource: DSource,

    toolbar: ["create"],

    scrollable: true,

    editable: "popup"

});

and the error:

Uncaught SyntaxError: Unexpected number kendo.web.js:2203

extend.setter kendo.web.js:2203

Observable.extend._set kendo.web.js:5070

ObservableObject.extend.accept kendo.web.js:5271

Observable.extend._accept kendo.web.js:6592

(anonymous function) kendo.web.js:6531

(anonymous function) jquery.min.js:2

l jquery.min.js:2

c.fireWith jquery.min.js:2

c.fire jquery.min.js:2

transport.(anonymous function).call.extend.success kendo.web.js:6661

l jquery.min.js:2

c.fireWith jquery.min.js:2

T jquery.min.js:2

r

[Petur Subev]

Hello again Robert,

I assume that the response which is returned from the server is not right.
Basically the response after update should be empty one with status 200 OK, if there are any errors they should be added to the errors field according to your schema.errors configuration. This way the error event will be triggered.
Is the error event of the dataSource triggered in your case?

Kind Regards,
Petur Subev
the Telerik team

[Vaughn]

regarding the demo http://jsbin.com/ipecul/4/edit

Can someone please explain where the net tab is? I am unable to see that a POST is occurring. 

[Petur Subev]

Hello Vaughn,

It depends what browser you use. Take a look at this blogpost for some hints how to debug.

Kind Regards,
Petur Subev
the Telerik team

[Robert Smallwood]

Petur, 

This is the error in both IE and Firefox. Chrome is showing it as previously posted "Syntax Error".

SyntaxError: missing ; before statement

 

d.0=value

 

kendo.web.js (line 2203, col 1)

    

The response header is HTTP/1.1 200 OK

[Robert Smallwood]

Petur,

Your statement about the header response prompted me to check a few things and I found the issue. The PHP receiving the POST was sending the response header back as "HTML/TEXT" rather than "APPLICATION/JSON". 

Correcting that fixed the remaining issues.

Thanks!