Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Modal em um botão.

Referente ao curso CodeIgniter II: Mais técnicas e boas práticas

por MATHEUS HENRIQUE
| 52.5k xp | 98 posts

Boa tarde. Tenho a view abaixo.

  function modaAddProduto() {
           $('#modalAddProdutos').modal('show');
         }

   <body>
      <div class="container-fluid">
         <div class="side-body">
            <br>
            <button class="btn btn-success"  onclick="modaAddProduto()">Incluir Produtos</button>
            <!--<button class="btn btn-info"     onclick="modalProduto()">Visualizar Produtos</button>-->
            <button class="btn btn-danger" value="Fechar" onclick="javascript:window.close()">Fechar</button>
            <br><br>
            <?php if($this->session->flashdata('sucesso')){?>
            <div class="alert alert-success alert-dismissable">
               <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
               <?php echo $this->session->flashdata('sucesso');?>
            </div>
            <?php }?>

Obs: o código continua. Mas o que eu gostaria? Gostaria de incluir quando chamo o modalAddProdutos, onde o código esta abaixo.

<div id="modalAddProdutos" class="modal fade" role="dialog">
            <form role="form" method="post" class="formProdutosObras" action="<?= base_url("/index.php/Obras/Obras/addProdutos") ?>" id="formProdutosObras">
               <div class="tab-content">
                  <div id="gerais" class="tab-pane fade in active">
                        <!--<h1>Cliente: <?php //echo $this->session->flashdata('cliente');?></h1>-->
                        <!--<h1>Obra: <?php //echo $this->session->flashdata('obra');?></h1>-->
                     <div class="form-group">
                        <input type="hidden" type="text" class="form-control" id="idProduto" name="idProduto">
                     </div>

                     <div class="col-sm-5 my-1">
                        <label for="codigoProduto">Código</label>
                        <input type="text" class="form-control" id="codigoProduto" autofocus name="codigoProduto">

Gostaria de incluir ao lado do campo código onde o seu name esta definido como codigoProduto um botão onde ao clicar deveria abrir outro modal.. esse modal iria carregar todos os produtos disponíveis e ao escolher um o mesmo deve ir ao campo preenchendo o código do produto. o script para carregar os produtos em SQL eu já tenho, apenas estou com dificuldade em criar esse modal com essa funcionalidade.

Obrigado.

5 respostas
por MATHEUS HENRIQUE
| 52.5k xp | 98 posts

Código todo para facilitar.

VIEW

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?php $soma = 0; ?>
<html>
   <head>
      <link href="<?= base_url("bootstrap/css/bootstrap.min.css")?>" rel="stylesheet">
      <script src="<?= base_url("bootstrap/js/jquery.js")?>"></script>
      <script src="<?= base_url("bootstrap/js/bootstrap.min.js")?>"></script> 
      <!-- jQuery -->
      <script src="<?= base_url("bootstrap/js/drag.js")?>"></script>
      <script src="<?= base_url('bootstrap/js/jquery.forms.js') ?>"></script>
      <script>
         function modaAddProduto() {
           $('#modalAddProdutos').modal('show');
         }

         function modalDelete($id){
           $('#modalDelete').modal('show');
           var id = $id; 
           $( '#Yes').ajaxForm({
               success: function (data) {
                  //alert("hello");
                   window.location.href = '<?= base_url("/index.php/Obras/Obras/removeProdutosObras/")?>'+id;
               }    
           });               
         }


      </script>

      <style type="text/css">
         .scroll {
            height: 70%;
            overflow-y: scroll;
         }
      </style>
   </head>
   <body>
      <div class="container-fluid">
         <div class="side-body">
            <br>
            <button class="btn btn-success"  onclick="modaAddProduto()">Incluir Produtos</button>
            <!--<button class="btn btn-info"     onclick="modalProduto()">Visualizar Produtos</button>-->
            <button class="btn btn-danger" value="Fechar" onclick="javascript:window.close()">Fechar</button>
            <br><br>
            <?php if($this->session->flashdata('sucesso')){?>
            <div class="alert alert-success alert-dismissable">
               <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
               <?php echo $this->session->flashdata('sucesso');?>
            </div>
            <?php }?>
            <div class="scroll">
               <br>
               <table class="table table-hover" id="myTable">
                  <thead>
                     <tr>
                        <td  style="display:none;">ID</td>
                        <th><b>Nome</b></th>
                        <td><b>Quantidade</b></td>
                        <td><b>Valor Unitário</b></td>
                        <td><b>Valor Total</b></td>
                     </tr>
                  </thead>
                  <tbody class="resultados">
                     <?php foreach ($produtosObras as $prodObra) : ?>
                     <tr>
                        <td  style="display:none;"><?= $prodObra["id_ProdutosObras"]?></td>
                        <td><?= $prodObra["nomeProduto"]?></td>
                        <td><?= $prodObra["quantidade"]?></td>
                        <td><?= numeroEmReais($prodObra["valor_unitario"]) ?></td>
                        <td><?= numeroEmReais($prodObra["valorTotal"])?></td>
                        <?php $soma += $prodObra["valorTotal"]; ?>
                        <td>
                           <a>
                           <button style="background-color:transparent" class="btn btn-primary-outline glyphicon glyphicon-trash" onclick="modalDelete(<?= $prodObra["id_ProdutosObras"]?>)" value="<?= $prodObra["id_ProdutosObras"]?>">
                           </button>
                           </a>
                        </td>
                     </tr>
                     <?php endforeach ?>
                     <td><b>Total...: <?php echo numeroEmReais($soma); ?></b></td>
                  </tbody>
                  <!-- Carrega a view para exclusao -->
                  <?php $this->load->view('Modal/modalDelete');?>
                  <!-- Carrega VIEW para cadastro-->
                  <?php $this->load->view('Modal/modalAddProdutosObras');?>
               </table>
            </div>

            <br><br>
            <div class="scroll">
               <table class="table table-hover" id="myTable">
                  <thead>
                     <tr>
                        <th><b>Código</b></th>
                        <th><b>Nome</b></th>
                        <th><b>Valor Unitário</b></th>
                     </tr>
                  </thead>
                  <tbody>
                     <?php foreach ($produtos as $produto) : ?>
                     <tr>
                        <td><?= $produto["idProduto"]?></td>
                        <td><?= $produto["nomeProduto"]?></td>
                        <td><?= numeroEmReais($produto["valorVenda"])?></td>
                     </tr>
                     <?php endforeach ?>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </body>
