0

Sucede que tengo un archivo PHP llamado vistaArea donde listo todos los registros de mi BD y al momento de pulsar en el btn-editar este debe re-dirigirme a un PHP editaArea donde se debe cargar los datos que se muestra en la tabla para su posterior modificación, si la modificación es exitosa mostrar un mensaje de éxito en vistaArea caso contrario mostrar mensaje de error en editaArea.

El otro problema que tengo es que estoy usando un button para realizar la acción de editar, pero este no me redirige a editaArea, probé con el evento click pero solo funciona para el primer registro y en los demás no hace nada.

Para mostrar los mensajes estoy usando alertifyjs, mi código es el siguiente:

PHP vistaArea donde listo los registros

<table class="table table-hover table-bordered table-responsive-md table-sm text-center" id="tb-area">
  <thead>
    <th>#</th>
    <th>Nombre</th>
    <th>Acciones</th>
  </thead>
  <tbody>
    <?php          
    require_once '../controlador/controladorArea.php';
    $registros=1;
    foreach ((array) $objArea as $campos): 
      $datos=$campos->id_area."-".$campos->nom_area;
      ?>
      <tr>                
        <td><?php echo $registros++?></td>
        <td><?php echo $campos->nom_area?></td>
        <td>
          <button type="button" class="btn btn-outline-warning" name="btn-editar" id="btn-editar" onclick="obtenerArea(<?php echo $datos?>)"><i class="fas fa-edit"></i></button>
          <button type="button" class="btn btn-outline-danger" onclick="confirmaEliminacion(<?php echo $campos->id_area?>)"><i class="fas fa-trash-alt"></i></button>
        </td>                
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

Archivo JS donde tengo las funciones para obtener y actualizar datos

function obtenerArea(datos){
    var d=datos.split('-');
    /*Estos son los campos de mi PHP editaArea donde deberían asignarse los valores
    que trae "datos" desde vistaArea para después puedan actualizarse*/
    $('#id-up').val(d[0]);
    $('#area-up').val(d[1]);
    /* Un intento fallido de redireccionar a editaArea con los datos obtenidos
    document.location.href='editaArea.php';*/
}

function actualizaArea(){
    var cadena=$('#frmAreaEdit').serialize();
    $.ajax({
        type: 'POST',
        url: '../controlador/controladorArea.php',
        data: cadena,
        success:function(response){
            if(response){                
                /*En estas líneas refresco vistaArea y supuestamente 
                mostrar el mensaje de éxito pero no hace nada
                $('#container-add').load('vistaArea.php #frmArea');
                $('#container-area').load('vistaArea.php #tb-area');
                alertify.success("Actualizado exitosamente!");*/
            }else{
                /*Este mensaje debería mostrarse en el editaArea si falló la modificación*/
                alertify.error("Falló la solicitud!");
            }
        }        
    });
}

PHP editaArea donde deben cargar los datos de vistaArea al pulsar el btn-editar

<form action="" method="post" id="frmAreaEdit">
  <input type="text" class="form-control" id="id-up" name="id-up" hidden>
  <div class="form-group">
    <input type="text" class="form-control" id="area-up" name="area-up">
  </div>
  <button type="submit" class="btn btn-success" name="btn-actualizar" id="btn-actualizar" onclick="actualizaArea();return false;">Actualizar</button>
</form>
8
  • Podrias usar un modal de Bootstrap en lugar de un formulario. Luego mandas la informacion por Ajax
    – alanfcm
    Commented el 21 mar. 2019 a las 16:22
  • Si es con un modal debería ir dentro de mi archivo vistaArea y luego realizar el editar verdad. Ahora si no usara el modal es posible realizarlo de la forma en que lo estoy trabajando o me veo obligado a usar el modal? Commented el 21 mar. 2019 a las 16:28
  • Si es posible realizaro con dos archivos diferentes, pero tendrias que redirigir a la otra pagina y pasar los datos por el URL.
    – alanfcm
    Commented el 21 mar. 2019 a las 16:31
  • Si contemple esa alternativa, pero no me parece muy viable ya que el usuario tiene la posibilidad de modificar los id en la URL y si digitara uno que no existe el sistema daría error. Por ello intente usar Ajax para pasar los datos por POST y no por GET. Commented el 21 mar. 2019 a las 16:36
  • En ese caso, tu mejor opcion es un modal y Ajax.
    – alanfcm
    Commented el 21 mar. 2019 a las 16:38

