jQuery UI Widgets Forums Grid Grid updaterow ends in no server side update

This topic contains 8 replies, has 2 voices, and was last updated by  Dimitar 9 years ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author

  • Ivalde
    Participant

    The following grid is set editable in the $scope.gridSettings and the updaterow function is included in the source definition.

    The grid is then edited, but the edited cells are not updated at the server.

    Grid code is the following:

    <!DOCTYPE html>
    <html ng-app=”demoApp”>
    <head>
    <title id=”Description”>jqxGrid Binding to JSON using AngularJS</title>
    <link rel=”stylesheet” type=”text/css” href=”../../jqwidgets/styles/jqx.base.css” />
    <script type=”text/javascript” src=”../../jqwidgets/scripts/angular.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxradiobutton.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxangular.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/scripts/demos.js”></script>
    <script type=”text/javascript”>
    var demoApp = angular.module(“demoApp”, [“jqwidgets”]);
    demoApp.controller(“demoController”, function ($scope, $http) {
    $scope.createWidget = false;
    $http({
    method: ‘get’,
    url: ‘../../concrete/themes/elemental/domains/grid_data.php’
    }).success(function (data, status) {
    var source = {
    datatype: “json”,
    datafields: [
    { name: ‘Code’},
    { name: ‘Name’}
    ],
    id: ‘Code’,
    localdata: data,
    addrow: function (rowid, rowdata, position, commit) {
    commit(true);
    },
    updaterow: function (rowid, rowdata, commit) {
    commit(true);
    },
    deleterow: function (rowid, commit) {
    commit(true);
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $scope.gridSettings = {
    width: 500,
    source: dataAdapter,
    columnsresize: true,
    editable: true,
    filterable: true,
    showfilterrow: true,
    sortable: true,
    columns: [
    { text: ‘Code’, filtertype: ‘input’, datafield: ‘Code’, width: 250 },
    { text: ‘Name’, filtertype: ‘input’, datafield: ‘Name’, width: 250 }
    ]
    };
    $scope.createWidget = true;
    }).error(function (data, status) {
    // Some error occurred
    });
    });
    </script>
    </head>
    <body ng-controller=”demoController”>
    <jqx-grid jqx-create=”createWidget” jqx-settings=”gridSettings”></jqx-grid>
    </body>
    </html>


    Dimitar
    Participant

    Hello Ivalde,

    commit(true) is not enough for your server-side to be updated. For a complete example, please check the Build CRUD Web App with jqxGrid using PHP and MySQL tutorial.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Ivalde
    Participant

    From that CRUD Web App tutorial I have now managed to let the edited cells be updated server side also.

    Thanks for the tip!

    I did belive the dataAdapter did the auto insert, auto update and auto delete. Is it planned to let the dataAdapter do that in the next versions? So that we do not need to include all these functions per jqxGrid?

    For the PHP SQL queries file in general, do we need to include one such file per widget? Or is it possible to let the SQL queries for all the widgets be placed in a single PHP file?


    Dimitar
    Participant

    Hi Ivalde,

    This functionality cannot be made automatic, because each user’s scenario differs from the others. It is up to you to implement the addrow, updaterow and deleterow callbacks. As for the PHP file – if multiple widgets are loaded from and/or update the same table from the database, you probably can use the same PHP file.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Ivalde
    Participant

    For this CRUD based grid I have now included a button for a new row to be inserted, which then calls this function:

    $(“#addrowbutton”).bind(‘click’, function () {
    var row = {};
    $(“#jqxgrid”).jqxGrid(‘addrow’, null, row);
    $(“#jqxgrid”).jqxGrid(‘refreshdata’);
    });

    This mechanism results in a new empty row inserted both client side and server side.

    For the new row data to be inserted (updated) however (ie. updaterow), the grid has to be complete refreshed (F5) before the data can be inserted client side and then catched server side.

    The $(“#jqxgrid”).jqxGrid(‘refreshdata’); was then inserted in the above code for the grid to be refreshed, with no success. The refresh method and the updatebounddata method results in no success either. These methods was then run in a button call, for a refresh button to be called just after the new row inserted, with no success. When data is inserted client side, it’s not cathed server side. The F5 refresh fix it all.

    Is the dataAdapter usage the reason for the missing refresh?


    Ivalde
    Participant

    Please note the server side table has an auto incremental Id column.

    I believe this can make the challenge, as that Id for the new row has to be bound client side before the new client side inserted data can then be catched server side.


    Dimitar
    Participant

    Hello Ivalde,

    1. Please make sure you call commit(true) in the success callback of the Ajax call made in addrow/updaterow. This will ensure the client-side grid is updated as well.
    2. In the following topic is discussed how to address this issue: http://www.jqwidgets.com/community/topic/insert-row-id-if-row-id-is-relied-on-auto-increment/.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Ivalde
    Participant

    Thanks for the tip on how to receive the server side auto incremental Id.

    The addrow function does now operate as expected.

    For the grid data insertion, update and delete operations in general, I would now like to receive the possible server side MySQL failure message, to let the client side user know from a popup message then what’s going wrong server side.

    For the addrow function and the success function, I have included the commit(true, data.Id); and for the error function, I have included commit(false);

    For the grid data operation, I have the following code as an example for the data insertion:

    if (isset($_GET[‘insert’])) {
    $insert_query = “INSERT INTO stbl_Domains (Domain) SELECT (”)”;
    $result = mysql_query($insert_query) or die(“SQL Error 1: ” . mysql_error());
    if ($result) {
    echo json_encode(array(‘Id’ => mysql_insert_id()));
    }
    }

    How to let that possible server side mysql_error() be included in the callback and presented in a client side popup?

    • This reply was modified 9 years ago by  Ivalde.
    • This reply was modified 9 years ago by  Ivalde.
    • This reply was modified 9 years ago by  Ivalde.

    Dimitar
    Participant

    Hi Ivalde,

    I think your question is answered in the following Stack Overflow topic: http://stackoverflow.com/questions/9066790/jquery-ajax-how-to-get-response-data-in-error.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.