Atualizar campo após insert, sem refresh

[manolegal 12]

Bom dia

Tenho um campo tipo select, em que há opção para cadastro de novo dado com ajax. Os dados estão sendo inseridos normalmente no Banco de dados.

O que preciso é que após inserir um novo dado no BD, este select seja atualizado trazendo este dado inserido, sem necessitar atualizar toda a página.

Tentei de varias formas, mas não consegui.

<div class="form-group col-md-4 col-md-offset-1">
    <label for="funcionario">Funcionário(a)</label>
        <div class="input-group">
<select name="paginas" class="form-control form_input_recebe_foco" id="funcionario" name="funcionario" autofocus placeholder="Funcionário(a)" required x-moz-errormessage="Selecione a Pessoa a ser cadastrada como Funcionário(a). Neste campo somente serão listadas as Pessoas ainda não cadastradas como Funcionário(a).'" onkeypress="return handleEnter(this, event)" onfocus="mudacor(this,'#DCDCDC')" onblur="mudacor(this,'white')">
<option value="">Selecionar Funcionário(a) (Obrigatório)</option>
<?php
$Sql = "SELECT .......";
while ($linha = @pg_fetch_array($Resultado)){ ....
          if ($_POST ["funcionario"] == $id_pessoa){
          echo "<option value='$id_pessoa' selected = 'selected'>$pessoa_nome ($id_pessoa)</option>";}
          else{
          echo "<option value='$id_pessoa'>$pessoa_nome ($id_pessoa)</option>";}
} // While
?>
</select>
<span class="input-group-addon"><a href="#" class="glyphicon glyphicon-user" data-toggle="modal" data-target="#modal_cad_pessoa" title="Cadastrar Pessoa"></a></span>
</div>
</div>

			  success: function(data){
                                if (data != true) {		     
                                    $("#mensagem").html(data);
                                }
                                else{
                                    $("#mensagem").html("Cadastro efetuado com sucesso!");
                                    $("#pessoa_nome").val("");
                                    $("#teste_coluna").val("");
                                    $("#pessoa_nome").load("b_funcionarios_cadastro.php"); // Tentativa atualizar
                                }
			  }

Tentei ainda:

$("select[name='paginas']").change(function(){
    $('#funcionario').load( $( this ).val() );
});

E também:

