Cambiar <input type="checkbox" checked> por <input type="checkbox" check>

[safernandez666]

Quiero hacer una Web, donde se muestre 3 cambios de estado. Sobre los atributos Habitación, Living y Pieza.

Con que lo debería hacer? websockets o jQuery? La idea es que sea "Realtime". Cambiar el <input type="checkbox" checked> por <input type="checkbox" check> en base a una consulta a la BBDD.

Una vez que, logre este estado. Debería hacer que refresque la pagina, cada x tiempo?

Agradezco, la ayuda que me puedas brindar! Este seria el botón y la etiqueta!



Este es el esquema de la BBDD MySQL

[Alexis88]

Para mostrar los cambios en tiempo real desde el servidor hacia una o más estaciones de trabajo, las websockets son lo que te conviene usar. Con jQuery, que es una librería de JavaScript, puedes manipular al DOM, realizar peticiones asíncronas, administrar estilos (CSS), entre otros.

Por otro lado, no existe el atributo check. Si lo que buscas es desmarcar al checkbox, debes de cambiar el valor del atributo checked a false:

Código Javascript:

elemento.checked = false;
 

Y si vas a usar websockets, ya no haría falta refrescar la página. Bastaría con que se produzca algún cambio en el lado del servidor que se vea reflejado en el lado del cliente mediante el uso de las websockets.

Saludos

[safernandez666]

Alexis88, gracias por la informacion.

No tengo experiencia en Web. Pero veo que manejas, la etiqueta, como un Objeto. Objeto.METODO.

No tendras, algun link o ejemplo para poder guiarme a desemarañar el tema?

Mil gracias por los consejos y ayuda!

[Alexis88]

Todos los elementos del DOM (Modelo de Objetos del Documento, o dicho de otra forma, los elementos del documento) posee atributos, tales como un identificador único (id), una clase (class), un nombre (name), entre otros. Puedes verlos aquí.

Asimismo, existen métodos para poder tomar a dichos elementos. Con jQuery, puedes hacer eso escribiendo menos código (aunque implique la carga de toda la librería).

Una vez que tomas al elemento en cuestión, puedes acceder a sus atributos para tomar o establecer un valor en él. Hay atributos que son de solo lectura como también los hay de lectura y escritura.

Saludos

[safernandez666]

Alexis88, muchas gracias por la ayuda que me estas brindando.

Te comento, que genere el JSON, lo llame json.php.



Al consultarlo...



Ahora tengo que pasear el JSON para poder hacer el if y así saber si lo pongo checked=true o false

Estoy leyendo sobre eso...La verdad, que me esta costando. Esto muy lejos?

La idea es que en base al campo estados de la base de datos, pueda cambiar el valor del botón. Creo que no estoy lejos...Tener alguna dato para orientarme?

Muchas gracias!

[Alexis88]

No veo ninguna imagen. Mejor coloca el código utilizando los highlights respectivos.

[safernandez666]

Iniciado por Alexis88

No veo ninguna imagen. Mejor coloca el código utilizando los highlights respectivos.

Gracias Alexis, por la predisposicion. Por suerte, llegue a buen puerto! Voy a poner el codigo, por si algun compañero esta en la misma problematica!

1. JSON hecho en PHP -> json.php (Hare referencia en el jQuery)

Código PHP:

<?php 
   
  $server = XXX;
  $user = XXX;
  $pass = XXX;
  $bd = XXXX;
   
  //Creamos la conexión
  $conexion = mysqli_connect($server, $user, $pass,$bd) 
  or die("Ha sucedido un error inexperado en la conexion de la base de datos");
   
  //generamos la consulta
  $sql = "SELECT * FROM estados";
  mysqli_set_charset($conexion, "utf8"); //formato de datos utf8
   
  if(!$result = mysqli_query($conexion, $sql)) die();
   
  $clientes = array(); //creamos un array
   
  while($row = mysqli_fetch_array($result)) 
  { 
      $id=$row['id'];
      $espacio=$row['espacio'];
      $estado=$row['estado'];
 
      $estados[] = array('id'=> $id, 'espacio'=> $espacio, 'estado'=> ($estado == 1) );
   
  }
      
  //desconectamos la base de datos
  $close = mysqli_close($conexion) 
  or die("Ha sucedido un error inexperado en la desconexion de la base de datos");
    
 
  // Enviamos los headers correctos header("content-type","aplication/json")  
  //Creamos el JSON
  $json_string = json_encode($estados);
  echo $json_string;
 

La salida, sera recibida por el jQuery. El mismo pharseara el JSON para poder editar los TAG de los botones!

Código Javascript:

<script>
            jQuery(function($) {
            //Disparar funcion al hacer clic en el boton Ajax
            
            function actualizaBtn () {
            //console.log("actualizando...")
            //llamada ajax
              $.ajax({
                    timeout: 10000, //DeboChequearElParametro
                    url: "json.php", //url de donde obtener los datos
                    dataType: 'json', //tipo de datos retornados
                    type: 'post' //enviar variables como post
                }).then(function(data){
 
                    //console.log("recibi", data);
                    for(var i=0;i<data.length;i++)
                    {
 
                        var espacio = data[i].espacio;
                        var estado = data[i].estado;
                        //console.log("#btn-" + espacio, estado);//DEBUGGING
                        $("#btn-" + espacio)[0].checked = estado;
                    }
                }).always(function(){
                    setTimeout(actualizaBtn,3000);
                });
            }
            actualizaBtn();
            });
        </script>
 

Espero haber ayudado, como me han ayudado a mi! Mil gracias Alexis, por la preocupacion de mi tema!.

Saludos desde Argentina!