1 respuesta 1

0

Tienes una brecha de lógica muy grande. Corrijamos el primer issue.

<button type="button" class="btn btn-outline-warning" 
   name="btn-editar" id="btn-editar" 
   onclick="obtenerArea(<?php echo $datos?>)">
     <i class="fas fa-edit"></i>
</button>

Ahora, considero que no es necesario enviar todo el set de datos, visualmente en la URL no es muy amigable. Con el ID es más que suficiente aunque tendrá que cambiar un poco la lógica de editaArea.php

Tu botón puede quedar perfecto así

<button type="button" class="btn btn-outline-warning" 
   onclick="location.href='path/editaArea.php?id=".$campos->id_area."'">
     <i class="fas fa-edit"></i>
</button>

Lo puedes hacer también por Javascript y no pasa nada, hay muchas formas de solucionar esto. Cuando des click, te enviará a la otra URL algo así por ejemplo

localhost/path/editaArea.php?id=1

¿Qué tienes que hacer en editaArea?

$id  = $_GET['id'];
$sql = "SELECT id, area FROM areas where id = " . $id;

Es decir, haces una consulta y recuperas el área que le dieron click mediante un ID. Ahora si, ya tienes el primer issue resuelto, vamos por el siguiente.

<form action="" method="post" id="frmAreaEdit">
  <input type="text" class="form-control" id="id-up" name="id-up" hidden>
  <div class="form-group">
    <input type="text" class="form-control" id="area-up" name="area-up">
  </div>
  <button type="submit" class="btn btn-success" name="btn-actualizar" id="btn-actualizar" onclick="actualizaArea();return false;">Actualizar</button>
</form>

Tienes este formulario, debes poner los values con el retorno de la consulta anterior, la que hiciste para traer desde la otra vista el ID. Hay un error conceptual para usar el form y el AJAX. La naturaleza del formulario con el botón de tipo submit hará que la información se envíe antes que tu AJAX entre en acción. Como no estás cortando las acciones naturales del formulario este se enviará y fallará por que su propiedad action no sabe a donde ir, esto independientemente de que haya un AJAX escrito, lo resolvemos

<form id="frmAreaEdit">
  <input type="text" class="form-control" id="id-up" name="id-up" value="<?php echo $datos_query['id']; ?>" hidden>
  <div class="form-group">
    <input type="text" class="form-control" id="area-up" name="area-up" value="<?php echo $datos_query['area']; ?>">
  </div>
  <button type="submit" class="btn btn-success" name="btn-actualizar" id="btn-actualizar">Actualizar</button>
</form>

<script>
  //Cuando el dom este listo
  $( () => {

   //Listener para cuando se envie el formulario
   $(document).on('submit', '#frmAreaEdit', function (e) {
     //Cortamos las acciones naturales del form
     e.preventDefault(); e.stopPropagation();

    //Esto hará que ahora si entre el AJAX
    var cadena=$(this).serialize();
    $.ajax({
        type: 'POST',
        url: '../controlador/controladorArea.php',
        data: cadena,
        success:function(response){
            if(response){                
                /*En estas líneas refresco vistaArea y supuestamente 
                mostrar el mensaje de éxito pero no hace nada
                $('#container-add').load('vistaArea.php #frmArea');
                $('#container-area').load('vistaArea.php #tb-area');
                alertify.success("Actualizado exitosamente!");*/
            }else{
                /*Este mensaje debería mostrarse en el editaArea si falló la modificación*/
                alertify.error("Falló la solicitud!");
            }
        }        
    });
   });

  });
</script>

Recuerda agregar las librerías correspondientes como Jquery y Bootstrap. Este modelo es una corrección a lo que intentas hacer, sin embargo hay soluciones más específicas como lo que comentó @alancfm, con un modal, así no sales de la ventana principal y estarías haciendo una SPA muy elegante.

Te lo dejo a tu consideración.

Saludos

1
  • Gracias por tu explicación detallada, pero justamente lo que quería evitar era enviar el id por la URL ya que un usuario malintencionado puede modificar el id. Por ello intenté guardar los datos en una variable la cual intentaba pasar por POST. La mejor solución será crear un modal como indicó @alancfm. Commented el 21 mar. 2019 a las 17:27

Tu Respuesta

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

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