1

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.

introducir la descripción de la imagen aquí

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.

4
  • Tiene que haber un evento que lance la acción para verificar/actualizar los datos (el click de un botón, un temporizador, que pases el puntero por algún área, etc...). ¿Cuál es ese evento? Lo que muestras ahora sólo ocurriría cuando la página se carga: $(document).ready(function(){ pero nada más.
    – A. Cedano
    el 4 feb. 2021 a las 17:54
  • No tengo ningún evento, en realidad ese div solo muestra los datos, en otro div es donde realizo la el registro y actualización. el 4 feb. 2021 a las 17:57
  • Pues es en ese div donde debes escuchar algún evento y mandar a buscar/actualizar los datos en el servidor. Como dije antes, en tu código actual no se ve ese contexto, simplemente ahí se cargan datos dentro de $(document).ready(function(){ que es la primera carga de la página. Pulsa en editar y pon el código que lanza el evento.
    – A. Cedano
    el 4 feb. 2021 a las 18:00
  • Entiendo, realizaré un update a mi código y edito mi pregunta. el 4 feb. 2021 a las 18:02

1 respuesta 1

1

Puedes meter la "carga" de datos en una funcion ( por ejemplo obtenerDatos() ) y llamar a esta funcion cuando el documento esta listo y luego cada X tiempo mediante un setInterval.

<script type="text/javascript">

//Primera obtención de datos, cuando el documento está listo
    $(document).ready(function(){
        obtenerDatos();
    });


//Intervalo que llama a la funcion obtenerDatos cada 30segundos.
const interval = setInterval(function() {
   obtenerDatos();
 }, 30000);


//Funcion que se encarga de la obtención de los datos
function obtenerDatos(){
        $.ajax({
            url:'brands.php',
            success: function(data){
                $(".load_data").html(data).fadeIn('slow');
            }
        })
}
</script>

Todo esto es en base a que el cambio en la base de datos la haces a mano o desde otra página. Si la el cambio en base de datos lo haces desde la misma página, puedes llamar a la función cada vez que hagas el cambio.

1
  • hice lo que indicaste y funcionó, solo que actualicé la pregunta y agrupe el edit ( status de la marca), el registro de una nueva marca y mostrar los datos, ahora todo se ve en uno solo y es aquí donde encuentro el problema de hacer que funcionen los checkbox y actualice, igual estoy investigando para hacer que funcione. el 4 feb. 2021 a las 20:54

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.