Welcome Guest, Not a member yet? Register   Sign In
Bootstrap Dynamic Modal Form with Ajax
#1

Hi everyone,

I'm using codeigniter v3 with bootstrap v3.

I have a grid of products with a modal popup related in view. All is charged with the  view


Code:
<div class="row">
       <?php foreach ($productos as $producto) { ?>
           <div class="col-md-4">
               <div class="ibox">
                   <div class="ibox-content product-box" data-toggle="modal" data-target="#modal_<?= $producto->idItem ?>">
                       <div class="product-imitation">
                           <img src="<?= $producto->avatar ?>" alt="<?= $producto->nombre ?>"/>
                       </div>
                       <div class="product-desc">
                           <div class="product-price"> <?= $producto->puntos ?> Puntos </div>
                           <span class="product-name"><?= $producto->nombre ?></span>
                           <div class="small m-t-xs">
                               Válido hasta: 02/09/2016
                           </div>
                       </div>
                   </div>
               </div>
               <div class="modal inmodal productoModal" id="modal_<?= $producto->idItem ?>" tabindex="-1"  aria-hidden="true">
                   <div class="modal-dialog">
                       <div class="modal-content animated bounceInRight">
                           <?php
                           $hidden = array('idItem' => $producto->idItem, 'puntos' => $producto->puntos,
                               'notificacion' => 'Solicitud de ' . $producto->nombre,
                               'tipo_notificacion' => 2, 'idModulo' => 5);

                           echo form_open('', 'class="item form-horizontal" role="form" name="form_'.$producto->idItem.'" id="form_'.$producto->idItem.'"', $hidden);?>

                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                               <div class="product-imitation">
                                   <img src="<?= $producto->avatar ?>" alt="<?= $producto->nombre ?>"/>
                               </div>
                               <div class="modal-title"><?= $producto->descripcion ?></div>
                           </div>
                           <div class="modal-body">
                               <p class="descripcionProductoModal">Descripción y características del producto elegido por el trabajador de HERMES</p>
                               <div class="contadorCantidad">
                                   <div class="input-group bootstrap-touchspin">
                                       <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
                                       <input class="touchspin1 form-control" type="text" value="1" name="cantidad" id="cantidad_<?= $producto->idItem ?>" style="display: block;">
                                       <span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
                                   </div>
                               </div>
                               <div class="precioModal"><?= $producto->puntos ?> Puntos</div>
                               <?php if ($puntosEmpleado <= $producto->puntos) { ?>
                                   <p class="textoFaltaPuntos">Usted no cuenta con puntos suficientes para realizar este canje. Su saldo disponible es de <?= $puntosEmpleado ?> puntos.</p>
                               <?php } ?>
                               <div class="modal-footer">
                                   <button class="btn btn-grayHermes" data-dismiss="modal" type="submit">Cancelar</button>
                                   <button name="procesar" class="procesar_item btn btn-primary " type="submit">Procesar Solicitud</button>    
                               </div>
                           </div>
                       <?php echo form_close(); ?>                          
                       </div>
                   </div>
               </div>  
           </div>
       <?php } ?>
   </div>

As you see each modal is a form. I want to submit by ajax but this not working when I try to click on event submit
I dont know if is the correct way to do that

Code:
   $(document).ready(function () {    
       $('form[name=<?php echo $producto->idItem ?>]').submit(function (event) {

           event.preventDefault();

           //$('.form-group').removeClass('has-error'); // remove the error class
           //$('.help-block').remove(); // remove the error text

           var formData = {
               'cantidad': $('input[name=cantidad]').value,
               'idItem': '<?php echo $producto->idItem ?>'
           };

           $.post('<?php echo site_url('transacciones/solicitud') ?>', formData, function () {
               alert("success");
           })
                   // using the done promise callback
                   .done(function (data) {

                       // log data to the console so we can see
                       console.log(data);

Thanks in advance

Martin

Attached Files Thumbnail(s)
   
Reply




Theme © iAndrew 2016 - Forum software by © MyBB