3

Tengo un problema que no logro solucionar. Quiero crear una lista para comprar productos, esta lista debe tener los siguientes campos

  • Producto
  • Cantidad
  • Costo
  • Total

Pero la dinámica consiste en lo siguiente.

Como pueden ver en este código la lista se debe agregar de manera dinámica, se pueden agregar varios pedidos a la vez.

En la ventana modal buscar el producto y luego al darle aceptar quiero que se cree automáticamente la fila con los campos que se ve en el código para que el usuario pueda llenaros.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container">
        <h2>Comprar productos</h2>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Agregar</button>

        <table class="table">
            <thead>
                <tr>
                    <th>Producto</th>
                    <th>Cantidad</th>
                    <th>Precio</th>
                    <th>Total</th>
                    <th>Acción</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" class="form-control" id="producto" disabled value="Vaso"></td>
                    <td><input type="text" class="form-control" id="cantidad" value="3"></td>
                    <td><input type="text" class="form-control" id="cantidad" value="10"></td>
                    <td><input type="text" class="form-control" id="total" value="30" disabled></td>
                    <td><button type="button" class="btn btn-default">Remover</button></td>
                </tr>
            </tbody>
        </table>


        <!-- Modal -->
        <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">&times;</button>
                        <h4 class="modal-title">Agregar producto a la lista</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="producto">Buscar Producto</label>
                            <input type="text" class="form-control" id="producto">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Agregar</button>
                    </div>
                </div>

            </div>
        </div>

    </div>

</body>

</html>

4 respuestas 4

6

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
  // Refresca Producto: Refresco la Lista de Productos dentro de la Tabla
  // Si es vacia deshabilito el boton guardar para obligar a seleccionar al menos un producto al usuario
  // Sino habilito el boton Guardar para que pueda Guardar
    function RefrescaProducto(){
        var ip = [];
        var i = 0;
        $('#guardar').attr('disabled','disabled'); //Deshabilito el Boton Guardar
        $('.iProduct').each(function(index, element) {
            i++;
            ip.push({ id_pro : $(this).val() });
        });
        // Si la lista de Productos no es vacia Habilito el Boton Guardar
        if (i > 0) {
            $('#guardar').removeAttr('disabled','disabled');
        }
        var ipt=JSON.stringify(ip); //Convierto la Lista de Productos a un JSON para procesarlo en tu controlador
        $('#ListaPro').val(encodeURIComponent(ipt));
    }
       function agregarProducto() {

            var sel = $('#pro_id').find(':selected').val(); //Capturo el Value del Producto
            var text = $('#pro_id').find(':selected').text();//Capturo el Nombre del Producto- Texto dentro del Select
           
            
            var sptext = text.split();
            
            var newtr = '<tr class="item"  data-id="'+sel+'">';
            newtr = newtr + '<td class="iProduct" >' + sel + '</td>';
            newtr = newtr + '<td> <input  class="form-control" id="1" name="precio" value="23" required /></td>';
            newtr = newtr + '<td><input  class="form-control" id="2" name="cantidad" value="2" required /></td>';
            newtr = newtr + '<td><input  class="form-control"  id="3" name="total" value="46" required /></td>';
            newtr = newtr + '<td><button type="button" class="btn btn-danger btn-xs remove-item"><i class="fa fa-times"></i></button></td></tr>';
            
            $('#ProSelected').append(newtr); //Agrego el Producto al tbody de la Tabla con el id=ProSelected
            
            RefrescaProducto();//Refresco Productos
                
            $('.remove-item').off().click(function(e) {
                $(this).parent('td').parent('tr').remove(); //En accion elimino el Producto de la Tabla
                if ($('#ProSelected tr.item').length == 0)
                    $('#ProSelected .no-item').slideDown(300); 
                RefrescaProducto();
            });        
           $('.iProduct').off().change(function(e) {
                RefrescaProducto();
           });
    }
</script>
</head>

