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">×</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