Estoy mostrando los siguientes datos 'marcas de productos', en la parte inferior realice un formulario con el cual se puede insertar una nueva marca y al lado derecho de cada marca un checkbox para saber si está habilitado o deshabilitado.
Al registrar la nueva marca todo bien, pero tengo que hacer F5 para que actualice y muestre el nuevo registro.
los datos y el formulario los muestra aquí.
<div class="col-xl-3 col-lg-4">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-3">Lista de marcas</h4>
<div class="widget" style="max-height: 407px;">
<?php
$sql=$conn->SelectProductsBrand();
while ($sqlRow=$sql->fetch(PDO::FETCH_ASSOC)) { ?>
<div class="item">
<div class="item-img"><i class="fas fa-tags"></i></div>
<p class="item-author"><?php echo $sqlRow['name_brand']; ?> </p>
<?php if ($sqlRow['status'] == 0) { ?>
<p class="item-check"><input type="checkbox" checked data-plugin="switchery" data-color="#1B9880" data-secondary-color="#98a6ad" data-size="small"/></p>
<?php } else { ?>
<p class="item-check"><input type="checkbox" data-plugin="switchery" data-color="#1B9880" data-secondary-color="#98a6ad" data-size="small"/></p>
<?php } ?>
</div>
<?php } ?>
</div> <!-- / widget -->
<form method="POST" id="form_products_brand" class="mt-3">
<div class="row">
<div class="col">
<input type="text" id="new_brand" name="new_brand" class="form-control" placeholder="agregar una nueva marca" required>
</div>
<div class="col-auto">
<button type="submit" class="btn-cian-azul btn-md btn-block btn waves-effect waves-light"><i class="far fa-plus"></i></button>
</div>
</div>
<div id="messages" class="mt-2"></div>
</form>
</div>
</div> <!-- / card -->
</div> <!-- / col -->
este es el script.
<script type="text/javascript">
$(document).ready(function(){
$('#form_products_brand').on('submit', function(e){
e.preventDefault();
$.ajax({
url: "new_brand.php",
type: $(form_products_brand).attr('method'),
data: $(form_products_brand).serialize(),
dataType: 'json',
success:function(response) {
if (response.success == true)
{
$("#messages").html('<div class="alert alert-success bg-success text-white border-0" role="alert"><i class="fal fa-check-double fa-lg mr-2"></i>'+response.messages+'</div>');
$("#form_products_brand")[0].reset();
$("#messages").fadeOut(5000, function(){
$(this).html("");
$(this).fadeIn(3000);
});
}
else
{
$("#messages").html('<div class="alert aalert-danger bg-danger text-white border-0" role="alert"><i class="fal fa-exclamation-circle fa-lg mr-2"></i>'+response.messages+'</div>');
}
}
})
});
});
</script>
aquí mi php que realiza la consulta a la base de datos.
<?php
require_once __DIR__ . '/sql.php';
$conn= new System();
if($_POST)
{
$validator = array('success' => false, 'messages' => array());
$new_brands = $_POST['new_brand'];
$status = '0';
$sqlCreateBrands = $conn->addBrands($new_brands,$status);
if($sqlCreateBrands == true)
{
$validator['success'] = true;
$validator['messages'] = "Se ha registrado una nueva marca.";
}
else
{
$validator['success'] = false;
$validator['messages'] = "Hemos tenido un problema al registrar esta nueva marca, por favor intente nuevamente en unos minutos o contactese con el Administrador. <b>¡Gracias!</b>";
}
echo json_encode($validator);
} ?>
Hasta el momento registra las nuevas marcas como se aprecia en la imagen, pero tengo dudas de como llegar hacer que actualice el div donde muestra las marcas, intente haciendolo con ajax pero al llevarlo a otro php se pierde el estilo de los checkbox. El checkbox cada que haga clic debe cambiar el estado, eso lo estaré haciendo a medida que avance. si me pueden ayudar se los agradezco.
$(document).ready(function(){
pero nada más.$(document).ready(function(){
que es la primera carga de la página. Pulsa en editar y pon el código que lanza el evento.