0

estoy aprendiendo a hacer un simple crud con ajax y jquery. Ahora estoy intentando modificar cualquiera de los conceptos que tengo en una lista de elementos que previamente he insertado en la base de datos mysql, pero por alguna razón no me sale.

Éste es el html del formulario a través del cual inserto en base de datos:

<form id="form_insert" name="form_insert" class="form-control">
    <input type="text" id="name" name="name" placeholder="Nombre">  <br><br>
    <input type="text" id="last_name" name="last_name" placeholder="Apellido"> <br><br>
    <button type="submit" id="btn_insert" class="btn btn-warning m-3">Enviar</button>
</form>

Éste es el formulario con el que intento modificar los conceptos listados:

<div class="card" id="cardUpdate" style="width: 18rem;">
            <div class="card-body">
              <h5 class="card-title text-center">Modifica</h5>
              <form id="form_update" name="form_update" class="form-group">
                <input type="text" id="name_update" name="name_update" placeholder="Nombre" class="form-control">  <br>
                <input type="text" id="last_name_update" name="last_name_update" placeholder="Apellido" class="form-control"> <br>
                <button type="submit" id="btn_modif" class="btn btn-success form-control">Confirma</button>
            </form>
            </div>
          </div>

Éste es el ajax con el que empiezo mostrando la lista:

$(document).ready(function(){

$('#cardUpdate').hide();

$.ajax({
    url: 'list2.php',
    type: 'get',
    success: function(response){
        let data = JSON.parse(response);
        
        let template = '';
        data.forEach(element => {
            template += 
            `<tr value="${element.id}">
                <td>${element.id}</td>
                <td>${element.name}</td>
                <td>${element.last_name}</td>
                <td><button class="btn btn-danger delete">Borrar</button></td>
                <td><button class="btn btn-warning update">Modificar</button></td>
            </tr>`
        });
        $('#campo').html(template); 
    }
});

Éste el ajax con el que inserto los datos y a continuación muestro los datos:

$('#form_insert').submit(function(e){
    e.preventDefault();
    let data = {
        name: $('#name').val(),
        last_name: $('#last_name').val()
    };
    $.post('add.php', data, function(response){
        
        console.log(response);
        $.ajax({
            url: 'list2.php',
            type: 'get',
            success: function(response){
                let data = JSON.parse(response);
                
                let template = '';
                data.forEach(element => {
                    template += 
                    `<tr value="${element.id}">
                        <td>${element.id}</td>
                        <td>${element.name}</td>
                        <td>${element.last_name}</td>
                        <td><button class="btn btn-danger delete">Borrar</button></td>
                        <td><button class="btn btn-warning update">Modificar</button></td>
                    </tr>`
                });
                $('#campo').html(template); 
                $('#formulario').trigger('reset');
            }
        });
    });
});

Y éste con el que intento, en vano, modificar cualquier concepto:

let id_update;  //el id lo capturo aparte en una variable global con el siguiente click

$(document).on('click', '.update', function(){
    $('#cardUpdate').show();
    let element = $(this)[0].parentElement.parentElement;
    id_update = $(element).attr('value');
});
    
$('#form_update').on('submit', function(e){
    e.preventDefault();
    let data = {
        id: id_update,
        name: $('#name_update').val(),
        last_name: $('#last_name_update').val()
    };

    $.post('update.php', data, function(response){
        console.log(response);
        $.ajax({
            url: 'list2.php',
            type: 'get',
            success: function(response){
                let data = JSON.parse(response);
                
                let template = '';
                data.forEach(element => {
                    template += 
                    `<tr value="${element.id}">
                        <td>${element.id}</td>
                        <td>${element.name}</td>
                        <td>${element.last_name}</td>
                        <td><button class="btn btn-danger delete">Borrar</button></td>
                        <td><button class="btn btn-warning update">Modificar</button></td>
                    </tr>`
                });
                $('#campo').html(template); 
            }
        });
    });
});

});

Por último, el código php:

<?php

require_once('conn.php');


if(isset($_POST['id'])){
    $id = $_POST['id'];
    $name = $_POST['name_update'];
    $last_name = $_POST['last_name_update'];
    $query = "UPDATE prueba SET name=$name, last_name=$last_name WHERE id=$id";
    $result = mysqli_query($connection, $query);
    if(!$result){
        die('Fallaste!');
    }
    echo 'Conexión lograda!';
}

?>

Como digo, el insertar me sale bien, el problema lo tengo al modificar, y no lo entiendo porque es casi el mismo código. Sin embargo, el id sí me llega correctamente al servidor, lo que parece que no llega (según veo en el error) son el name y el last_name. ¿Es porque son dos formularios en un mismo archivo?

Si alguien pudiera ayudarme se lo agradecería de corazón.

Un saludo, Fidel

P.D. Éste es el error que me da:

<br />

Warning: Undefined array key "name_update" in C:\xampp\htdocs\Proyectos\PruebaAjax\update.php on line 8

Warning: Undefined array key "last_name_update" in C:\xampp\htdocs\Proyectos\PruebaAjax\update.php on line 9

Fatal error: Uncaught mysqli_sql_exception: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near ' last_name= WHERE id=68' at line 1 in C:\xampp\htdocs\Proyectos\PruebaAjax\update.php:11 Stack trace: #0 C:\xampp\htdocs\Proyectos\PruebaAjax\update.php(11): mysqli_query(Object(mysqli), 'UPDATE prueba S...') #1 {main} thrown in C:\xampp\htdocs\Proyectos\PruebaAjax\update.php on line 11

2 respuestas 2

0

Diria que el problema es que estas asignando estos nombres (name y last_name) a las claves pasadas por POST:

   let data = {
        id: id_update,
        name: $('#name_update').val(),
        last_name: $('#last_name_update').val()
    };

y en cambio, en tu script esperas estos otros (name_update y last_name_update):

$id = $_POST['id'];
$name = $_POST['name_update'];
$last_name = $_POST['last_name_update'];

La solución pasa por unificarlo en un sitio o en otro.

0

El $_POST es solo last_name no last_name_update, el error que te devuelve PHP es que no le llega la variable y por lo tanto da un error en la consulta.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.