2

El planteamiento es: tengo los distintos pedidos, a los cuales se les necesita aprobar o rechazar. En cualquiera de las 2 opciones se carga un modal para aprobar y rechazar respectivamente. Ahora, cuando confirmo que quiero realizar la acción la pantalla se bloquea por completo hasta que refresque la página (cabe destacar que sí funciona la aprobación o rechazo)

Este es el código del modal

<div id="approveProductModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="approve_product" id="approve_product">
                    <div class="modal-header">                      
                        <h4 class="modal-title">Aprobar Orden de Compra</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">                    
                        <p>¿Seguro que quieres aprobar este registro?</p>
                        <p class="text-warning"><small>Esta acción no se puede deshacer.</small></p>
                        <input type="hidden" name="approve_id" id="approve_id">
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancelar">
                        <input type="submit" class="btn btn-success" value="Aprobar">
                    </div>
                </form>
            </div>
        </div>
    </div>

CODIGO DEL BOTON DE APROBAR

    if($total < $presupuesto ){
        // DELETE FROM  database
        $sql = "UPDATE tblCompras SET estado = '1' WHERE  id='".$id."'";
    $query = mysqli_query($con,$sql);
    // if product has been added successfully
    if ($query) {
        $messages[] = "La orden de compra ha sido aprobada con éxito.";
    } else {
        $errors[] = "Lo sentimos, la aprobación falló. Por favor, regrese y vuelva a intentarlo.";
    }
}else{
    $errors[] = "Sobrepasa el presupuesto permitido para su departamento.";
}
    } else 
    {
        $errors[] = "desconocido.";
    }
if (isset($errors)){

            ?>
            <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>Error!</strong> 
                    <?php
                        foreach ($errors as $error) {
                                echo $error;
                            }
                        ?>
            </div>
            <?php
            }
            if (isset($messages)){

                ?>
                <div class="alert alert-success" role="alert">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <strong>¡Bien hecho!</strong>
                        <?php
                            foreach ($messages as $message) {
                                    echo $message;
                                }
                            ?>
                </div>
                <?php
            }

ESTE ES EL MODAL Este es el modal

La pantalla bloqueada después de confirmar

introducir la descripción de la imagen aquí

Alguien sabe cómo podría solucionar esto?

Archivo main.js:

jQuery(function ($) {

    // Dropdown menu
    $(".sidebar-dropdown > a").click(function () {
        $(".sidebar-submenu").slideUp(200);
        if ($(this).parent().hasClass("active")) {
            $(".sidebar-dropdown").removeClass("active");
            $(this).parent().removeClass("active");
        } else {
            $(".sidebar-dropdown").removeClass("active");
            $(this).next(".sidebar-submenu").slideDown(200);
            $(this).parent().addClass("active");
        }

    });

    //toggle sidebar
    $("#toggle-sidebar").click(function () {
        $(".page-wrapper").toggleClass("toggled");
    });
    //Pin sidebar
    $("#pin-sidebar").click(function () {
        if ($(".page-wrapper").hasClass("pinned")) {
            // unpin sidebar when hovered
            $(".page-wrapper").removeClass("pinned");
            $("#sidebar").unbind( "hover");
        } else {
            $(".page-wrapper").addClass("pinned");
            $("#sidebar").hover(
                function () {
                    console.log("mouseenter");
                    $(".page-wrapper").addClass("sidebar-hovered");
                },
                function () {
                    console.log("mouseout");
                    $(".page-wrapper").removeClass("sidebar-hovered");
                }
            )

        }
    });


    //toggle sidebar overlay
    $("#overlay").click(function () {
        $(".page-wrapper").toggleClass("toggled");
    });

    //switch between themes 
    var themes = "default-theme legacy-theme chiller-theme ice-theme cool-theme light-theme";
    $('[data-theme]').click(function () {
        $('[data-theme]').removeClass("selected");
        $(this).addClass("selected");
        $('.page-wrapper').removeClass(themes);
        $('.page-wrapper').addClass($(this).attr('data-theme'));
    });

    // switch between background images
    var bgs = "bg1 bg2 bg3 bg4";
    $('[data-bg]').click(function () {
        $('[data-bg]').removeClass("selected");
        $(this).addClass("selected");
        $('.page-wrapper').removeClass(bgs);
        $('.page-wrapper').addClass($(this).attr('data-bg'));
    });

    // toggle background image
    $("#toggle-bg").change(function (e) {
        e.preventDefault();
        $('.page-wrapper').toggleClass("sidebar-bg");
    });

    // toggle border radius
    $("#toggle-border-radius").change(function (e) {
        e.preventDefault();
        $('.page-wrapper').toggleClass("boder-radius-on");
    });

    //custom scroll bar is only used on desktop
    if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        $(".sidebar-content").mCustomScrollbar({
            axis: "y",
            autoHideScrollbar: true,
            scrollInertia: 300
        });
        $(".sidebar-content").addClass("desktop");

    }
});
8
  • 1
    En la consola dispara algún error? Podrás compartir la acción que hace del lado de javascript? Probablemente tengas algún error ahí.
    – Kleith
    el 30 may. 2019 a las 15:21
  • 1
    Uncaught TypeError: $(...).mCustomScrollbar is not a function at HTMLDocument.<anonymous> (main.js:81) at j (jquery.js:3148) at Object.fireWith [as resolveWith] (jquery.js:3260) at Function.ready (jquery.js:3472) at HTMLDocument.J (jquery.js:3503) el 30 may. 2019 a las 15:25
  • 1
    Parece que te está faltando una librería de javascript, talves una que se llame: mCustomScrollbar.
    – Kleith
    el 30 may. 2019 a las 15:27
  • 1
    Al contrario, la función si está y es la que causaba el problema, sin embargo no me arregla el problema inicial del bloqueo de pantalla. el 30 may. 2019 a las 15:48
  • 1
    Y si intentas removiendo la modal como tal, seleccionando el id que contiene la modal, y a este le aplicas .remove() una vez oprimes cualquiera de los botones que contienen la acciones Guardar-Cancelar, claro, suponiendo que estés usando Js o JQuery, de esta forma: $('#addProductModal').remove(); el 30 may. 2019 a las 16:03

1 respuesta 1

4

El problema es que estas "cerrando" el alert mas no el modal en el atributo data-dismiss en el código del botón de aprobar, así:

<button type="button" class="close" data-dismiss="alert">&times;</button>

Debe quedar de esta manera:

<button type="button" class="close" data-dismiss="modal">&times;</button>

Aquí un ejemplo:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <h1>Modal</h1>
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

1
  • 1
    El punto que debí aclarar antes es que cuando cierro el modal con la opcion "Cancelar" no ocurre el error del bloqueo el 30 may. 2019 a las 17:11

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.