<body>

    <div class="container">
    <from>
        <h2>Comprar productos</h2>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Agregar</button>
          <input type="hidden" id="ListaPro" name="ListaPro" value="" required />
        <table id="TablaPro" class="table">
            <thead>
                <tr>
                    <th>Producto</th>
                    <th>Cantidad</th>
                    <th>Precio</th>
                    <th>Total</th>
                    <th>Acción</th>
                </tr>
            </thead>
            <tbody id="ProSelected"><!--Ingreso un id al tbody-->
                <tr>
             
                </tr>
            </tbody>
        </table>
<!--Agregue un boton en caso de desear enviar los productos para ser procesados-->
                <div class="form-group">
                    <button type="submit" id="guardar" name= "guardar" class="btn btn-lg btn-default pull-right">Guardar</button>
                </div>
    </from>

        <!-- Modal -->
        <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">&times;</button>
                        <h4 class="modal-title">Agregar producto a la lista</h4>
                    </div>
                    <div class="modal-body">
                         <div class="form-group">
                                    <label>Producto</label>
                                <select class="selectpicker form-control" id="pro_id" name="pro_id" data-width='100%' >
                                        <option value="Lentes">Lentes</option>
                                        <option value="Casco">Casco</option>
                                        <option value="Gorra">Gorra</option>
                                </select>
                </div>
                    </div>
                    <div class="modal-footer">
                        <!--Uso la funcion onclick para llamar a la funcion en javascript-->
                        <button type="button" onclick="agregarProducto()" class="btn btn-default" data-dismiss="modal">Agregar</button>
                    </div>
                </div>

            </div>
        </div>

    </div>

</body>

</html>

Si deseas recibir esta Lista de Productos en un controlador ve lo siguiente:

    var ipt=JSON.stringify(ip);
    $('#ListaPro').val(encodeURIComponent(ipt));//Convierto los Productos a un JSON Para mandarlo al controlador por POST

Entonces al presionar guardar , deberías poder enviar los valores por POST , a través del FORM, de manera que en tu form deberias tener algo asi:

  <form action="llamada al controlador: miControlador" role="form" method="post">

