1

Tengo mi plantilla html que me devuelve un menu collapsable, y una opcion deberia mostrar tanto con F2 como presionando un modalform, pero no lo consigo:

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="exit.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <!-- jQuery CDN - Slim version (=without AJAX) -->
     <script src="includes/jquery-3.3.1.js"></script>
    <!-- Popper.JS -->
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.min.js"></script>
<script src="/gestionn/views/jquery.maskMoney.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src=""></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>

 <nav class = "navbar" role = "navigation">
         <div class = "navbar-header" >
         
            <a class = "navbar-brand" href = "#">GESTION WEB</a>
          <button type="button" id="sidebarCollapse" class="navbar-btn">M</button>
         </div>
         <div>
          <ul class="nav navbar-top-links navbar-right">
                
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i> <?php echo " " .$_SESSION ['username']; ?> 
                    </a>
                    <ul class="dropdown-menu dropdown-user" >
                        
                        
                        <li><a href="logout.php"><i class="fa fa-sign-out fa-fw"></i> Cerrar Sesion</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
             
                <!-- /.dropdown -->
            </ul>
         </div>

      </nav>
<div class="wrapper">
    <!-- Sidebar -->
    <nav id="sidebar">

        <div id="dismiss">
            <i class="fas fa-arrow-left"></i>
        </div>

        <div class="sidebar-header">
            <h3>MENU PRINCIPAL</h3>
        </div>

        <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" data-target="#miModal" href="" >
             <i  class="glyphicon glyphicon-search"></i><span  id="art"> ARTICULO - F2</span>
        </a>
            </ul>
                <ul>
                <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" data-target="#miModal" href="" >
            <i class="fas fa-wrench"></i><span  id="serv"> SERVICIO - F4</span>
        </a>
            </ul>
                <ul>  
                
            <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" data-target="#modalCC" href="" >
             <i  class="glyphicon glyphicon-list"></i><span  id="CC"> CUENTAS   - F5</span>
        </a>
            </ul></ul></ul>
                <ul>  
            <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" data-target="#miModal" href="" >
             <i  class="glyphicon glyphicon-usd"></i><span  id="VENTA"> VENTA   -   F6</span>
        </a>
            </ul> </ul>       
    <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">   <i class="glyphicon glyphicon-plus"></i>
      <span>ABM</span></a>
    <ul class="dropdown-menu">
        <li><a class="opcion" href="index.php?controller=cliente&action=index">
        <i class="glyphicon glyphicon-user"></i><span>Cliente</span>
        </a></li>
        <li><a href="index.php?controller=articulo&action=index">
        <i class="glyphicon glyphicon-list-alt"></i><span>Articulo</span>
        </a>
               
                </li>
        <li ><a class="opcion" href="index.php?controller=proveedor&action=index"> <i class="glyphicon glyphicon-user"></i><span>Proveedores</span></a></a></li>
       <!-- <li ><a href="index.php?controller=envase&action=todos"><i class="fas fa-prescription-bottle"></i>Envases</a></li>
        <li ><a href="index.php?controller=medida&action=index"><i class="fas fa-ruler"></i>Medidas</a></li>
        <li ><a href="index.php?controller=canilla&action=index"><i class="fas fa-oil-can"></i>Canillas</a></li> --!>
       <li ><a class="opcion" href="index.php?controller=user&action=index"> <i class="glyphicon glyphicon-user"></i><span>Usuarios</span></a></li>
      </ul>
    </li>


    </li>
    <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle"><i class="fas fa-cash-register"></i> Estado de cajas</a>
    <ul class="dropdown-menu">
        <li><a class="opcion" href=""><i class="fas fa-money-check"></i>Chequera</a></li>
        <li><a class="opcion" href="index.php?controller=caja&action=gasto"><i class="fas fa-sign-out-alt"></i>Nuevo Gasto</a></li>
        <li><a class="opcion" href="index.php?controller=caja&action=abrir"><i class="fas fa-lock-open"></i>Abrir caja</a></li>
        <li><a class="opcion" href="index.php?controller=caja&action=index"><i class="fas fa-lock"></i>Cerrar caja</a></li>
        <li><a class="opcion" href="index.php?controller=cliente&action=cuenta"><i class="fas fa-file-invoice-dollar"></i>Cuenta Corriente</a></li>
        <li><a class="opcion" href="index.php?controller=caja&action=indexgrande"><i class="fas fa-file-invoice"></i>Caja Grande</a></li>
        <li><a class="opcion" href=""><i class="far fa-credit-card"></i>Posnet</a></li>
      </ul>
    </li>

<li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle"><i class="fas fa-store"></i>Compra de stock</a>
    <ul class="dropdown-menu">
        <li><a class="opcion" href="index.php?controller=stock&action=index">Productos</a></li>
        <li><a class="opcion" href="index.php?controller=stock&action=indexb">Barril</a></li>
        <li><a class="opcion" href="index.php?controller=stock&action=canilla">Cambio de canilla</a></li>
      </ul>
    
    </li>
  </ul>



    </nav>
                <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog"style="width: 75%;">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">BUSQUEDA DE ARTICULO</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
    <!-- Page Content -->
    <div id="content">

   <?php  if (isset($_GET['controller'])&&isset($_GET['action'])) {

        $controller=$_GET['controller'];

        $action=$_GET['action'];
        if (isset($_GET['id'])){
            
            $id=$_GET['id'];
            call($controller,$action,$id);
        }else{
            
        call($controller,$action,0); }

    }?>
     
    </div>
    <!-- Dark Overlay element -->
    <div class="overlay"></div>
</div>



   
</body>

</html>

Entonces en mi archivo js exit.js que inclui tengo:

   $(document).on('keydown', 'body', function(event) {
  if(event.keyCode==115){ //F4

    $('.modal-body').load('contentCC.html',function(){

    $('#myModal').modal({show:true});

   }); }
    if(event.keyCode==113){ //F2

    $('.modal-body').load('content.html',function(){

    $('#myModal').modal({show:true});

});

Pero no me lo muestra, en la consola del navegador obtengo:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

sin embargo no realizo ninguna peticion asincrona. La linea afectada es:

    $('.modal-body').load('content.html',function(){

Alguna ayuda?

1 respuesta 1

1

el mensaje indica que estas usando una función XMLHttpRequest obsoleta ("Deprecated").

Estas agregando tres versiones de jquery (usa solo la mas actual):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="includes/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

y 2 versiones de bootstrap (segun tu .css deberias usar solo el .js 3.4 de bootstrap)

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

Eso genera graves conflictos.

Te recomiendo agregar en la parte superior los archivos .css, y al pie del html los .js (plugins), y finalmente tu .js personalizado.

2
  • Muchas gracias amigo!! se soluciono pero no me muestra los glypicons que tenia en el menu
    – Caruso
    Commented el 28 jun. 2019 a las 20:40
  • 1
    Glyphicon trabaja con bootstrap 3 por defecto, no retires tu css js de bootstrap 3.4.0, retira el js de bootstrap 4.1.0.
    – Kamousagi
    Commented el 28 jun. 2019 a las 20:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.