3

Siguiendo esta respuesta, tengo la siguiente funcion JS que cambia el color de un elemento hijo al hacer onclick sobre un elemento padre.

let estadoColor;

function switchColor(el) {
  let circulo = el.querySelector(".circulo");
  if (estadoColor) {
    circulo.style.backgroundColor = estadoColor;
    estadoColor = null;
  } else {
    estadoColor = circulo.style.backgroundColor;
    circulo.style.backgroundColor = '#e35d6a';
  }
}
.drop__card {
  background-color: #fff;
}

.circulo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #cecece;
  display: flex;
  justify-content: center;
  padding: 8px;
}

.circulo>h2 {
  font-family: sans-serif;
  color: black;
  font-size: 12px;
  font-weight: bold;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container my-5">

  <div class="m-2 ui-sortable-handle">
    <div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2" onclick="switchColor(this);">
      <div class="drop__data">
        <div>
          <p class="fw-bold m-0">VIERNES</p>
        </div>
      </div>
      <div class="circulo">
        <h2>5</h2>
      </div>
    </div>
  </div>

  <div class="m-2 ui-sortable-handle">
    <div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2" onclick="switchColor(this);">
      <div class="drop__data">
        <div>
          <p class="fw-bold m-0">SABADO</p>
        </div>
      </div>
      <div class="circulo">
        <h2>6</h2>
      </div>
    </div>
  </div>

  <div class="m-2 ui-sortable-handle">
    <div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2" onclick="switchColor(this);">
      <div class="drop__data">
        <div>
          <p class="fw-bold m-0">DOMINGO</p>
        </div>
      </div>
      <div class="circulo">
        <h2>7</h2>
      </div>
    </div>
  </div>

</div>

Busco ahora que ese color se conserve al refrescar la página, es decir, guardar su valor en una base de datos MySQL.

Teniendo la siguiente tabla:

tabla_ejemplo

Deseo pasar los datos vía AJAX de la siguiente forma, teniendo en cuenta que cada card, tiene un identificador único.

let estadoColor;

function switchColor(el) {
    let circulo = el.querySelector(".circulo");
    if (estadoColor) {
        circulo.style.backgroundColor = estadoColor;
        estadoColor = null;
    } else {
        estadoColor = circulo.style.backgroundColor;
        circulo.style.backgroundColor = '#e35d6a';
    }


    $.ajax({
        url: 'ajax.php',
        method: 'POST',
        dataType: 'text',
        data: {
            id: $id,
            color: $color
        },
        success: function (response) {
            console.log(response);
        }
    });

}

Luego el ajax.php sería algo así:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demo";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
$id = $_POST['id'];
$color = $_POST['color']; // Aqui no entiendo cómo enviar el color. 

$sql = "UPDATE table SET id='$id', color='$color' WHERE id = '$id'";

if ($conn->query($sql) === TRUE) {
    echo "New record updated successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

En resumen:

Quiero que cuando se haga click al card, la función switchColor aparte de cambiar el color (que lo hace perfecto), actualize mi tabla y cambie el valor. Inicialmente el valor de COLOR, siempre sería VERDE. Solo cambiarlo si se ejecuta la función onclick

2
  • Un par de preguntas: El color representa un estado??? Al volver a presionar debe cambiar de color?
    – Yussef
    el 13 sep. 2022 a las 21:27
  • Sí, si hago clic: se pone rojo y el estado debería cambiar en la DB. No es necesario que vuelva a verde tras un segundo clic.
    – Alvamon6
    el 13 sep. 2022 a las 21:35

2 respuestas 2

2

Yo te tengo un ejemplo mas dinámico, donde tu puedes agregar mas elementos en el caso de faltarte mas días y funcionara sin problema. Con el ejemplo que te dejo ya no llamamos ninguna función desde el botón, ahora se escucha el evento desde el elemento que lo detona, esto es una buena practica, por eso omito el onclick, comente todo el JS para que lo entiendas mejor.

//ESPERAMOS A QUE LA PAGINA SE CARGUE POR COMPLETO
window.addEventListener('load', function() {
  //OBTENEMOS EL CONTENEDOR PADRE DONDE SE ALOJAN LOS DIVS DE VIERNES,SABADO, DOMINGO
  var container = document.querySelector(".container");

  //PREPARAMOS EL EVENTO QUE ESCUCHE EL CLICK DE LOS ELEMENTOS HIJOS
  container.addEventListener('click', (event) => {
    //SI HAY EVENTO EJECUTAMOS EL CAMBIO DE COLOR Y OBTENEMOS EL ID Y EL COLOR
    if (event) {
      //ACCEDEMOS AL HIJO CIRCULO DE DONDE EL TARGET ESCUCHO EL EVENTO Y GUARDAMOS ESOS DATOS EN LA VARIABLE CIRCULO, LO OCUPAREMOS DESPUES
      var circulo = event.target.children[1];
      //CAMBIAMOS EL COLOR DEL CIRCULO QUE EJECUTO EL EVENTO
      circulo.style.backgroundColor = '#e35d6a';
      //console.log(circulo.id);

      //ESTE ALERT YA TRAE LA INFORMACION QUE NECESITAMOS PARA EL AJAX, SOLO ES PARA QUE LO OBSERVES
      alert('id del circulo: ' + circulo.id + '\nColor asignado: ' + circulo.style.backgroundColor);

      //EJECUTAMOS EL AJAX CON ESOS DATOS, TOMAMOS EL COLOR COMO TAL EN RGB DE CSS, SI QUIERES CAMBIARLO A ROJO TAL CUAL LO PUEDES HACER
      $.ajax({
        url: 'ajax.php',
        method: 'POST',
        dataType: 'text',
        data: {
          id: circulo.id,
          color: circulo.style.backgroundColor
          /*//O TAMBIEN ASI solo descomenta
          color: 'rojo'*/
        },
        success: function(response) {
          console.log(response);
        }
      });
      //SI NO HAY EVENTO PERMANECE NULL EL COLOR
    } else {
      event.target.style.backgroundColor = 'null';
      //console.log(circulo); 
    }
  });

});
.drop__card {
  background-color: #fff;
}

.circulo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #cecece;
  display: flex;
  justify-content: center;
  padding: 8px;
}

.circulo>h2 {
  font-family: sans-serif;
  color: black;
  font-size: 12px;
  font-weight: bold;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container my-5">

  <div class="m-2 ui-sortable-handle">
    <div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2">
      <div class="drop__data">
        <div>
          <p class="fw-bold m-0">VIERNES</p>
        </div>
      </div>
      <div id="5" class="circulo">
        <!--AGREGUE ID A CIRCULO PARA IDENTIFICARLO AL DETONAR EVENTO-->
        <h2>5</h2>
      </div>
    </div>
  </div>

  <div class="m-2 ui-sortable-handle">
    <div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2">
      <div class="drop__data">
        <div>
          <p class="fw-bold m-0">SABADO</p>
        </div>
      </div>
      <div id="6" class="circulo">
        <!--AGREGUE ID A CIRCULO PARA IDENTIFICARLO AL DETONAR EVENTO-->
        <h2>6</h2>
      </div>
    </div>
  </div>

  <div class="m-2 ui-sortable-handle">
    <div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2">
      <div class="drop__data">
        <div>
          <p class="fw-bold m-0">DOMINGO</p>
        </div>
      </div>
      <!--AGREGUE ID A CIRCULO PARA IDENTIFICARLO AL DETONAR EVENTO-->
      <div id="7" class="circulo">
        <h2>7</h2>
      </div>
    </div>
  </div>

</div>

Observa que hace lo mismo que el que tenias pero ahora de forma mas dinámica, al ejecutar el evento hace la petición Ajax que enviara los datos que quieres enviar a tu BD (id, color). Como lo dejo envía tal cual el código css del color rojito que tienes, si quieres como tal especificar rojo lo puedes hacer, te deje un ejemplo también comentado de esa forma. Dime si te sirvió.

2
  • Aunque ya resolviste mi duda, lo cual agradezco demasiado, tengo una inquietud. En esta línea: var container = document.querySelector(".container"); el querySelector hace referencia al primer elemento con clase .container que encuentre, pero resulta que ahora tengo varios con esa misma clase, y necesito que tambien funcione el cambio de color en ellos. Probé cambiandolo por querySelectorAll, pero creo que eso me trae un array. Podrías darme una mano? Gracias y disculpa la molestia
    – Alvamon6
    el 18 sep. 2022 a las 2:33
  • Puedes generar otra pregunta agregando tu código y así poder ayudarte mejor. En container lo que hago es obtener el elemento padre por así decirlo, mediante ese contenedor detecto el evento de sus elementos hijos, que en este caso serian los divs de los días, si quieres agregar mas días no es necesario que agregues otro container, hazlo dentro de el que ya existe el 19 sep. 2022 a las 14:55
1

No tengo como probar tu código, pero yo lo haría de la siguiente manera.

El css: Crearía 2 clases: rojo y verde (luego tú las cambias por unos tonos más acorde)

.circulo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  padding: 8px;
}

.circulo.rojo{
     background-color: red;
}
.circulo.verde{
     background-color: green;
}

Luego el html, donde cada CARD sería así:

    <div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2" onclick="switchColor(this,1);">
      <div class="drop__data">
        <div>
          <p class="fw-bold m-0">VIERNES</p>
        </div>
      </div>
      <div class="circulo verde">
        <h2>5</h2>
      </div>
    </div>

Fijate que en el evento onclick=switchColor(this,1), el último parámetro (en este caso 1) debe ser el ID del card. Además al círculo le agregamos la clase "verde" que es la por default

Luego el javascript

function switchColor(el,id) {
  let circulo = el.querySelector(".circulo");
  if (circulo.classList.contains("verde")) {
      $.post('ajax.php', {
            id: id,
            color: "verde"
          }, 
          function(data) {
              if (data) {
                  circulo.classList.replace("verde", "rojo");
              }
              else {
                   alert("Error");
              }
         
          }
      ).fail(function() {
          alert("Error");
      });
   
    } 
}

Siempre enviamos verde, porque es la única alternativa de cambio (ya que no puede volver a rojo). Además realizamos el cambio una vez el servidor haya guardado el valor

Luego el PHP

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demo";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
$id = $_POST['id'];
$color = $_POST['color'];  

$sql = "UPDATE table SET color='".$color."' WHERE id = ".$id; //si id es numérico va sin comillas

if ($conn->query($sql) === true) {
    echo "true";
} else {
    echo "false";
}

$conn->close();
?>

Ojo con el Update, no debes actualizar el ID, solo actualizas el campo que cambia.

Espero te sirva de algo. Saludos

1
  • @Alvamon6 Mira esto phpsandbox.io/e/x/… Fijate en el archivo ajax.php donde si le llegan las variables (lo único que no hace es guardar en la BD, por razones obvias)
    – Yussef
    el 14 sep. 2022 a las 4:08

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.