1

Tengo un sistema en el cual le he agregado el apartado de Usuarios, he conseguido realizar la tabla para que muestre todos los usuarios, sin embargo los botones de Agregar, Eliminar y Editar no me funcionan y no hacen absolutamente nada, he realizado el sistema en PHP y Ajax

este es el código de mi archivo usuarios.php

<?php 

 date_default_timezone_set("America/Lima");
 $date = new DateTime();

 $fecha_inicio = $date->format('Y-m-d H:i:s');
 

 
?>


<!DOCTYPE html>
<html lang="es">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="../css/bootstrap.min.css">
   <!-- Favicon - FIS -->
   <link rel="shortcut icon" href="../imagenes/Logo-fis.png">

   <title>Admin-Usuarios</title>

   <script type="text/javascript" language="javascript">   
     history.pushState(null, null, location.href);
     window.onpopstate = function () {
       history.go(1);
     };
   </script>

</head>
<body>

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <a class="navbar-brand" href="javascript:void(0)">Sistema de Encuestas</a>
    
   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
     <span class="navbar-toggler-icon"></span>
   </button>
   

   <!--NAVBAR-->
   <div class="collapse navbar-collapse" id="navb">
     <ul class="navbar-nav mr-auto">
     </ul>
     <form class="form-inline my-2 my-lg-0" style="color: #fff">
         
     <?php   
     session_start();
       if (isset($_SESSION['u_usuario'])) {
         echo "Bienvenido " . $_SESSION['u_usuario'] . "\t";
         

         echo "<a href='../cerrar_sesion.php' class='btn btn-danger' style='margin-left: 10px'>Cerrar Sesión</a>";
       } else {
         header("Location: ../index.php");
       }
       

      ?>
        
     </form>
   </div>
 </nav>

   <!-- Content Section -->
   <div class="container" style="margin-top: 30px;">
       <div class="row">
           <div class="col-md-12 row">
               <div class="col-md-10 col-xs-12">
                   <h3>SISTEMA DE ENCUESTAS</h3>
               </div>
               <div class="col-md-2 col-xs-12">
           <a href="index.php">
          <input class="float-right btn btn-second" type="button" value="Atras">
          </a>    
             <br>
               </div>
           <div class="col-md-12 col-xs-12">
                    <button class="float-right btn btn-primary" id="boton_agregar">
                       Agregar Usuario
                   </button>    
               </div>
           
           </div>
       </div>
       <hr/>
       <div class="row">
           <div class="col-md-12">
               <h4>Listado de Usuarios</h4>
               <div class="table-responsive">
                   <div id="tabla_usuarios"></div>
               </div>
           </div>
       </div>
   </div>
   <!-- /Content Section -->


 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="../js/jquery-3.3.1.min.js"></script>
 <script src="../js/popper.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <script src="js/usuarios.js"></script>

</body>
</html>

<!-- Modal Agregar Nuevo Usuario -->
<div class="modal fade" id="modal_agregar" role="dialog">
   <div class="modal-dialog">
       <div class="modal-content">

           <div class="modal-header">
               <h4 class="modal-title">Agregar Nuevo Usuario</h4>
               <button type="button" class="close" data-dismiss="modal">
                   <span aria-hidden="true">&times;</span>
               </button>
           </div>

           <div class="modal-body">

               <div class="form-group row">
                       <label for="titulo" class="col-sm-3 col-form-label">ID Usuario</label>
                       <div class="col-sm-9">
                           <input type="text" class="form-control" id="id_usuario" placeholder="ID Usuario" autocomplete="off" autofocus>
                       </div>
                   </div>
             <div class="form-group row">
               <label for="descripcion" class="col-sm-3 col-form-label">Contraseña</label>
               <div class="col-sm-9">
               <input type="password" class="form-control" id="clave" placeholder="Contraseña" autocomplete="off" autofocus>
               </div>
             </div>
             <div class="form-group row">
               <label for="descripcion" class="col-sm-3 col-form-label">Nombre</label>
               <div class="col-sm-9">
               <input type="text" class="form-control" id="nombres" placeholder="Nombre" autocomplete="off" autofocus>
               </div>
             </div>
             <div class="form-group row">
               <label for="fecha_final" class="col-sm-3 col-form-label">Apellidos</label>
               <div class="col-sm-9">
               <input type="text" class="form-control" id="apellidos" placeholder="Apellidos" autocomplete="off" autofocus>
               </div>
             </div>
             <div class="form-group row">
               <label for="fecha_final" class="col-sm-3 col-form-label">Email</label>
               <div class="col-sm-9">
               <input type="text" class="form-control" id="email" placeholder="Email" autocomplete="off" autofocus>
               </div>
             </div>
             <div class="form-group row">
               <label for="fecha_final" class="col-sm-3 col-form-label">Tipo de Usuario</label>
               <div class="col-sm-9">
               <select name="id_tipo_usuario" class="form-control">
               <option value="0">Seleccione</option>
               <option value="1">Administrador</option>
               <option value="2">Usuario</option>
               <option value="3">Usuario Vista</option>
                 </select>
               </div>
             </div>
             <div class="form-group row">
               <label for="porcentaje_participacion" class="col-sm-3 col-form-label">Porcentaje Participacion</label>
               <div class="col-sm-9">
               <input type="text" class="form-control" id="porcentaje_participacion" placeholder="Porcentaje Participacion" autocomplete="off" autofocus>
               </div>
             </div>

           </div>

           <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
               <button type="button" class="btn btn-primary" onclick="agregarUsuario()">Agregar Usuario</button>
               <input type="hidden" id="hidden_id_usuario" value="<?php echo $_SESSION['id_usuario'] ?>">
           </div>

       </div>
   </div>