$(document).ready(function () {
  function reload() {
    $("#pessoa_nome").load("b_funcionarios_cadastro.php");
  }

Agradeço desde já pela colaboração.

[kelvim 11]

só recuperar a linha inserida e acrescentar da seguinte forma:

    var x = document.getElementById("funcionario");
    var option = document.createElement("option");
    option.text = textoInseridoNoBanco;
    option.value = valorInseridoNoBanco;
    x.add(option);

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_add

[manolegal 12]

Kelvim. Obrigado pelo retorno. Infelizmente não sei como adaptar ao meu código. Se puder me auxiliar um pouco mais, te agradeço.

[kelvim 11]

Então, pelo que você tinha postado ai em cima, esse trecho pega o resultado do cadastro no banco via ajax, certo?

success: function(data){
if (data != true) {
$("#mensagem").html(data);
}
else{
$("#mensagem").html("Cadastro efetuado com sucesso!");
$("#pessoa_nome").val("");
$("#teste_coluna").val("");
$("#pessoa_nome").load("b_funcionarios_cadastro.php"); // Tentativa atualizar
}
}

Dentro do "sucess" do ajax, você pode inserir os comandos.

[manolegal 12]

Qual seria a forma correta? Tentei da seguinte forma:

			  success: function(data){
                                if (data != true) {		     
                                    $("#mensagem").html(data);
                                }
                                else{
                                    $("#mensagem").html("Cadastro efetuado com sucesso!");
                                    $("#pessoa_nome").val("");
                                    $("#teste_coluna").val("");
                                        var x = document.getElementById("funcionario");
                                        var option = document.createElement("option");
                                        option.text = textoInseridoNoBanco;
                                        option.value = valorInseridoNoBanco;
                                        x.add(option);

[manolegal 12]

Infelizmente ainda não consegui implementar a solução.

Tentei incluir o seguinte código:

else{
   $("#mensagem").html("Cadastro efetuado com sucesso!");
   ....
      $('#funcionario').children().append(data); // Linha implementada

Nesta situação está incluindo o retorno do ajax logo após cada campo retornado do BD no campo select, porém não traz o último dado incluído no BD.

[manolegal 12]

Consegui avançar um pouco.

Ao fechar o Modal, inclui o seguinte código:

    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="fechar">Fechar</button>    
    </div>

$("#fechar").click(function(){
         $('#funcionario').load('b_funcionarios_cadastro.php'); 
 });   

Pelo que vi, em algumas situações até está atualizando os dados inseridos no BD, porém ao atualizar, o campo está apresentando problema:

Ao utilizar o id de div/campo da seguinte forma, não está trazendo dados no select.

<select id="funcionario" class="form-control form_input_recebe_foco" autofocus placeholder="Funcionário(a)" required title="Selecione a Pessoa ....'" onkeypress="return handleEnter(this, event)">

Ao utilizar o id de qualquer outra forma no campo, está atualizando os dados que foram cadastrados através da janela modal, porém está duplicando os campos do formulário que se encontram abaixo do campo funcionario.

<div id="funcionario" class="input-group">
     <select class="form-control form_input_recebe_foco" autofocus placeholder="Funcionário(a)" required title="Selecione a Pessoa ....'" onkeypress="return handleEnter(this, event)">

O que pode estar acontecendo? Estou há vários dias tentando resolver este problema.

[manolegal 12]

Seguindo as dicas aqui do fórum e de alguns tutoriais e vídeos tentei alterar meu código, porém ainda não consegui.

Resumindo: tenho um formulário onde seleciono Funcionários, sendo que se se o mesmo não estiver cadastrado, faço seu cadastro em um Formulário Modal na mesma página do formulário, para consequentemente pode-lo selecionar neste formulário sem a necessidade de acessar um novo formulário.

Utilizo uma função ajax para gravar no BD os dados do funcionário digitados no modal.

A inserção dos dados do formulário modal no BD estou conseguindo fazer.

O problema é atualizar o campo que lista os funcionários, incluindo o funcionário cadastrado através do formulário modal.

Fiz a seguinte alteração:

Após inserir os dados no BD faço uma pesquisa trazendo este último dado inserido.

        $Sql = "INSERT INTO aaa_teste (coluna_teste, teste_coluna)
VALUES ('$pessoa_nome', '$teste_coluna')";
        $Resultado = executa($Sql);  // @ (arroba) - se função der erro, não mostra erros para usuário
    if ($Resultado) {
         
                    $Sql_lista = "SELECT id_teste as id_pessoa, coluna_teste as nome
                FROM aaa_teste
                ORDER BY id_teste DESC LIMIT 1";
                    $Resultado_lista = executa($Sql_lista);
                    while ($linha = pg_fetch_array($Resultado_lista)){
                    $id_pessoa = $linha["id_pessoa"];
                    $pessoa_nome = $linha["nome"];
                    
                    echo "<option value='$id_pessoa'>$pessoa_nome ($id_pessoa)</option>";  / Retorno funcionário cadastrado
                    
                    }           
    }

Me retornando:

<option value='10'>Ultimo Funcionario Cadastrado (10)</option>  // Retorna último cadastro

Meu campo Funcionario

                            <div class="form-group col-md-4 col-md-offset-1">
                                <label>Funcionário(a)</label>
                                    <div class="input-group">
                                        <select class="form-control form_input_recebe_foco" id="funcionario" name="funcionario" autofocus placeholder="Funcionário(a)" onChange="carregarSelect()" required title="Selecione a Pessoa a ser cadastrada como Funcionário(a). Neste campo somente serão listadas as Pessoas ainda não cadastradas como Funcionário(a).'" onkeypress="return handleEnter(this, event)">
                                            <option value="">Selecionar Funcionário(a) (Obrigatório)</option>
                                            <?php
                                                $Sql = "SELECT id_teste as id_pessoa, coluna_teste as nome
                                            FROM aaa_teste
                                            ORDER BY id_teste DESC";
                                                $Resultado = executa($Sql);
                                            while ($linha = pg_fetch_array($Resultado)){
                                            $id_pessoa = $linha["id_pessoa"];
                                            $pessoa_nome = $linha["nome"];
                                                if ($_POST ["funcionario"] == $id_pessoa){
                                                echo "<option value='$id_pessoa' selected = 'selected'>$pessoa_nome ($id_pessoa)</option>";}
                                                else{
                                                echo "<option value='$id_pessoa'>$pessoa_nome ($id_pessoa)</option>";}
                                            }
                                            ?>
                                        </select>
                                        <span class="input-group-addon"><a href="#" class="glyphicon glyphicon-user" data-toggle="modal" data-target="#modal_cad_pessoa" title="Cadastrar Pessoa"></a></span>
                                    </div>
                                    
                            </div>

Para atualizar o campo tipo option/select tentei da seguinte forma:

$(document).ready(function(){
      $("#gravar").click(function(){
	     
		 var pessoa_nome = $("#pessoa_nome").val();
		 var teste_coluna = $("#teste_coluna").val();
		 var msg = $("#mensagem").val();
		 $.ajax({
		          type: "POST",
			  url: "ajx_pes_cad.php",
			  data: "pessoa_nome="+pessoa_nome+"&teste_coluna="+teste_coluna+"&mensagem="+msg,
                          
                 }).done(function(e){   
                     $('#funcionario').append(e);
                     //$('#funcionario').children().append(e);// Tentei também

		  });
                 return false;
	  });
});

Porém ainda não está atualizando.

Se alguém tiver alguma dica, agradeço.

[manolegal 12]

Problema resolvido. Funcionou com:

}).done(function(e){   
     $('#funcionario').append(e);
});

Obrigado a todos pela colaboração.