En tu controlador debes poder decodificar del JSON todos estos productos, para hacerlo debes tener un controlador que realice algo así:

 public function miControlador(){
          $data = array();
          foreach($_POST as $key => $value) {  //Recibo el los valores por POST 
            $data[$key] = $value;  
         }

         $acturl = urldecode($data['ListaPro']); //decodifico el JSON
         $productos = json_decode($acturl);

        foreach ($productos  as $pro) {
            $misProductos = array(
                'cantidad' => $pro->cantidad,
                'productoId' => $pro->id_pro,//así llamamos al id del producto en la vista en la funcion RefrescaProducto
                'precio' => $pro->precio,
                'total' =>$pro->total        
            );
     //Guardar en Base de Datos
 }

Luego tendrías tus productos en un Array, y puedes manejarlos como desees, no e usado Laravel pero de esta forma que te planteo es como normalmente lo hago. Espero te Sirva. Saludos

4
  • Muchas gracias Samuel Heredia. Commented el 26 mar. 2017 a las 13:10
  • De nada cualquier duda, coméntame y te ayudo. Commented el 26 mar. 2017 a las 14:19
  • Me funciona de maravilla, lo siento si estoy siendo muy molestosa, pero como puedo recibir todo en mi controlador?, estoy trabajando con Laravel 5.2. Commented el 26 mar. 2017 a las 16:03
  • Edite la respuesta agregando lo que me pediste, espero te ayude, no he usado Laravel pero en teoría debe ser algo similar a lo que te planteo, espero haberme explicado. Saludos Commented el 26 mar. 2017 a las 18:31
2

Al tbody le asigno un id, asi como al boton agregar

....
....    
<tbody id="productos">
</tbody>
.....
.....
<button type="button" class="btn btn-default" data-dismiss="modal" id="agregarProducto">Agregar</button>

JQuery, Al dar click en el boton agregar envio (realizo un peticion ajax) el id del producto para buscar dicho producto el cual lo recibe un archivo php y ese archivo php me devuelve una respuesta el cual anexo dentro de tbody

    $( "#agregarProducto" ).click(function() {
        var getId = $("#producto").val();
        $.ajax({
              method: "POST",
              url: "BuscarProducto.php",
              data: { id: getId }
    })
      .done(function( msg ) {
          $("#productos").html(msg);
      });
    });

BuscarProducto

<?php
    $mysqli=new mysqli('localhost', 'root', 'password', 'test');
    $mysqli->query("SET NAMES 'utf8'");
    $q=$mysqli->query("select * from test");
    while($r=$q->fetch_assoc()) 
    {
        echo '<tr><td>miinfo</td><td>miinfo</td><td>miinfo</td><td>miinfo</td></tr>';
    }
?>
1

He tomado como ejemplo el script que aquí se comparte y le he hecho modificaciones en las variables, pero, quiero que al cargar en el desde el SELECT el nombre del servicio, también cargue el costo del mismo. Ejemplo; Al seleccionar Revisión también cargue el costo de la revisión el el tbody. Podrían ayudarme en eso por favor. Este es el script que tengo:

    <script type="text/javascript">
    // Refresca Servicio: Refresco la Lista de servicios dentro de la Tabla
    // Si es vacia deshabilito el boton guardar para obligar a seleccionar al menos un servicio al usuario
    // Sino habilito el boton Guardar para que pueda Guardar
    function RefrescaServicio(){
        var ip = [];
        var i = 0;
        $('#guardar').attr('disabled','disabled'); //Deshabilito el Boton Guardar
        $('.iServicio').each(function(index, element) {
        i++;
        ip.push({ id_pro : $(this).val() });
        });
        // Si la lista de servicios no es vacia Habilito el Boton Guardar
        if (i > 0) {
        $('#guardar').removeAttr('disabled','disabled');
        }
        var ipt=JSON.stringify(ip); //Convierto la Lista de servicios a un JSON para procesarlo en tu controlador
        $('#ListaServ').val(encodeURIComponent(ipt));
    }
    function agregaServicio() {
        var sel = $('#id_serv').find(':selected').val(); //Capturo el Value del servicio
        var text = $('#id_serv').find(':selected').text();//Capturo el Nombre del servicio- Texto dentro del Select
        var sptext = text.split();

        var newtr = '<tr class="item"  data-id="'+sel+'">';
        newtr = newtr + '<td class="iServicio" >' + sel + '</td>';
        newtr = newtr + '<td> <input class="form-control" id="1" name="cantidad" required /></td>';
        newtr = newtr + '<td><input class="form-control" id="2" name="precio" required /></td>';
        newtr = newtr + '<td><input class="form-control"  id="3" name="total"  required /></td>';
        newtr = newtr + '<td><button type="button" class="btn btn-danger btn-xs remove-item"><i class="fa fa-times"></i></button></td></tr>';

        $('#ServSeleccionado').append(newtr); //Agrego el servicio al tbody de la Tabla con el id=ProSelected

        RefrescaServicio();//Refresco Servicios

        $('.remove-item').off().click(function(e) {
            $(this).parent('td').parent('tr').remove(); //En accion elimino el Producto de la Tabla
            if ($('#ServSeleccionado tr.item').length == 0)
            $('#ServSeleccionado .no-item').slideDown(300);
            RefrescaServicio();
        });
        $('.iServicio').off().change(function(e) {
            RefrescaServicio();
        });
      }
</script>

Quiero que el resultado sea este: Deseo que el resultado sea este

2
  • 2
    Esto no es una respuesta sino una pregunta distinta. Revisa el recorrido de bienvenida y la sección Cómo preguntar para saber como funciona el sitio.
    – user7176
    Commented el 29 ago. 2017 a las 6:12
  • Hola Franklin. como te dice @blonfu, has de hacer una pregunta nueva y no usar la seccion de Respuestas. Un saludo
    – lois6b
    Commented el 29 ago. 2017 a las 7:09
0

tendrias que usar etiquetas jquery en los input para poder llevarte la información por ajax , tambien consultarla, y poder crearla en el modal, el modal es codigo html tratalo de igual manera ideal si esta en css puro o jquery, importante que este rendereada la información en json para que sea escalable y los tiempos de uso de memoria sean de manera asyncrona obtiendo un mejor tiempo de carga.

1
  • Gracias por la respuesta. ¿Me podrías dar un pequeño ejemplo? Commented el 26 mar. 2017 a las 1:54

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.