</div>

Este es mi codigo de mi archivo ajax llamado usuarios.js

// Cargar modal de boostrap para agregar nuevo usuario
// Usaremos el "shorter method"
$(function() {
    $("#boton_agregar_usuario").click(function() {
        $("#modal_agregar_usuario").modal("show");
    });
});

// Mostrar Usuarios
function mostrarUsuarios() {
    // Mostrar encuestas con el método ajax POST
    $.post("ajax_usuario/mostrarUsuario.php", {}, function(data, status) {
        $("#tabla_usuarios").html(data);
    });
}

// Mostrar Usuarios al cargar la página
$(function() {
    mostrarUsuarios(); // Llamando a la función
});


// Eliminar Usuario
function eliminarUsuario(id_usuario) {
    var conf = confirm("Estas seguro de eliminar el Usuario");
    if (conf == true) {
        // Eliminar encuesta con el método ajax POST
        $.post("ajax_usuario/eliminarUsuario.php", {id_usuario: id_usuario}, function (data, status) {
            // Volver a cargar la tabla de usuario
            mostrarUsuarios();
        });
    }
}


// Agregar nuevo usuario
function agregarUsuario() {
    // Obtener los valores de los inputs
    var id_usuario      = $("#id_usuario").val();
    var clave           = $("#clave").val();
    var nombres         = $("#nombres").val();
    var apellidos       = $("#apellidos").val();
    var email           = $("#email").val();
    var id_tipo_usuario = $("#id_tipo_usuario").val();
    var porcentaje_participacion        = $("#porcentaje_participacion").val();
    // Agregar usuario con el método ajax POST
    $.post("ajax_usuario/agregarUsuario.php",
        {
            id_usuario      : id_usuario,
            clave           : clave,
            nombres         : nombres,
            apellidos       : apellidos,
            email           : email,
            id_tipo_usuario : id_tipo_usuario,
            porcentaje_participacion : porcentaje_participacion 
        },
        function (data, status) {
            // Cerrar el modal
            $("#modal_agregar").modal("hide");
            // Mostrar los usuarios  nuevamente
            mostrarUsuarios(id_usuario);
            // Limpiar campos del modal
            $("#titulo").val("");
        }
    ) ;
}

y finalmente los codigos de mis archivos eliminarUsuario.php y agregarUsuario.php respectivamente

<?php
// Validar consulta
if (isset($_POST['id_usuario'])) {
    // Incluir archivo de conexión a base de datos
    include("../../conexion.php");

    // Obtener id_usuario
    $id_usuario = $_POST['id_usuario'];

    // Eliminar Usuario
    $query = "DELETE FROM usuarios WHERE id_usuario = '$id_usuario'";
    $resultado = $con->query($query);
}

<?php

if (isset($_POST['id_usuario']) && isset($_POST['clave']) && isset($_POST['nombres'])&& isset($_POST['apellidos'])&& isset($_POST['email'])&& isset($_POST['id_tipo_usuario'])&& isset($_POST['porcentaje_participacion'])) {
    // Incluir archivo de conexión a base de datos
    include("../../conexion.php");

    // Obtener valores
    $id_usuario                 = $_POST['id_usuario'];
    $clave                      = $_POST['clave'];
    $nombres                    = $_POST['nombres'];
    $apellidos                  = $_POST['apellidos'];
    $email                      = $_POST['email'];
    $id_tipo_usuario            = $_POST['id_tipo_usuario'];
    $porcentaje_participacion   = $_POST['porcentaje_participacion'];

    $query = "INSERT INTO usuarios (id_usuario, clave, nombres, apellidos, email, id_tipo_usuario, porcentaje_participacion)
              VALUES ('$id_usuario', '$clave', '$nombres', '$apellidos', '$email', '$id_tipo_usuario', '$porcentaje_participacion')";

    $resultado = $con->query($query);

}

La verdad que no he logrado encontrar el error o cual pueda ser el problema del porque no hacen absolutamente nada, todo lo demas funciona bien, sin embargo esto me esta costando un poco

1 respuesta 1

1

De momento he detectado un par de fallos. A saber:

  1. Los id del botón "Agregar" y su modal estan mal. Tu pones esto:
$(function() {
    $("#boton_agregar_usuario").click(function() {
        $("#modal_agregar_usuario").modal("show");
    });
});

cuando deberia ser esto para que se correspondan bien con lo que has puesto en el HTML:

$(function() {
    $("#boton_agregar").click(function() {
        $("#modal_agregar").modal("show");
    });
});

O bien cambia los id en el HTML, como prefieras.

  1. Te falta un id="id_tipo_usuario" en el select. Tu pones esto:
<select name="id_tipo_usuario" class="form-control">

cuando deberia ser esto:

<select id="id_tipo_usuario" name="id_tipo_usuario" class="form-control">

En cuanto a lo de eliminarUsuario o editar, poco puedo ayudarte si no pones el contenido de mostrarUsuario.php tambien en la pregunta donde veamos que has puesto en esos botones que invocan a esas funciones de javascript, que por cierto no veo ninguna que sea para editar.

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.