Aqui tengo la explicacion detallada para ejecicio y problema planteado.
Primero voy a empezar con las correcciones para saber la razon del porque no esta funcionando:
1) Se está creando los check de activo con un identificador id=”change” lo cual no se debe hacer, porque un id es único por cada etiqueta, regla del HTML 5
Activo <span class="text-primary" id="change"><a href="#"><i class="fas fa-toggle-on"></i></a></span>
2) El evento keyup()
para JQuery es usado para escuchar el teclado al solar la tecla. (se recomienda usar click()
Cambiar por:
$(".change").click(function(){
3) Se debe cambiar el selector del evento en JQuery para que escuche a todo los activos usando tipo clase:
$("#change")
Cambiar por:
$(".change")
4) Poner la coma al final de los bloques })
$(".change").keyup(function(){
Cambiar por:
$(".change").click(function(){
5) Se recomienda colocar la carga de las librerías antes del codigo a ejecutar para que se puede interpretar la secuencia de la instrucciones.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
6) Para hacer la actualización del registro se necesita colocar un identificador de registro que identifique a quien pertenece ese ítem, el cual puede ser colocado en un atributo personalizado en la etiqueta.Ejemplo: idp
<p>
Activo <span class="text-primary change" idp="<?= $fila['idp']; ?>"><a href="#"><i class="fas fa-toggle-on"></i></a></span>
</p>
7) No se esta pasando correctamente en el archivo actualizar el valor idp, por lo tanto el SQL no puede saber a que registro actualizar.
$code = $_GET['@'];
Ahora
$code = $_GET['idp'];
8) Se debe enviar una respuesta al ser ejecutado la actualización en el archivo update.php, dicha respuesta puede ser usa salida tipo echo que será leida por el AJAX posteriormente.
echo 'Activo idp' . $code;
9) Este codigo no tiene utilidad por que se usa el método val()
para obtener valor de una etiqueta input y no de un span, no esta pasando los parámetros en forma correcta al AJAX.
var parametros="change="+$(this).val()
10) Se usara el metodo post para pasar los datos via AJAX, es mas seguro y se puede enviar mas informacion a futuro.
type: 'POST',
11) La data que será enviada por el Ajax es de esta forma:
data: {"parametro1" : "valor1", "parametro2" : "valor2"},
12) La etiqueta “.salida” no existe para mostrar el resultado del codigo hay que crearla.
$(".salida").html(response);
13) Quitar esta carga de librería y usar el CDN de JQuery de google. (esta incompleto y no corre AJAX)
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
Cambiar por este:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
14) Cambiar el método para recibir los datos en el archivo update.php
$code = $_GET['idp'];
Por este otro
$_POST['idp'];
15) Comentar la sintaxis de eco para la conexión exitosa en el archivo: connet.php
// echo "Connected successfully";
EXPLICACION DEL CODIGO YA ESTA FUNCIONANDO CON AJAX:
1) ARCHIVO: connect.php
Se creo una conexión a la base de datos a través de método PDO que es orientado a objetos.
Se declara los valores en la variables de conexión respectiva.
// parametros de conexion
$host ="localhost";
$user ="grafimar_admin";
$password ="anybody2015";
$database = "pruebas";
Se usa el try { } catch
para captura el error de conexión en caso de falla.
La conexion se establece creando una instancia del objeto PDO con el nombre de $conn.
$conn= new PDO("mysql:host=$host;dbname=$database", $user, $password);
Se configura los parametros del modo expecion de errores
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
2) ARCHIVO: update.php
Este archive es una simple rutina para actualizar registros.
Aquí se carga la conexión solamente una vez
require_once 'connect.php';
Se recibe el valor del nombre de variable “idp” a travez de un método POST.
$code = $_POST['idp'];
Hacemos la sintaxis de actualización del registro y se pasa el valor de idp para buscar el registro especifico y se ponde el valor del campo pestado = 1
$sql = "UPDATE proyectos SET pestado = '1' WHERE idp = '".$code."'";
Preparamos la conexión para ejecutar el comando SQL y se procede a su ejecución.
$stmt = $conn->prepare($sql);
$stmt->execute();
Enviamos una respuesta en pantalla por hacer actualizado el registro la cual consiste en “Activo “+ numero del idp
echo 'Activo idp' . $code;
EXPLICACION DEL CODIGO:
3) ARCHIVO: actualizar.php
Se cargan las librerías al principio para poder ejecutar sus instrucciones.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Con esta instrucción obliga a terminar la carga de la pagina se para ejecutar el codigo jquery o javascript
$(document).ready(function(){
Se escucha el evento del click botón derecho del mouse para la clase .chanse
$(".change").click(function(){
Capturamos el valor del atributo correspondiente con la etiqueta que tiene la clase “change” la cual es el
var idp = $(this).attr('idp'); // valor del idp
console.log(idp); // reporte por consola
Construimos la estrutura para pasar los datos mediante AJAX el cual usa la sintaxis:
{“llave”: “valor”}
var parametros={"idp":idp}; // construccion del parametro para enviar al AJAX
Aquí el nombre de la variable será idp y su valor será obtenido por la variable idp que recibió el valor del atributo con el mismo nombre.
// sintaxis para cambiar la clase de la etiqueta hijo de span
$(this).children().children().removeClass( "fa-toggle-on" ).addClass( "fa-toggle-off");
2) Para cambiar el estado del botón cambiamos su atributo mediante la remoción de la clase y luego la colocación de una nueva clase. En este caso el botón es el nieto de la etiqueta por eso se hace dos niveles de children().
3) Ahora ejecutamos el codigo AJAX: pasando los parámetros correspondientes:
Data: (son los datos que recibirá el otro archivo para trabajar)
url: (es la ruta y nombre del archivo)
type: Se usa el método POST por ser mas seguro y practico.
beforeSend: function () {}
Esta funcion se ejecuta antes de realizar la petición de AJAX, es util para aviso para el usuario o validaciones.
success: function (response) {}
Aquí se ha ejecutado satisfactoriamente el AJAX y se recibe la respuesta del archivo a través de la variable responde, en este caso será recibido 'Activo idp'.
$(".salida").html(response);
Mostrarmos el contenido de la salida a la etiqueta con clase “salida”
setTimeout(() => {
$(".salida").empty(); // limpiar salida
}, 2000);
Se usa para borrar el contenido de la etiqueta de clase “salida” despues de 2000 ms
error:function(){
alert("error")
}
En caso de fallo en la comunicación con AJAX se ejecuta este bloque de codigo.
CUERPO DEL ARCHIVO
require_once 'connect.php';
Se carga una sola vez la conexión.
$list = $conn->query("SELECT * FROM proyectos");
Se hace la consulta de SQL para todos los registros.
while ($fila = $list->fetch()) {}
Usamos el while para hacer un recorrido de todos los registro uno a uno, tomando los datos a través de la variable $fila.
if($fila['pestado'] == '0') {
Si el valor del campo pestado=0 entonces muestra el botón en modo ACTIVO.
<p>
Activo <span class="text-primary change" idp="<?= $fila['idp']; ?>"><a href="#"><i class="fas fa-toggle-on"></i></a></span>
</p>
Aquí se ha agregado un atributo propio llamado idp el cual va a contener el id que corresponde con ese registro y sirve para referenciarlo cuando se realice el evento del click.
<p>
Inactivo <span class="text-muted"><i class="fas fa-toggle-off"></i></span>
</p>
En caso de que pestado tenga otro valor coloca el estado del botón en Inactivo.
<h5 class="salida"></h5>
Salida que será llevada con el reporte de AJAX
AJUNTO LOS ARCHIVOS:
Archivo connect.php
<?php
// parametros de conexion
$host ="localhost";
$user ="grafimar_admin";
$password ="anybody2015";
$database = "pruebas";
// CONEXION A LA BD POR PDO
try {
$conn= new PDO("mysql:host=$host;dbname=$database", $user, $password);
// set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// echo "Connected successfully";
}
catch(PDOException $e)
{
echo "Connection failed: " . $e->getMessage();
}
?>
/////////////////////////////////////////////////////////////////////////////
Archivo update.php
<?php
require_once 'connect.php';
$code = $_POST['idp'];
$sql = "UPDATE proyectos SET pestado = '1' WHERE idp = '".$code."'";
$stmt = $conn->prepare($sql);
$stmt->execute();
echo 'Activo idp' . $code;
?>
///////////////////////////////////////////////////////////////////
Archivo actualizar.php
<head>
<script src="https://kit.fontawesome.com/cbec68f37d.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- codigo a ejecutar -->
<script>
$(document).ready(function(){
$(".change").click(function(){
var idp = $(this).attr('idp'); // valor del idp
console.log(idp); // reporte por consola
var parametros={"idp":idp}; // construccion del parametro para enviar al AJAX
// sintaxis para cambiar la clase de la etiqueta hijo de span
$(this).children().children().removeClass( "fa-toggle-on" ).addClass( "fa-toggle-off");
$.ajax({
data: parametros,
url: 'update.php',
type: 'POST',
beforeSend: function () {},
success: function (response) {
$(".salida").html(response);
setTimeout(() => {
$(".salida").empty(); // limpiar salida
}, 2000);
},
error:function(){
alert("error")
}
}); // fin de ajax/
}); // fin de click
}); // fin de document ready
</script>
<div class="container w-75 p-5">
<h3 class="mb-4">Activar y desactivar</h3>
<?php
// conectar ala BD
require_once 'connect.php';
?>
<?php
// carga de elementos (CONSULTA BD)
$list = $conn->query("SELECT * FROM proyectos");
while ($fila = $list->fetch()) {
if($fila['pestado'] == '0') {
?>
<p>
Activo <span class="text-primary change" idp="<?= $fila['idp']; ?>"><a href="#"><i class="fas fa-toggle-on"></i></a></span>
</p>
<?php } else { ?>
<p>
Inactivo <span class="text-muted"><i class="fas fa-toggle-off"></i></span>
</p>
<?php } } ?>
</div>
<h5 class="salida"></h5>
</body>
</html>
Imagenes de pantallas Ejecutando el programa:

Imagen de la Tabla de base de datos:

Imagen despues de Correr el Programa:

Resultado y Cambio en la Tabla:

Estrutura de la tabla con la cual se probo el codigo:
