jQuery UI Widgets Forums Grid After update demo field name to mysql own field name, cannot load data

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

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

  • lammiu

    In Index.php
    $(document).ready(function () {
    var source =
    datatype: “json”,
    datafields: [
    { name: ‘EmployeeID’, type: ‘string’},
    { name: ‘FirstName’, type: ‘string’},
    { name: ‘Email’, type: ‘string’},
    { name: ‘Mobile’, type: ‘string’}
    cache: false,
    id: ‘EmployeeID’,
    url: ‘data.php’,
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server – send update command
    var data = “update=true&FirstName=” + rowdata.FirstName + “&Email=” + rowdata.Email + “&Mobile=” + rowdata.Mobile;
    data = data + “&EmployeeID=” + rowid;

    dataType: ‘json’,
    url: ‘data.php’,
    type: ‘POST’,
    data: data,
    success: function (data, status, xhr) {
    // update command is executed.

    var dataAdapter = new $.jqx.dataAdapter(source);

    // initialize the input fields.
    $(“#firstName”).jqxInput({width: 150, height: 23});
    $(“#email”).jqxInput({width: 150, height: 23});
    $(“#mobile”).jqxInput({width: 150, height: 23});

    var dataAdapter = new $.jqx.dataAdapter(source);
    var editrow = -1;

    // initialize jqxGrid
    width: 600,
    source: dataAdapter,
    autoheight: true,
    columns: [
    { text: ‘EmployeeID’, editable: false, datafield: ‘EmployeeID’, width: 100 },
    { text: ‘First Name’, columntype: ‘dropdownlist’, datafield: ‘FirstName’, width: 100 },
    { text: ‘Email’, columntype: ‘dropdownlist’, datafield: ‘Email’, width: 100 },
    { text: ‘Mobile’, datafield: ‘Mobile’, width: 180 },
    { text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {
    return “Edit”;
    }, buttonclick: function (row) {
    // open the popup window when the user clicks a button.
    editrow = row;
    var offset = $(“#jqxgrid”).offset();
    $(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

    // get the clicked row’s data and initialize the input fields.
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);

    // show the popup window.

    // initialize the popup window and buttons.
    width: 280, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01

    $(“#popupWindow”).on(‘open’, function () {


    // update the edited row when the user clicks the ‘Save’ button.
    $(“#Save”).click(function () {
    if (editrow >= 0) {
    var row = { FirstName: $(“#firstName”).val(), Email: $(“#email”).val(), Mobile: $(“#mobile”).val()};

    var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
    $(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
    <body class=’default’>
    <div id=’jqxWidget’>
    <div id=”jqxgrid”></div>
    <div style=”margin-top: 30px;”>
    <div id=”cellbegineditevent”></div>
    <div style=”margin-top: 10px;” id=”cellendeditevent”></div>
    <div id=”popupWindow”>
    <div style=”overflow: hidden;”>
    <td align=”right”>Name:</td>
    <td align=”left”><input id=”firstName” /></td>
    <td align=”right”>Email:</td>
    <td align=”left”><input id=”email” /></td>
    <td align=”right”>Mobile:</td>
    <td align=”left”><input id=”mobile”/></td>


    Instructor is mysql db, similar to Northwind except, I have changed the field name Title to mobile, Last name to Email

    #Include the connect.php file
    #Connect to the database
    //connection String
    $connect = mysql_connect($hostname, $username, $password)
    or die(‘Could not connect: ‘ . mysql_error());
    //Select The database
    $bool = mysql_select_db($database, $connect);
    if ($bool === False){
    print “can’t find $database”;
    // get data and store in a json array
    $query = “SELECT * FROM instructor”;

    if (isset($_POST[‘update’]))
    $update_query = “UPDATE ‘instructor’ SET FirstName='”.mysql_real_escape_string($_POST[‘FirstName’]).”‘,
    Mobile='”.mysql_real_escape_string($_POST[‘Mobile’]).”‘ WHERE EmployeeID='”.mysql_real_escape_string($_POST[‘EmployeeID’]).”‘”;
    $result = mysql_query($update_query) or die(“SQL Error 1: ” . mysql_error());
    echo “in update”;
    console.log(“in update”);
    echo $result;
    $result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $employees[] = array(
    ‘EmployeeID’ => $row[‘EmployeeID’],
    ‘FirstName’ => $row[‘FirstName’],
    ‘Email’ => $row[‘Email’],
    ‘Mobile’ => $row[‘Mobile’]

    echo json_encode($employees);


    Hi lammiu,

    Probably the problem can be in your database settings(i can’t se how you are change the schema). Do you have in your database table fields Email and Mobile, and also are they correctly set.
    The other problematic thing is your ajax function. You use type: ‘POST’ but with parameters prepared for GET request. To fix it if you want to use POST – use data package as object or add traditional: true,. The other variant is to use GET if you want that type of formatting.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team


    Hi Ivailo,

    Thx for the prompt reply.

    The database table only has 5 column, I have modified the northwind db by removing other columns and just updating 2 field names. The rest of the code are same as php demo for server_side_grid_editing_with_popup except with the 2 updated field names for the whole file


    Hi lammiu,

    Send the type of errors that you received. This will be very helpful.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team

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

You must be logged in to reply to this topic.