</html>
por MATHEUS HENRIQUE
| 52.5k xp | 98 posts

Código todo abaixo do modal.

<div id="modalAddProdutos" class="modal fade" role="dialog">
   <div class="modal-dialog" >
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Adicionar Produtos</h4>
         </div>
         <div class="modal-body">
            <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#gerais">Gerais</a></li>
            <!--<li><a data-toggle="tab" href="#prod">Lista de Produtos</a></li>-->
            <!--<li><a data-toggle="tab" href="#especificos">Especificos</a></li>-->
            <ul>
            <br><br>
            <form role="form" method="post" class="formProdutosObras" action="<?= base_url("/index.php/Obras/Obras/addProdutos") ?>" id="formProdutosObras">
               <div class="tab-content">
                  <div id="gerais" class="tab-pane fade in active">
                        <!--<h1>Cliente: <?php //echo $this->session->flashdata('cliente');?></h1>-->
                        <!--<h1>Obra: <?php //echo $this->session->flashdata('obra');?></h1>-->
                     <div class="form-group">
                        <input type="hidden" type="text" class="form-control" id="idProduto" name="idProduto">
                     </div>

                     <div class="col-sm-5 my-1">
                        <label for="codigoProduto">Código</label>
                        <input type="text" class="form-control" id="codigoProduto" autofocus name="codigoProduto">
                     </div>
                     <br><br><br><br>

                     <div class="col-sm-5 my-1">
                        <label for="quantidadeProd">Quantidade</label>
                        <input type="number" class="form-control" id="quantidadeProd" name="quantidadeProd" >
                     </div>

                  </div>

                  <br>
               </div>
               <br>
               <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                  <button type="button" class="btn btn-primary" onclick="$('.formProdutosObras').submit()">Incluir</button>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
</div>
solução!
por André Chaves
| 1967.1k xp | 2579 posts
Instrutor Lider técnico

Oi Matheus, tudo bom?

Normalmente, modais que abrem outros modais costumam ter um impacto negativo na usabilidade. Uma forma de fazer essa funcionalidade é carregar no modal de adição um select com todos os dados necessarios. Assim, evitamos um modal chamando o outro e garantimos a seleção de produtos.

por MATHEUS HENRIQUE
| 52.5k xp | 98 posts

Ola André, tudo bem e você? Seria um modal listando todos os produtos e um botão de adicionar com um textbox ao lado para informar a quantidade?

por MATHEUS HENRIQUE
| 52.5k xp | 98 posts

Bom dia André, entendi o que quis dizer, faltou um pouco de atenção para interpretar a resposta haha.. desculpe, perfeito a solução. Obrigado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software