datasource POST not working when sync is called

9 posts, 1 answers
  1. Robert Smallwood
    Robert Smallwood avatar
    12 posts
    Member since:
    Jul 2009

    Posted 23 Jan 2013 Link to this post

    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.
  2. Vaughn
    Vaughn avatar
    9 posts
    Member since:
    Nov 2012

    Posted 24 Jan 2013 Link to this post

    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? 

  3. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 25 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Robert Smallwood
    Robert Smallwood avatar
    12 posts
    Member since:
    Jul 2009

    Posted 25 Jan 2013 Link to this post

    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
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 29 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Vaughn
    Vaughn avatar
    9 posts
    Member since:
    Nov 2012

    Posted 29 Jan 2013 Link to this post

    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. 

  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 30 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Robert Smallwood
    Robert Smallwood avatar
    12 posts
    Member since:
    Jul 2009

    Posted 05 Feb 2013 Link to this post

    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

  9. Robert Smallwood
    Robert Smallwood avatar
    12 posts
    Member since:
    Jul 2009

    Posted 05 Feb 2013 Link to this post

    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!
Back to Top