jQuery UI Widgets Forums Grid delete row index 0-9 not working on jqxgrid crud with php and mysql

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 10 months ago.

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

  • deniferliyansah
    Participant

    hello, im deni ferliyansah
    i want to ask about my problems,
    my code is :
    JS
    <script type=”text/javascript”>
    $(document).ready(function () {
    var data = {};
    var theme = ‘metro’;
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘EmployeeID’, type: ‘string’},
    { name: ‘FirstName’, type: ‘string’},
    { name: ‘LastName’, type: ‘string’},
    { name: ‘Title’, type: ‘string’},
    { name: ‘Address’, type: ‘string’},
    { name: ‘City’, type: ‘string’},
    { name: ‘Region’, type: ‘string’},
    { name: ‘Country’, type: ‘string’}

    ],
    cache: false,
    id: ‘EmployeeID’,
    url: ‘data.php’,
    root: ‘Rows’,
    beforeprocessing: function(data)
    {
    source.totalrecords = data[0].TotalRows;
    },
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server – send update command
    var data = “update=true&FirstName=” + rowdata.FirstName + “&LastName=” + rowdata.LastName + “&Title=” + rowdata.Title + “&Address=” + rowdata.Address + “&City=” + rowdata.City + “&Region=” + rowdata.Region + “&Country=” + rowdata.Country ;

    data = data + “&EmployeeID=” + rowid;
    $.ajax({
    dataType: ‘json’,
    url: ‘data.php’,
    type: ‘POST’,
    data: data,
    success: function (data, status, xhr) {
    // update command is executed.
    commit(true);
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
    commit(false);
    }
    });
    },
    deleterow: function (rowid, commit) {
    // synchronize with the server – send delete command
    var data = “delete=true&” + $.param({EmployeeID: rowid}) ;

    $.ajax({
    dataType: ‘json’,
    url: ‘data.php’,
    type: ‘POST’,
    cache: false,
    data: data,
    success: function (data, status, xhr) {
    // delete command is executed.
    commit(true);
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
    commit(false);
    }
    });
    }

    };

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

    // initialize the input fields.
    $(“#firstName”).jqxInput({width: 150, height: 23});
    $(“#lastName”).jqxInput({width: 150, height: 23});
    $(“#title”).jqxInput({width: 150, height: 23});
    $(“#address”).jqxInput({width: 150, height: 23});
    $(“#city”).jqxInput({width: 150, height: 23});
    $(“#region”).jqxInput({width: 150, height: 23});
    $(“#country”).jqxInput({width: 150, height: 23});

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

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 1099,
    source: dataAdapter,
    theme:theme,
    autoheight: true,
    pageable: true,
    virtualmode: true,
    rendergridrows: function(obj)
    {
    return obj.data;
    },
    columns: [
    { text: ‘EmployeeID’, editable: false, datafield: ‘EmployeeID’, width: 100 },
    { text: ‘First Name’, columntype: ‘dropdownlist’, datafield: ‘FirstName’, width: 100 },
    { text: ‘Last Name’, columntype: ‘dropdownlist’, datafield: ‘LastName’, width: 100 },
    { text: ‘Title’, datafield: ‘Title’, width: 180 },
    { text: ‘Address’, datafield: ‘Address’, width: 180 },
    { text: ‘City’, datafield: ‘City’, width: 180 },
    { text: ‘Region’, datafield: ‘Region’, width: 180 },
    { text: ‘Country’, datafield: ‘Country’, width: 180 },
    { text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, pinned:true, width: 100, 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);
    $(“#firstName”).val(dataRecord.FirstName);
    $(“#lastName”).val(dataRecord.LastName);
    $(“#title”).val(dataRecord.Title);
    $(“#address”).val(dataRecord.Address);
    $(“#city”).val(dataRecord.City);
    $(“#region”).val(dataRecord.Region);
    $(“#country”).val(dataRecord.Country);

    // show the popup window.
    $(“#popupWindow”).jqxWindow(‘open’);
    }
    },
    { text: ‘Hapus’, datafield: ‘Hapus’, columntype: ‘button’, pinned:true, width: 100, cellsrenderer: function () {
    return “Hapus”;
    }, buttonclick: function (row) {
    // open the popup window when the user clicks a button.
    delrow = $(“#jqxgrid”).jqxGrid(‘getrowid’,row);
    var offset = $(“#jqxgrid”).offset();
    $(“#popupdelete”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

    // show the popup window.
    $(“#popupdelete”).jqxWindow(‘open’);
    }

    }
    ]
    });

    // initialize the popup window and buttons.
    $(“#popupWindow”).jqxWindow({
    width: 280, resizable: true, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.06
    });

    $(“#popupdelete”).jqxWindow({
    width: 280, resizable: true, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.06
    });

    $(“#Cancel”).jqxButton();
    $(“#Save”).jqxButton();
    $(“#Delete”).jqxButton();

    // update the edited row when the user clicks the ‘Save’ button.
    $(“#Save”).click(function () {
    if (editrow >= 0) {
    var row = { FirstName: $(“#firstName”).val(), LastName: $(“#lastName”).val(), Title: $(“#title”).val(), Address: $(“#address”).val(), City: $(“#city”).val(), Region: $(“#region”).val(), Country: $(“#country”).val()};

    var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
    $(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
    $(“#popupWindow”).jqxWindow(‘close’);
    }
    });

    // delete row.
    $(“#Delete”).click(function () {
    $(‘#jqxgrid’).jqxGrid(‘deleterow’, delrow);
    $(“#popupdelete”).jqxWindow(‘close’);
    });

    });
    </script>

    and data.php :
    <?php
    #Include the connect.php file
    include(‘connect.php’);
    #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”;
    }

    if (isset($_POST[‘update’]))
    {
    // UPDATE COMMAND
    $update_query = “UPDATE Employees SET FirstName='”.mysql_real_escape_string($_POST[‘FirstName’]).”‘,
    LastName='”.mysql_real_escape_string($_POST[‘LastName’]).”‘,
    Title='”.mysql_real_escape_string($_POST[‘Title’]).”‘,
    Address='”.mysql_real_escape_string($_POST[‘Address’]).”‘,
    City='”.mysql_real_escape_string($_POST[‘City’]).”‘,
    Region='”.mysql_real_escape_string($_POST[‘Region’]).”‘,
    Country='”.mysql_real_escape_string($_POST[‘Country’]).”‘ WHERE EmployeeID='”.mysql_real_escape_string($_POST[‘EmployeeID’]).”‘”;
    $result = mysql_query($update_query) or die(“SQL Error 1: ” .
    mysql_error());
    echo $result;
    }
    else if (isset($_POST[‘delete’]))
    {
    // DELETE COMMAND
    $delete_query = “DELETE FROM employees WHERE EmployeeID='”.mysql_real_escape_string($_POST[‘EmployeeID’]).”‘”;
    $result = mysql_query($delete_query) or die(“SQL Error 1: ” . mysql_error());
    echo $result;
    }

    else
    {
    $pagenum = $_GET[‘pagenum’];
    $pagesize = $_GET[‘pagesize’];
    $start = $pagenum * $pagesize;
    $query = “SELECT SQL_CALC_FOUND_ROWS * FROM Employees LIMIT $start, $pagesize”;

    $result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
    $sql = “SELECT FOUND_ROWS() AS found_rows;”;
    $rows = mysql_query($sql);
    $rows = mysql_fetch_assoc($rows);
    $total_rows = $rows[‘found_rows’];

    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $employees[] = array(
    ‘EmployeeID’ => $row[‘EmployeeID’],
    ‘FirstName’ => $row[‘FirstName’],
    ‘LastName’ => $row[‘LastName’],
    ‘Title’ => $row[‘Title’],
    ‘Address’ => $row[‘Address’],
    ‘City’ => $row[‘City’],
    ‘Region’ => $row[‘Region’],
    ‘Country’ => $row[‘Country’]
    );
    }

    $data[] = array(
    ‘TotalRows’ => $total_rows,
    ‘Rows’ => $employees
    );
    echo json_encode($data);
    }
    ?>

    this code work correctly when im delete data on the grid, after rowid 0-9 only,
    for rowid 0-9 on the grid this code not working for me
    please help me to fix this problems
    thanks


    Dimitar
    Participant

    Hello deniferliyansah,

    Please try calling updatebounddata after commit(true); in the success callback of the deleterow Ajax call:

    deleterow: function(rowid, commit) {
        // synchronize with the server – send delete command
        var data = "delete=true&" + $.param({
            EmployeeID: rowid
        });
    
        $.ajax({
            dataType: 'json',
            url: 'data.php',
            type: 'POST',
            cache: false,
            data: data,
            success: function(data, status, xhr) {
                // delete command is executed.
                commit(true);
                $('#jqxgrid').jqxGrid('updatebounddata');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                commit(false);
            }
        });
    }

    Alternatively, after making the $delete_query in your PHP, echo a selection of the updated data.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.