Update table after sumbit in modal

Question

Good afternoon people, I was given the mission to create a form in steps (next, next, complete...) and in the last part of the form there is a table where I need to add/edit/delete items to then insert in the database along with the form. The form can be opened later and its items edited including what is in this table.

So I made the editable form, in stages, but grabbed the table part...

I made two tables in the database, one for the form data and one for the table items.

Above the table I put an "add" button that when clicking it opens a modal where I insert the data and give Submit in the database.

After entering the data in the table I close the modal and give form Submit.

My problem is that I can’t do the table that is on the page behind the modal update after giving Ubmit in modal and even when I try to delete the item from the table. The only way I could get back there in the first step of the form and I need to update only the table "div".

As stages I did with the code below:

             
    /*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');

    });

Table that is on the main page:

<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> 

Modal form:

//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>

If anyone can help or know a better way to do that, I’m grateful!

Answer 1

Dude there are several ways to solve this. One of them is you make an ajax request by calling the contents of your table:

create in a separate file: count_table.php (put the name you think is best); and add your code:

<?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
      }
      ?>

then create a JS function that will call this page via ajax:

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

call this function right after Submit and/or whenever necessary.