tabalinas / jsgrid

Lightweight Grid jQuery Plugin
http://js-grid.com
MIT License
1.52k stars 352 forks source link

Blank Row after edit #1371

Open parkstraat9 opened 3 years ago

parkstraat9 commented 3 years ago

Hello, First of all thanks for this great plugin. But I am having troubles with update a row after I edit it. the updateItem gets new item values but I get a empty row. I am using: jquery-1.12.4 jsGrid v1.5.3

I expect the column "voorraad" get 4321 and column "datum" gets a fresh date-time after editing the row.

jsgrid_uodate_row_test.php

<!DOCTYPE html>
<html>
<head>

    <title>test</title>

    <script src="../js/jquery/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../js/jquery/plugins/jsgrid/jsgrid.min.js"></script> 
    <link type="text/css" rel="stylesheet" href="../js/jquery/plugins/jsgrid/jsgrid.min.css" />
    <link type="text/css" rel="stylesheet" href="../js/jquery/plugins/jsgrid/jsgrid-theme.min.css" />

<script>

$(document).ready(function(){

    $("#jsGrid").jsGrid({
        width: "100%",
        height: "100%",
        editing: true,
        controller: {
            loadData: function () {
                return $.ajax({
                    type: "GET",
                    url : 'jsgrid_uodate_row_test_gen.php',
                    cache: false,
                    dataType: "json"
                }); 

            },
            updateItem: function(item) {
                return $.ajax({
                    type: "PUT",
                    url: "jsgrid_uodate_row_test_gen.php",
                    data: item
                });
            }
        },
        fields: [
            { name: "id", type: "number",align: "center",readOnly: true,width:30,editing: false},
            { name: "voorraad", type: "number", align: "center", width:30, editing: true},
            { name: "datum",  type: "text",align: "center",readOnly: true},
            { type: "control"}
        ]
    });

    $("#jsGrid").jsGrid("loadData")

});
</script>

</head>

<body>
    <div id="jsGrid" ></div>
</body>
</html>

jsgrid_uodate_row_test_gen.php

<?php
$method = $_SERVER['REQUEST_METHOD'];

if($method == 'GET'){
    $output[] = array(
        'id'    => 1,   
        'voorraad'  => 1234,
        'datum' => date("h:i:s")
    );
    header("Content-Type: application/json");
    echo json_encode($output);
}

if($method == 'PUT'){
    $output[] = array(
        'id'    => 1,   
        'voorraad'  => 4321,
        'datum' => date("h:i:s")
    );
    header("Content-Type: application/json");
    echo json_encode($output);
}

?>
parkstraat9 commented 3 years ago

Ah, there I fixed it :-)

if($method == 'PUT'){
    $output[] = array(

to

if($method == 'PUT'){
    $output = array(
nandakumar-a commented 3 years ago

@parkstraat9 if you got the solution, please try to close the issue. thanks