Hi, first of all let me thank anyone willing to help out with this. Jquery / Ajax update Span or Div by ID without refreshing page
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="60"> <!-- Esta línea hará que la página se actualice automáticamente cada 15 segundos-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Freelancer - Start Bootstrap Theme</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
<button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio">Portfolio</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">About</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column">
<!-- Masthead Avatar Image-->
<img class="masthead-avatar mb-5" src="assets/img/avataaars.svg" alt="..." />
<!-- Masthead Heading-->
<h1 class="masthead-heading text-uppercase mb-0">ESP32 - VALVERDE</h1>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Masthead Subheading-->
<p class="masthead-subheading font-weight-light mb-0">Graphic Artist - Web Designer - Illustrator</p>
</div>
</header>
<!-- Portfolio Section-->
<section class="page-section portfolio" id="portfolio">
<div class="container">
<!-- Portfolio Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Portfolio</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Grid Items-->
<div class="row justify-content-center">
<!-- Portfolio Item 1-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/cabin.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 2-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal2">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/cake.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 3-->
<div class="col-md-6 col-lg-4 mb-5">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal3">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/circus.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 4-->
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal4">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/game.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 5-->
<div class="col-md-6 col-lg-4 mb-5 mb-md-0">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal5">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/safe.png" alt="..." />
</div>
</div>
<!-- Portfolio Item 6-->
<div class="col-md-6 col-lg-4">
<div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal6">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/submarine.png" alt="..." />
</div>
</div>
</div>
</div>
</section>
<!-- About Section-->
<section class="page-section bg-primary text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- About Section Content-->
<div class="row">
<div class="col-lg-4 ms-auto"><p class="lead">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional SASS stylesheets for easy customization.</p></div>
<div class="col-lg-4 me-auto"><p class="lead">You can create your own custom avatar for the masthead, change the icon in the dividers, and add your email address to the contact form to make it fully functional!</p></div>
</div>
<!-- About Section Button-->
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="https://startbootstrap.com/theme/freelancer/">
<i class="fas fa-download me-2"></i>
Free Download!
</a>
</div>
</div>
</section>
<!-- Contact Section-->
<section class="page-section" id="contact">
<div class="container">
<!-- Contact Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Contact Me</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Contact Section Form-->
<div class="row justify-content-center">
<div class="col-lg-8 col-xl-7">
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<!-- Name input-->
<div class="form-floating mb-3">
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
<label for="name">Full name</label>
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div>
<!-- Email address input-->
<div class="form-floating mb-3">
<input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
<label for="email">Email address</label>
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
</div>
<!-- Phone number input-->
<div class="form-floating mb-3">
<input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
<label for="phone">Phone number</label>
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
</div>
<!-- Message input-->
<div class="form-floating mb-3">
<textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
<label for="message">Message</label>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
</div>
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
<!-- Submit Button-->
<button class="btn btn-primary btn-xl disabled" id="submitButton" type="submit">Send</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer text-center">
<div class="container">
<div class="row">
<!-- Footer Location-->
<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Location</h4>
<p class="lead mb-0">
2215 John Daniel Drive
<br />
Clark, MO 65243
</p>
</div>
<!-- Footer Social Icons-->
<div class="col-lg-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Around the Web</h4>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-facebook-f"></i></a>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-twitter"></i></a>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-linkedin-in"></i></a>
<a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-dribbble"></i></a>
</div>
<!-- Footer About Text-->
<div class="col-lg-4">
<h4 class="text-uppercase mb-4">About Freelancer</h4>
<p class="lead mb-0">
Freelance is a free to use, MIT licensed Bootstrap theme created by
<a href="http://startbootstrap.com">Start Bootstrap</a>
.
</p>
</div>
</div>
</div>
</footer>
<!-- Copyright Section-->
<div class="copyright py-4 text-center text-white">
<div class="container"><small>Copyright © Your Website 2022</small></div>
</div>
<!-- Portfolio Modals-->
<!-- Portfolio Modal 1-->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" aria-labelledby="portfolioModal1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Control ON/OFF</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/cabin.png" alt="..." />
<!-- Portfolio Modal - Text-->
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
<div STYLE="overflow: auto;">
<?php
include("database_connect.php"); //We include the database_connect.php which has the data for the connection to the database
// Check the connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
//Again, we grab the table out of the database, name is ESPtable2 in this case
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
//Now we create the table with all the values from the database
echo "<table class='table' style='font-size: 30px;'>
<thead>
<tr>
<th>Control ON/OFF</th>
</tr>
</thead>
<tbody>
<tr class='active'>
<td>Noobix ID</td>
<td>Boolean control 1</td>
<td>Boolean control 2 </td>
<td>Boolean control 3 </td>
<td>Boolean control 4</td>
<td>Boolean control 5 </td>
</tr>
";
//loop through the table and print the data into the table
while($row = mysqli_fetch_array($result)) {
echo "<tr class='success'>";
$unit_id = $row['id'];
echo "<td>" . $row['id'] . "</td>";
$column1 = "RECEIVED_BOOL1";
$column2 = "RECEIVED_BOOL2";
$column3 = "RECEIVED_BOOL3";
$column4 = "RECEIVED_BOOL4";
$column5 = "RECEIVED_BOOL5";
$current_bool_1 = $row['RECEIVED_BOOL1'];
$current_bool_2 = $row['RECEIVED_BOOL2'];
$current_bool_3 = $row['RECEIVED_BOOL3'];
$current_bool_4 = $row['RECEIVED_BOOL4'];
$current_bool_5 = $row['RECEIVED_BOOL5'];
if($current_bool_1 == 1){
$inv_current_bool_1 = 0;
$text_current_bool_1 = "ON";
$color_current_bool_1 = "#6ed829";
}
else{
$inv_current_bool_1 = 1;
$text_current_bool_1 = "OFF";
$color_current_bool_1 = "#e04141";
}
if($current_bool_2 == 1){
$inv_current_bool_2 = 0;
$text_current_bool_2 = "ON";
$color_current_bool_2 = "#6ed829";
}
else{
$inv_current_bool_2 = 1;
$text_current_bool_2 = "OFF";
$color_current_bool_2 = "#e04141";
}
if($current_bool_3 == 1){
$inv_current_bool_3 = 0;
$text_current_bool_3 = "ON";
$color_current_bool_3 = "#6ed829";
}
else{
$inv_current_bool_3 = 1;
$text_current_bool_3 = "OFF";
$color_current_bool_3 = "#e04141";
}
if($current_bool_4 == 1){
$inv_current_bool_4 = 0;
$text_current_bool_4 = "ON";
$color_current_bool_4 = "#6ed829";
}
else{
$inv_current_bool_4 = 1;
$text_current_bool_4 = "OFF";
$color_current_bool_4 = "#e04141";
}
if($current_bool_5 == 1){
$inv_current_bool_5 = 0;
$text_current_bool_5 = "ON";
$color_current_bool_5 = "#6ed829";
}
else{
$inv_current_bool_5 = 1;
$text_current_bool_5 = "OFF";
$color_current_bool_5 = "#e04141";
}
echo "<td><form action= update_values.php method= 'post'>
<input type='hidden' name='value2' value=$current_bool_1 size='15' >
<input type='hidden' name='value' value=$inv_current_bool_1 size='15' >
<input type='hidden' name='unit' value=$unit_id >
<input type='hidden' name='column' value=$column1 >
<input type= 'submit' name= 'change_but' style=' margin-left: 25%; margin-top: 10%; font-size: 30px; text-align:center; background-color: $color_current_bool_1' value=$text_current_bool_1></form></td>";
echo "<td><form action= update_values.php method= 'post'>
<input type='hidden' name='value2' value=$current_bool_2 size='15' >
<input type='hidden' name='value' value=$inv_current_bool_2 size='15' >
<input type='hidden' name='unit' value=$unit_id >
<input type='hidden' name='column' value=$column2 >
<input type= 'submit' name= 'change_but' style=' margin-left: 25%; margin-top: 10%; font-size: 30px; text-align:center; background-color: $color_current_bool_2' value=$text_current_bool_2></form></td>";
echo "<td><form action= update_values.php method= 'post'>
<input type='hidden' name='value2' value=$current_bool_3 size='15' >
<input type='hidden' name='value' value=$inv_current_bool_3 size='15' >
<input type='hidden' name='unit' value=$unit_id >
<input type='hidden' name='column' value=$column3 >
<input type= 'submit' name= 'change_but' style=' margin-left: 25%; margin-top: 10%; font-size: 30px; text-align:center; background-color: $color_current_bool_3' value=$text_current_bool_3></form></td>";
echo "<td><form action= update_values.php method= 'post'>
<input type='hidden' name='value2' value=$current_bool_4 size='15' >
<input type='hidden' name='value' value=$inv_current_bool_4 size='15' >
<input type='hidden' name='unit' value=$unit_id >
<input type='hidden' name='column' value=$column4 >
<input type= 'submit' name= 'change_but' style=' margin-left: 25%; margin-top: 10%; font-size: 30px; text-align:center; background-color: $color_current_bool_4' value=$text_current_bool_4></form></td>";
echo "<td><form action= update_values.php method= 'post'>
<input type='hidden' name='value2' value=$current_bool_5 size='15' >
<input type='hidden' name='value' value=$inv_current_bool_5 size='15' >
<input type='hidden' name='unit' value=$unit_id >
<input type='hidden' name='column' value=$column5 >
<input type= 'submit' name= 'change_but' style=' margin-left: 25%; margin-top: 10%; font-size: 30px; text-align:center; background-color: $color_current_bool_5' value=$text_current_bool_5></form></td>";
echo "</tr>
</tbody>";
}
echo "</table>
<br>
";
?>
</div>
<p></p>
<button class="btn btn-primary" data-bs-dismiss="modal">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 2-->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" aria-labelledby="portfolioModal2" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Control numérico</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/cake.png" alt="..." />
<!-- Portfolio Modal - Text-->
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
<div STYLE="overflow: auto;">
<?php
include("database_connect.php");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
echo "<table class='table' style='font-size: 30px;'>
<thead>
<tr>
<th>Numeric controls</th>
</tr>
</thead>
<tbody>
<tr class='active'>
<td>CONTROL NUMBER 1</td>
<td>CONTROL NUMBER 2</td>
<td>CONTROL NUMBER 3</td>
<td>CONTROL NUMBER 4 </td>
<td>CONTROL NUMBER 5 </td>
</tr>
";
while($row = mysqli_fetch_array($result)) {
echo "<tr class='success'>";
$column6 = "RECEIVED_NUM1";
$column7 = "RECEIVED_NUM2";
$column8 = "RECEIVED_NUM3";
$column9 = "RECEIVED_NUM4";
$column10 = "RECEIVED_NUM5";
$current_num_1 = $row['RECEIVED_NUM1'];
$current_num_2 = $row['RECEIVED_NUM2'];
$current_num_3 = $row['RECEIVED_NUM3'];
$current_num_4 = $row['RECEIVED_NUM4'];
$current_num_5 = $row['RECEIVED_NUM5'];
echo "<td><form action= update_values.php method= 'post'>
<input type='text' name='value' style='width: 120px;' value=$current_num_1 size='15' >
<input type='hidden' name='unit' style='width: 120px;' value=$unit_id >
<input type='hidden' name='column' style='width: 120px;' value=$column6 >
<input type= 'submit' name= 'change_but' style='width: 120px; text-align:center;' value='change'></form></td>";
echo "<td><form action= update_values.php method= 'post'>
<input type='text' name='value' style='width: 120px;' value=$current_num_2 size='15' >
<input type='hidden' name='unit' style='width: 120px;' value=$unit_id >
<input type='hidden' name='column' style='width: 120px;' value=$column7 >
<input type= 'submit' name= 'change_but' style='text-align:center' value='change'></form></td>";
echo "<td><form action= update_values.php method= 'post'>
<input type='text' name='value' style='width: 120px;' value=$current_num_3 size='15' >
<input type='hidden' name='unit' style='width: 120px;' value=$unit_id >
<input type='hidden' name='column' style='width: 120px;' value=$column8 >
<input type= 'submit' name= 'change_but' style='text-align:center' value='change'></form></td>";
echo "<td><form action= update_values.php method= 'post'>
<input type='text' name='value' style='width: 120px;' value=$current_num_4 size='15' >
<input type='hidden' name='unit' style='width: 120px;' value=$unit_id >
<input type='hidden' name='column' style='width: 120px;' value=$column9 >
<input type= 'submit' name= 'change_but' style='text-align:center' value='change'></form></td>";
echo "<td><form action= update_values.php method= 'post'>
<input type='text' name='value' style='width: 120px;' value=$current_num_5 size='15' >
<input type='hidden' name='unit' style='width: 120px;' value=$unit_id >
<input type='hidden' name='column' style='width: 120px;' value=$column10 >
<input type= 'submit' name= 'change_but' style='text-align:center' value='change'></form></td>";
echo "</tr>
</tbody>";
}
echo "</table>
<br>
";
?>
</div>
<p></p>
<button class="btn btn-primary" data-bs-dismiss="modal">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 3-->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" aria-labelledby="portfolioModal3" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Enviar texto</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/circus.png" alt="..." />
<!-- Portfolio Modal - Text-->
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
<?php
include("database_connect.php");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
echo "<table class='table' style='font-size: 30px;'>
<thead>
<tr>
<th>Send Text to Noobix</th>
</tr>
</thead>
<tbody>
<tr class='active'>
<td>Text</td>
</tr>
";
while($row = mysqli_fetch_array($result)) {
echo "<tr class='success'>";
$column11 = "TEXT_1";
$current_text_1 = $row['TEXT_1'];
echo "<td><form action= update_values.php method= 'post'>
<input style='width: 100%;' type='text' name='value' value=$current_text_1 size='100'>
<input type='hidden' name='unit' value=$unit_id >
<input type='hidden' name='column' value=$column11 >
<p></p>
<input type= 'submit' name= 'change_but' style='text-align:center' value='Send'></form></td>";
echo "</tr>
</tbody>";
}
echo "</table>
<br>
<br>
<hr>";
?>
<button class="btn btn-primary" data-bs-dismiss="modal">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 4-->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" aria-labelledby="portfolioModal4" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Indicador ON/OFF</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/game.png" alt="..." />
<!-- Portfolio Modal - Text-->
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
<div STYLE="overflow: auto;">
<?php
include("database_connect.php");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
echo "<table class='table' style='font-size: 30px;'>
<thead>
<tr>
<th>Boolean Indicators</th>
</tr>
</thead>
<tbody>
<tr class='active'>
<td>Noobix ID</td>
<td>Indicator 1</td>
<td>Indicator 2 </td>
<td>Indicator 3 </td>
</tr>
";
while($row = mysqli_fetch_array($result)) {
$cur_sent_bool_1 = $row['SENT_BOOL_1'];
$cur_sent_bool_2 = $row['SENT_BOOL_2'];
$cur_sent_bool_3 = $row['SENT_BOOL_3'];
if($cur_sent_bool_1 == 1){
$label_sent_bool_1 = "label-success";
$text_sent_bool_1 = "Active";
}
else{
$label_sent_bool_1 = "label-danger";
$text_sent_bool_1 = "Inactive";
}
if($cur_sent_bool_2 == 1){
$label_sent_bool_2 = "label-success";
$text_sent_bool_2 = "Active";
}
else{
$label_sent_bool_2 = "label-danger";
$text_sent_bool_2 = "Inactive";
}
if($cur_sent_bool_3 == 1){
$label_sent_bool_3 = "label-success";
$text_sent_bool_3 = "Active";
}
else{
$label_sent_bool_3 = "label-danger";
$text_sent_bool_3 = "Inactive";
}
echo "<tr class='info'>";
$unit_id = $row['id'];
echo "<td>" . $row['id'] . "</td>";
echo "<td>
<span class='label $label_sent_bool_1'>"
. $text_sent_bool_1 . "</td>
</span>";
echo "<td>
<span class='label $label_sent_bool_2'>"
. $text_sent_bool_2 . "</td>
</span>";
echo "<td>
<span class='label $label_sent_bool_3'>"
. $text_sent_bool_3 . "</td>
</span>";
echo "</tr>
</tbody>";
}
echo "</table>";
?>
</div>
<p></p>
<button class="btn btn-primary" data-bs-dismiss="modal">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 5-->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" aria-labelledby="portfolioModal5" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Indicador numérico</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/safe.png" alt="..." />
<!-- Portfolio Modal - Text-->
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
<div STYLE="overflow: auto;">
<?php
include("database_connect.php");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
echo "<table class='table' style='font-size: 30px;'>
<thead>
<tr>
<th>Integer Indicators</th>
</tr>
</thead>
<tbody>
<tr class='active'>
<td>Received number 1</td>
<td>Received number 2</td>
<td>Received number 3 </td>
<td>Received number 4 </td>
</tr>
";
while($row = mysqli_fetch_array($result)) {
echo "<tr class='info'>";
echo "<td>" . $row['SENT_NUMBER_1'] . "</td>";
echo "<td>" . $row['SENT_NUMBER_2'] . "</td>";
echo "<td>" . $row['SENT_NUMBER_3'] . "</td>";
echo "<td>" . $row['SENT_NUMBER_4'] . "</td>";
echo "</tr>
</tbody>";
}
echo "</table>
<br>
";
?>
</div>
<p></p>
<button class="btn btn-primary" data-bs-dismiss="modal">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio Modal 6-->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" aria-labelledby="portfolioModal6" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body text-center pb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Submarine</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Portfolio Modal - Image-->
<img class="img-fluid rounded mb-5" src="assets/img/portfolio/submarine.png" alt="..." />
<!-- Portfolio Modal - Text-->
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
<button class="btn btn-primary" data-bs-dismiss="modal">
<i class="fas fa-xmark fa-fw"></i>
Close Window
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>