Hola

Tengo un problema con el siguiente código. Tomé el ejemplo de aquí: http://phpflow.com/php/how-to-add-edit-and-delete-a-row-in-jquery-flexigrid-using-php-and-mysql/ y solo eliminó la opción "edad". Pero después de la eliminación, ya no puedo agregar registros a mi base de datos a través del formulario. Si agrego el registro manualmente (con phpMyAdmin) puedo editar los registros a través de la página web.

Tal vez alguien podría descubrir dónde está el error ...

Este es mi código:

Index.php

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Bootgrid example with add,edit and delete using PHP,MySQL and AJAX</title>
<link rel="stylesheet" href="dist/bootstrap.min.css" type="text/css" media="all">
<link href="dist/jquery.bootgrid.css" rel="stylesheet" />
<script src="dist/jquery-1.11.1.min.js"></script>
<script src="dist/bootstrap.min.js"></script>
<script src="dist/jquery.bootgrid.min.js"></script>
</head>
<body>
    <div class="container">
      <div class="">
        <h1>Simple Bootgrid example with add,edit and delete using PHP,MySQL and AJAX</h1>
        <div class="col-sm-8">
        <div class="well clearfix">
            <div class="pull-right"><button type="button" class="btn btn-xs btn-primary" id="command-add" data-row-id="0">
            <span class="glyphicon glyphicon-plus"></span> Record</button></div></div>
        <table id="employee_grid" class="table table-condensed table-hover table-striped" width="60%" cellspacing="0" data-toggle="bootgrid">
            <thead>
                <tr>
                    <th data-column-id="id" data-type="numeric" data-identifier="true">Empid</th>
                    <th data-column-id="employee_name">Name</th>
                    <th data-column-id="employee_salary">Salary</th>
                    <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
                </tr>
            </thead>
        </table>
    </div>
      </div>
    </div>

<div id="add_model" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Add Employee</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="frm_add">
                <input type="hidden" value="add" name="action" id="action">
                  <div class="form-group">
                    <label for="name" class="control-label">Name:</label>
                    <input type="text" class="form-control" id="name" name="name"/>
                  </div>
                  <div class="form-group">
                    <label for="salary" class="control-label">Salary:</label>
                    <input type="text" class="form-control" id="salary" name="salary"/>
                  </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="btn_add" class="btn btn-primary">Save</button>
            </div>
            </form>
        </div>
    </div>
</div>
<div id="edit_model" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Edit Employee</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="frm_edit">
                <input type="hidden" value="edit" name="action" id="action">
                <input type="hidden" value="0" name="edit_id" id="edit_id">
                  <div class="form-group">
                    <label for="name" class="control-label">Name:</label>
                    <input type="text" class="form-control" id="edit_name" name="edit_name"/>
                  </div>
                  <div class="form-group">
                    <label for="salary" class="control-label">Salary:</label>
                    <input type="text" class="form-control" id="edit_salary" name="edit_salary"/>
                  </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="btn_edit" class="btn btn-primary">Save</button>
            </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
$( document ).ready(function() {
    var grid = $("#employee_grid").bootgrid({
        ajax: true,
        rowSelect: true,
        post: function ()
        {
            /* To accumulate custom parameter with the request object */
            return {
                id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
            };
        },

        url: "response.php",
        formatters: {
                "commands": function(column, row)
                {
                    return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " + 
                        "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button>";
                }
            }
   }).on("loaded.rs.jquery.bootgrid", function()
{
    /* Executes after data is loaded and rendered */
    grid.find(".command-edit").on("click", function(e)
    {
        //alert("You pressed edit on row: " + $(this).data("row-id"));
            var ele =$(this).parent();
            var g_id = $(this).parent().siblings(':first').html();
            var g_name = $(this).parent().siblings(':nth-of-type(2)').html();
console.log(g_id);
                    console.log(g_name);

        //console.log(grid.data());//
        $('#edit_model').modal('show');
                    if($(this).data("row-id") >0) {

                                // collect the data
                                $('#edit_id').val(ele.siblings(':first').html()); // in case we're changing the key
                                $('#edit_name').val(ele.siblings(':nth-of-type(2)').html());
                                $('#edit_salary').val(ele.siblings(':nth-of-type(3)').html());

                    } else {
                     alert('Now row selected! First select row, then click edit button');
                    }
    }).end().find(".command-delete").on("click", function(e)
    {

        var conf = confirm('Delete ' + $(this).data("row-id") + ' items?');
                    alert(conf);
                    if(conf){
                                $.post('response.php', { id: $(this).data("row-id"), action:'delete'}
                                    , function(){
                                        // when ajax returns (callback), 
                                        $("#employee_grid").bootgrid('reload');
                                }); 
                                //$(this).parent('tr').remove();
                                //$("#employee_grid").bootgrid('remove', $(this).data("row-id"))
                    }
    });
});

function ajaxAction(action) {
                data = $("#frm_"+action).serializeArray();
                $.ajax({
                  type: "POST",  
                  url: "response.php",  
                  data: data,
                  dataType: "json",       
                  success: function(response)  
                  {
                    $('#'+action+'_model').modal('hide');
                    $("#employee_grid").bootgrid('reload');
                  }   
                });
            }

            $( "#command-add" ).click(function() {
              $('#add_model').modal('show');
            });
            $( "#btn_add" ).click(function() {
              ajaxAction('add');
            });
            $( "#btn_edit" ).click(function() {
              ajaxAction('edit');
            });
});
</script>

