0

Quiero hacer una busqueda de precio de articulo en un modal emergente. soy novato como veran.

En template.php tengo.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="exit.js"></script>
</head>
<body>
<div class="wrapper">

        <nav id="sidebar">
 
            <!-- Sidebar Header -->
            <div class="sidebar-header">
                <h3>GESTION WEB</div>
            

            <!-- Sidebar Links -->
            <ul class="list-unstyled components">
            <ul>
                <li><a href="">
             <i class="glyphicon glyphicon-search"></i><span id="art">ARTICULO - F2</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>
                   <ul class="dropdown-menu sub-menu">
                        <li><a class="opcion" href="index.php?controller=marca&action=index">Marca</a></li>
                        <li><a class="opcion" href="index.php?controller=categoria&action=index">Categoria</a></li>
                        <li><a class="opcion" href="index.php?controller=subcategoria&action=index">SubCategoria</a></li>
                    </ul>
                </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">Envases</a></li>
        <li ><a href="index.php?controller=medida&action=index">Medidas</a></li>
        <li ><a href="index.php?controller=canilla&action=index">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 class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle"><i class="glyphicon glyphicon-usd"></i><span>Nuevo Comp.</span></a>
    <ul class="dropdown-menu">
        <li ><a class="opcion" href="index.php?controller=ticket&action=index">Ticket</a></li>
   <li ><a class="opcion" href="index.php?controller=facturaa&action=index">Factura</a></li>
    </ul>
    </li>
    <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">Estado de cajas</a>
    <ul class="dropdown-menu">
        <li><a class="opcion" href="">Chequera</a></li>
        <li><a class="opcion" href="index.php?controller=caja&action=gasto">Nuevo Gasto</a></li>
        <li><a class="opcion" href="index.php?controller=caja&action=index">Cerrar caja</a></li>
        <li><a class="opcion" href="index.php?controller=cliente&action=cuenta">Cuenta Corriente</a></li>
        <li><a class="opcion" href="index.php?controller=caja&action=indexgrande">Caja Grande</a></li>
        <li><a class="opcion" href="">Posnet</a></li>
      </ul>
    </li>
   <li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">Nueva Venta</a>
   <ul class="dropdown-menu">
        <li><a class="opcion" href="index.php?controller=venta&action=index">Canilla</a></li>
        <li><a class="opcion" href="index.php?controller=venta&action=cerrado">Producto</a></li>
        
      </ul>
    </li>
<li class="dropdown"><a  data-toggle="dropdown" class="dropdown-toggle">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>





      <input type="hidden" id="cajero" value="<?php if (isset($_SESSION["userid"])){
        
        echo $_SESSION['userid'];
      }?>"/> 
       <input type="hidden" id="sesion" value="<?php if (isset($_SESSION["idsesion"])){
        
        echo $_SESSION['idsesion'];
      }?>"/> 
       <input type="hidden" id="inicio" value="<?php if (isset($_SESSION["inicio"])){
        
        echo $_SESSION['inicio'];
      }?>"/> 

        </nav> <div class="row" style="margin: 80px;margin-top: 30px;"><div id="header">  <button type="button" id="sidebarCollapse" class="navbar-btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
   <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- 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>
   <input type="button" class="btn btn-primary" value="Salir" id="exit"/>
<label>Nombre..<?php if (isset($_SESSION['username'])){echo $_SESSION['username'];}?></label>
<label>Rol..<?php if (isset($_SESSION['rol'])){echo $_SESSION['rol'];}?></label>
</div>

<div class="col-sm-8">
        <div id="content">
   <?php  if (isset($_GET['controller'])&&isset($_GET['action'])) {
 require_once("views/template.php");
        $controller=$_GET['controller'];

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

    }?></div></div>
   
   
</body>

</html>

incluye exit.js:

$(document).ready(function() {
  $('#art').on('click',function(){
    $('.modal-body').load('content.html',function(){
        $('#myModal').modal('show');
    });
});


$(document).on('keydown', 'body', function(event) {
 
        if(event.keyCode==113){ //F2
        $('.modal-body').load('content.html',function(){
        $('#myModal').modal({show:true});
    });

         }
     });
   $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
        $(this).toggleClass('active');
    });
 $('.dropdown dropdown-toggle dropdown-menu').on('click', function () {
        $("#sidebarCollapse").trigger("click");
    });

    $("#exit").click(function() {
            
        $.ajax({

   
            type: "POST",
            url: "logout.php",
            data: {}, 
           

            error: function(){
                alert("error petición ajax");
            },
           success: function(data){
               alert(data);
               // window.location.href="index.php"
           }
           
        
});
    }
);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$('#art').on('click',function(){
    $('.modal-body').load('content.html',function(){
        $('#myModal').modal({show:true});
    });
});


$(document).on('keydown', 'body', function(event) {

        if(event.keyCode==113){ //F2
        $('.modal-body').load('content.html',function(){
        $('#myModal').modal({show:true});
    });

         }
     });

art es el boton del menu que con el cick no lo muestra, con F2 si pero se congela la pantalla y debo actualizar. introducir la descripción de la imagen aquí Quisiera me ayuden gracias

5
  • 1
    No seria $('#myModal').modal('show'); en vez de $('#myModal').modal({show:true}); el 23 ene. 2019 a las 13:18
  • 1
    El click del boton art podrias hacerlo asi: $(document).on('click', '#art', function(){...}); o tal cual como lo tienes pero dentro del ready. el 23 ene. 2019 a las 13:23
  • Probe con $('#myModal').modal('show'); pero sigue igual, las letras que se ven en la imagen son de prueba, estan en content.html y lo toma. Ysi, esta en el ready el codigo de art.
    – Caruso
    el 23 ene. 2019 a las 13:27
  • 1
    Creo que deberias de poner el html y javascript tal cual como lo tienes en el proyecto, de esta manera la comunidad puede darte una respuesta mas congruente. el 23 ene. 2019 a las 13:32
  • ahi edite..coloque template.php completo que ejecuta exit.js que esta completo ahi
    – Caruso
    el 23 ene. 2019 a las 13:34

1 respuesta 1

1

Seguramente el elemento con clase modal-backdrop está insertado en el lugar incorrecto, normalmente esto ocurre cuando el modal se encuentra en un lugar no adecuado o cuando hay interferencia de algún plugin, lo podrías arreglar con css, modificado el z-index del elemento <div class="modal-backdrop fade show"></div>, pero trata de pegar este código dentro de tu <script>:

$(".modal").on("shown.bs.modal", function (e) {
   $(this).insertAfter($(".modal-backdrop"));
});
3
  • Funciono perfecto con F2. Preo al hacer click en #art no muestra nada. Capaz debo referirme al menu y luego al boton?
    – Caruso
    el 23 ene. 2019 a las 19:26
  • lo solucione con este codigo en la etiqueta a: data-toggle="modal" data-target="#miModal" Gracias una vez mas
    – Caruso
    el 23 ene. 2019 a las 19:32
  • 1
    @Caruso Ah si, una disculpa por tardar, pero sí, para que un elemento ejecute un modal debes agregar el atributo data-toggle="modal" y el atributo data-target="#miModal" se usa para que sepa que modal abrir cuando se dé clic en ese elemento. el 23 ene. 2019 a las 19:35

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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