0

Boa tarde pessoas, foi me dada a missão de criar um formulário em etapas (next, next, concluir...) e na ultima parte do formulário tem uma tabela onde eu preciso adicionar/editar/excluir itens para depois inserir no banco de dados junto com o formulário. O formulário poderá ser aberto posteriormente e seus itens editados inclusive o que está nessa tabela.

Então eu fiz o formulário editável, em etapas, porém agarrei na parte da tabela...

Fiz duas tabelas no banco, uma para os dados do formulário e outra para os itens da tabela.

Acima da tabela coloquei um botão "adicionar" que ao clica-lo abre um modal onde insiro os dados e dou submit no banco.

Após inseridos os dados na tabela eu fecho o modal e dou submit formulário.

Meu problema é que não consigo fazer a tabela que está na página atrás do modal atualizar após dar submit no modal e nem quando eu tento excluir o item da tabela. A única forma que consegui faz voltar lá na primeira etapa do formulário e eu preciso atualizar somente a "div" da tabela.

As etapas eu fiz com o código abaixo:

             
    /*PAGINAS*/
    $('#btn_login_details').click(function(){
    
      $('#list_login_details').removeClass('active active_tab1');
      $('#list_login_details').removeAttr('href data-toggle');
      $('#login_details').removeClass('active');
      $('#list_login_details').addClass('inactive_tab1');
      $('#list_personal_details').removeClass('inactive_tab1');
      $('#list_personal_details').addClass('active_tab1 active');
      $('#list_personal_details').attr('href', '#personal_details');
      $('#list_personal_details').attr('data-toggle', 'tab');
      $('#personal_details').addClass('active in');

    });
   
    $('#previous_btn_personal_details').click(function(){

      $('#list_personal_details').removeClass('active active_tab1');
      $('#list_personal_details').removeAttr('href data-toggle');
      $('#personal_details').removeClass('active in');
      $('#list_personal_details').addClass('inactive_tab1');
      $('#list_login_details').removeClass('inactive_tab1');
      $('#list_login_details').addClass('active_tab1 active');
      $('#list_login_details').attr('href', '#login_details');
      $('#list_login_details').attr('data-toggle', 'tab');
      $('#login_details').addClass('active in');

    });
   
    $('#btn_personal_details').click(function(){

      $('#list_personal_details').removeClass('active active_tab1');
      $('#list_personal_details').removeAttr('href data-toggle');
      $('#personal_details').removeClass('active');
      $('#list_personal_details').addClass('inactive_tab1');
      $('#list_contact_details').removeClass('inactive_tab1');
      $('#list_contact_details').addClass('active_tab1 active');
      $('#list_contact_details').attr('href', '#contact_details');
      $('#list_contact_details').attr('data-toggle', 'tab');
      $('#contact_details').addClass('active in');

    });
   
    $('#previous_btn_contact_details').click(function(){

      $('#list_contact_details').removeClass('active active_tab1');
      $('#list_contact_details').removeAttr('href data-toggle');
      $('#contact_details').removeClass('active in');
      $('#list_contact_details').addClass('inactive_tab1');
      $('#list_personal_details').removeClass('inactive_tab1');
      $('#list_personal_details').addClass('active_tab1 active');
      $('#list_personal_details').attr('href', '#personal_details');
      $('#list_personal_details').attr('data-toggle', 'tab');
      $('#personal_details').addClass('active in');

    });

Tabela que está na página principal:

<div class="form-group" style="text-align: center;">

  <td style="width:10%;"><button type="button" name="add" id="add" class="btn btn-success" onClick="cria_modal()">Adicionar Condicionante</button></td>  

</div> 