Respuesta.php

<?php
    //include connection file 
    include_once("connection.php");

    $db = new dbObj();
    $connString =  $db->getConnstring();

    $params = $_REQUEST;

    $action = isset($params['action']) != '' ? $params['action'] : '';
    $empCls = new Employee($connString);

    switch($action) {
     case 'add':
        $empCls->insertEmployee($params);
     break;
     case 'edit':
        $empCls->updateEmployee($params);
     break;
     case 'delete':
        $empCls->deleteEmployee($params);
     break;
     default:
     $empCls->getEmployees($params);
     return;
    }

    class Employee {
    protected $conn;
    protected $data = array();
    function __construct($connString) {
        $this->conn = $connString;
    }

    public function getEmployees($params) {

        $this->data = $this->getRecords($params);

        echo json_encode($this->data);
    }
    function insertEmployee($params) {
        $data = array();;
        $sql = "INSERT INTO `employee` (employee_name, employee_salary) VALUES('" . $params["name"] . "', '" . $params["salary"] . "' );  ";

        echo $result = mysqli_query($this->conn, $sql) or die("error to insert employee data");

    }


    function getRecords($params) {
        $rp = isset($params['rowCount']) ? $params['rowCount'] : 10;

        if (isset($params['current'])) { $page  = $params['current']; } else { $page=1; };  
        $start_from = ($page-1) * $rp;

        $sql = $sqlRec = $sqlTot = $where = '';

        if( !empty($params['searchPhrase']) ) {   
            $where .=" WHERE ";
            $where .=" ( employee_name LIKE '".$params['searchPhrase']."%' ";    


            $where .=" OR employee_salary LIKE '".$params['searchPhrase']."%' )";
       }
       if( !empty($params['sort']) ) {  
            $where .=" ORDER By ".key($params['sort']) .' '.current($params['sort'])." ";
        }
       // getting total number records without any search
        $sql = "SELECT * FROM `employee` ";
        $sqlTot .= $sql;
        $sqlRec .= $sql;

        //concatenate search sql if value exist
        if(isset($where) && $where != '') {

            $sqlTot .= $where;
            $sqlRec .= $where;
        }
        if ($rp!=-1)
        $sqlRec .= " LIMIT ". $start_from .",".$rp;


        $qtot = mysqli_query($this->conn, $sqlTot) or die("error to fetch tot employees data");
        $queryRecords = mysqli_query($this->conn, $sqlRec) or die("error to fetch employees data");

        while( $row = mysqli_fetch_assoc($queryRecords) ) { 
            $data[] = $row;
        }

        $json_data = array(
            "current"            => intval($params['current']), 
            "rowCount"            => 10,            
            "total"    => intval($qtot->num_rows),
            "rows"            => $data   // total data array
            );

        return $json_data;
    }
    function updateEmployee($params) {
        $data = array();
        //print_R($_POST);die;
        $sql = "Update `employee` set employee_name = '" . $params["edit_name"] . "', employee_salary='" . $params["edit_salary"]."'  WHERE id='".$_POST["edit_id"]."'";

        echo $result = mysqli_query($this->conn, $sql) or die("error to update employee data");
    }

    function deleteEmployee($params) {
        $data = array();
        //print_R($_POST);die;
        $sql = "delete from `employee` WHERE id='".$params["id"]."'";

        echo $result = mysqli_query($this->conn, $sql) or die("error to delete employee data");
    }
}
?>

También hay connection.php pero la conexión a mi base de datos funciona. Supongo que el response.php espera 3 parámetros (nombre, salario y edad) pero solo obtiene dos ... ¡No dude en solicitar más detalles!

Gracias de antemano, Francis

1
Francis 2 abr. 2017 a las 21:45

2 respuestas

La mejor respuesta

Sí, solo tenía que eliminar el campo de su base de datos. Probablemente se marcó como NOT NULL, y cuando eliminó el campo del código, INSERT falló al intentar insertar un nulo employee_age :)

0
Vasili 2 abr. 2017 a las 19:08

Debe usar las herramientas de desarrollo de su navegador para verificar la pestaña 'Red' para las solicitudes de XHR que se disparan y ver las respuestas de las mismas. Creo que puedes depurar tu camino hacia una solución que funcione desde allí.

Puede usar otras herramientas como cartero para probar su "API" AJAX (response.php) pero las herramientas de desarrollo de su navegador deberían ser más que suficientes para esto;)

0
sfeldmann 2 abr. 2017 a las 19:00