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!