<div id="tabelaCondicionante" >

    <div class="table-wrapper">

      <table class="table comBordaSimples">

        <thead>

          <tr>

            <th style="width:10%;">Item</th>

            <th style="width:45%">Descrição</th>

            <th style="width:15%">Prazo</th>

            <th style="width:20%">Situação</th>

            <th style="width:10%">Excluir</th>
          
          </tr>

        </thead>

        <tbody style="height:calc(200px) !important;">

          <?php 

         .
         .
         Consulta banco
         .
         .

          if (empty($retorno)) 
          { ?>
            <tr>

              <td colspan="5" style="text-align: center;"> Não há condicionantes cadastradas</td>

            </tr>

          <?php }

          while ($row = mysqli_fetch_array($resultado)) { 
            $condicionante_descricao = $row['condicionante_descricao'];
            $condicionante_prazo = $row['condicionante_prazo'];
            $condicionante_numero = $row['condicionante_numero'];
            $condicionante_situacao = $row['condicionante_situacao'];
            $cond_cod=$row['cond_cod'];
          ?>

          <tr class="pointer" id="linha_<?php echo $cond_cod;?>"  onClick="cria_modal()">

            <td><?php echo $condicionante_numero;?></td>
            <td><?php echo $condicionante_descricao;?></td>
            <td><?php echo $condicionante_prazo;?></td>
            <td><?php echo $condicionante_situacao;?></td>
            <td onClick="event.cancelBubble=true">
              <span class="label label-danger"> 
                <i class="fa fa-times fa-lg" onclick="event.cancelBubble=true; acaoexcluir(<?php echo $cond_cod; ?>);"></i>
              </span>
            </td>

          </tr>
          <?php
          }
          ?>
        </tbody>

      </table>

    </div>

</div> 

Formulário do modal:

//VALIDA FORMULÁRIO DE BUSCA CLIENTE
$("#formCondicionante" ).validate({

  rules: 
  {
    condicionante_numero: {
      required: true
    },
    condicionante_descricao: {
      required: true
    },
    condicionante_prazo: {
      required: true
    }
  },

  messages: 
  {
    condicionante_numero: {
      required: "Informe o número",
    },
    condicionante_descricao: {
      required: "Informe a descrição",
    },
    condicionante_prazo: {
      required: "Informe o prazo",
    }
  },

  tooltip_options: {
    condicionante_numero: {
      placement:'top',
      trigger:'focus'
    },
    condicionante_descricao: {
      placement:'top',
      trigger:'focus'
    },
    condicionante_prazo: {
      placement:'top',
      trigger:'focus'
    }
  },

  submitHandler: function () {

    $.ajax({
      
      type: "POST",
      url: "condicionante/salvar_condicionante.php",
      data: $("#formCondicionante").serialize(),
      dataType: 'json',

      beforeSend: function() {


      },

      complete: function() {

      },

      success: function(resposta) {                                  


        if (resposta.codigo == 1) {

          CriarToast('Condicionante cadastrada com sucesso.'); 
          $('#formCondicionante')[0].reset();

         
        }  else if(resposta.codigo == 3){
          CriarToast('Condicionante atualizado com sucesso.'); 
         
        }                 

      },

    });
  return false;
  }

});           
<?php 
.. consulta no banco ...
?>  

