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:
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