Following this answer , I have the following JS function that changes the color of a child element when clicking on a parent element.
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/[email protected]/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>
Now I am looking for that color to be preserved when refreshing the page, that is, saving its value in a MySQL database.
Having the following table:
I want to pass the data via AJAX in the following way, taking into account that each card has a unique identifier.
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);
}
});
}
Then the ajax.php would be something like this:
<?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();
?>
In summary:
I want that when the card is clicked, the function switchColor
apart from changing the color (which makes it perfect), update my table and change the value. Initially the COLOR value would always be GREEN. Only change it if the onclick function is executed
I have a more dynamic example, where you can add more elements in the case of missing more days and it will work without problem. With the example that I leave you we no longer call any function from the button, now the event is heard from the element that triggers it, this is a good practice, that's why I omit the onclick , comment all the JS so that you understand it better.
Note that it does the same as the one you had but now in a more dynamic way, when executing the event it makes the Ajax request that will send the data you want to send to your DB (id, color). As I leave it, send the css code of the red color that you have, if you want to specify red as such , you can do it, I leave you an example also commented in that way. Tell me if it worked for you.
I don't have how to test your code, but I would do it in the following way.
The css: I would create 2 classes: red and green (then you change them for more appropriate tones)
Then the html, where each CARD would be like this:
Note that in the onclick=switchColor(this,1) event, the last parameter (in this case 1) must be the ID of the card. In addition to the circle we add the class "green" which is the default
Then the javascript
We always send green, because it is the only alternative of exchange (since it cannot go back to red). We also make the change once the server has saved the value
Then the PHP
Be careful with the Update, you should not update the ID, you only update the field that changes.
I hope it helps you. Cheers