<form role="form" id="formCondicionante"> 

  <fieldset class="scheduler-border">

    <legend class="scheduler-border">Condicionantes</legend>


    <div class="col-md-2">
      <label for="condicionante_numero">Item</label>
      <input type="text" class="form-control campos" placeholder="Número do item" id="condicionante_numero" name="condicionante_numero" value="<?php echo strtoupper ($condicionante_numero);?>">
    </div>

    <div class="col-md-10">
      <label for="condicionante_descricao">Descrição</label>
      <input type="text" class="form-control campos" placeholder="Descrição" id="condicionante_descricao" name="condicionante_descricao" value="<?php echo strtoupper ($condicionante_descricao);?>">
    </div>

    <div class="col-md-6">
      <label for="condicionante_prazo">Prazo</label>
      <input type="text" class="form-control campos" placeholder="Prazo" id="condicionante_prazo" name="condicionante_prazo" value="<?php echo strtoupper ($condicionante_prazo);?>">
    </div>

    <div class="col-md-6">
      <label for="condicionante_situacao">Situação</label>
      <input type="text" class="form-control campos" placeholder="Situação" id="condicionante_situacao" name="condicionante_situacao" value="<?php echo strtoupper ($condicionante_situacao);?>">
    </div>

    <input type="hidden" id="cond_cod" name="cond_cod" value="<?php echo strtoupper ($cond_cod);?>">
    <input type="hidden" id="atualizaBtn" name="atualizaBtn" value="<?php echo strtoupper ($atualizaBtn);?>">
    <input type="hidden" id="licenciamento_cod" name="licenciamento_cod" value="<?php echo strtoupper ($licenciamento_cod);?>">

    <div class="col-md-12 panel-body form-group" style="text-align: center;">

      <?php if($atualizaBtn == 'SIM'){ ?>

        <button type="submit" style="width:200px !important;" id="atualizaCondicionante" class="btn btn-primary campos">Atualizar</button>


      <?php } else{?>

        <button type="submit" style="width:200px !important;" id="submitCondicionante" class="btn btn-primary campos">Adicionar</button>

      <?php }?>

    </div>

  </fieldset>

</form>

Se alguém puder ajudar ou souber uma forma melhor de fazer isso, fico grato!

1
  • faltou mostrar as bibliotecas que vc usou
    – user60252
    Commented 8/06/2020 às 20:06

1 Resposta 1

0

Cara existe várias maneiras de resolver isso. Uma delas é você fazer uma requisição ajax chamando o conteúdo da sua tabela:

cria em um arquivo separado: conteudo_tabela.php (coloque o nome que achar melhor); e add o seu código:

<?php 

     .
     .
     Consulta banco
     .
     .

      if (empty($retorno)) 
      { ?>
        <tr>

          <td colspan="5" style="text-align: center;"> Não há condicionantes cadastradas</td>

        </tr>

      <?php }

      while ($row = mysqli_fetch_array($resultado)) { 
        $condicionante_descricao = $row['condicionante_descricao'];
        $condicionante_prazo = $row['condicionante_prazo'];
        $condicionante_numero = $row['condicionante_numero'];
        $condicionante_situacao = $row['condicionante_situacao'];
        $cond_cod=$row['cond_cod'];
      ?>

      <tr class="pointer" id="linha_<?php echo $cond_cod;?>"  onClick="cria_modal()">

        <td><?php echo $condicionante_numero;?></td>
        <td><?php echo $condicionante_descricao;?></td>
        <td><?php echo $condicionante_prazo;?></td>
        <td><?php echo $condicionante_situacao;?></td>
        <td onClick="event.cancelBubble=true">
          <span class="label label-danger"> 
            <i class="fa fa-times fa-lg" onclick="event.cancelBubble=true; acaoexcluir(<?php echo $cond_cod; ?>);"></i>
          </span>
        </td>

      </tr>
      <?php
      }
      ?>

depois crie uma função JS que chamará essa página via ajax:

function carrega_tabela() {
   $.ajax({
       url:'conteudo_tabela.php',
       dataType:'html',
       type:'POST',
       success:function(data){
            $("#tabelaCondicionante table tbody").html(data);
       }
   })
}

chame essa função logo após o submit e/ou sempre que necessário.

2
  • Funcionou, porém quando eu chamo a função a tabela mostra todos os itens do banco... como eu faço para passar um parâmetro pra página da tabela pra que eu possa colocar no WHERE? tentei usar o data:{licenciamento_cod:licenciamento_cod}, mas ai para de funcionar
    – user192882
    Commented 9/06/2020 às 18:51
  • Consegui, desculpa a noobisse! passei a função da seguinte maneira: carrega_tabela(<?php echo $licenciamento_cod;?>); e funcionou certinho!!! obrigado
    – user192882
    Commented 9/06/2020 às 19:08

Você deve fazer log-in para responder a esta pergunta.