Jump to content
gersonab

Atualizar o select após cadastro sem refresh

Recommended Posts

Boa tarde,  gostaria da ajuda de vcs, tenho um select option que busca os dados no bd, logo após este tenho um botão onde abro uma janela modal para incluir mais opções a este select caso necessite, com isso faço um cadstro no bd sem dar refresh na página, isto pq já tenho itens inseridos nos demais inputs, o que eu preciso é que após o cadastro este select option seja atualizado sem o refres da página. segue o código.

<select id="location" name="reup"  >
<option value="">item</option>
<?php aqui vem os demais option com a busca no bd   ?>
</select>

Jquery

$('#insert').click(function(e){
    e.preventDefault();

    var nomer = $('#nomer').val();
    .....
    var obsr = $('#obsr').val();

    $.post('insreu.php', {
        nomer:nomer,
        .....
        obsr:obsr
    }, function(resposta){

        if(resposta == 1){

            $('input, textarea').val('');
            $('#reup').append(e);
            alert('Cadastrado com sucesso.');
        }else {
            alert(resposta);
        }
    });

});

Desde já agradeço.

Share this post


Link to post
Share on other sites

Fiz um include com o options em uma página separada e coloquei o evento load porém ainda não atualiza .

<select id="reup" name="reup">
  <?php include "optreu.php"; ?>
</select>
if(resposta == 1){
                
$('#reup').load('optreu.php');

}

 

Share this post


Link to post
Share on other sites

dei uma boa lida nesta documentação só q não tenho tanto conhecimento assim, ainda continuo com o problema.

 

Share this post


Link to post
Share on other sites
<div id="resultado"></div>

<form id="id_do_formulário" onsubmit="return (ajax.form(this.id, 'resultado', 'insreu.php'))">

    <input type="text" name="alguma_coisa" />

    <select id="reup" name="reup">
        <?php include ('optreu.php'); ?>
    </select>

    <button>Submeter sem refresh</button>
</form>

<script>
    var ajax = new AjaxRequest();
</script>

Então no insreu.php ao salvar os dados você pode usar o javascript para refazer o seletor de id#reup.

Pode reescrever usando innerHTML

document.getElementById('reup').innerHTML = '<option value="<?= /* Alguma coisa do php */ ?>">Opção</option>';

Ou anexando itens:

var item = document.createElement('option');
item.value = '<?= /* Alguma coisa do php*/ ?>';
item.innerText = 'Texto da opção';
document.getElementById('reup').appendChild(item);
/* Esse processo você pode repetir dentro de um loop no php de acordo com a quantidade de itens a inserir */

 

É algo difícil de apresentar um exemplo mais completo, pois não tenho como saber o fluxo de dados que serão recebidos ou enviados dos seus arquivos aí.

Share this post


Link to post
Share on other sites

Boa tarde Omar.
deixa eu explicar o funcionamento, é um formulário onde tenho vários itens de cadastro, sendo que neste são 5 selects com essa situação de cadastro com uma janela modal, tipo , vou cadastrar um nome e relacionar este a uma categoria, mas não tenho a categoria aí eu clico em um botão para abrir a janela modal e cadastro a categoria, beleza, categoria cadastrada, só que a mesma não esta atualizada no select.

meu optreu.php:

<option value="">Selecione aqui</option>
<?php
$curc = $pdo->query("SELECT * FROM reu ORDER BY nomer asc");
while ($lic = $curc->fetch(PDO::FETCH_ASSOC)) {
  $idr=$lic['idr'];
	$nomer=$lic['nomer'];
	?>
	<option value="<?php echo $idr; ?>"><?php echo $nomer; ?></option>
<?php } ?>

dentro do que você me passou ele ficou assim , pelo que entendi.

  

<option value="">Selecione aqui</option>
<?php
$curc = $pdo->query("SELECT * FROM reu ORDER BY nomer asc");
while ($lic = $curc->fetch(PDO::FETCH_ASSOC)) {
	$idr=$lic['idr'];
	$nomer=$lic['nomer'];
	?>
	<script>
	var item = document.createElement('option');
	item.value = '<?php echo $idr; ?>">';
	item.innerText = '<?php echo $nomer; ?>';
	document.getElementById('reup').appendChild(item);
	</script>
<?php } ?>

porém continua da mesma forma, coloquei o 

onsubmit="return (ajax.form(this.id, 'resultado', 'insreu.php'))"

porém ainda na mesma.

 

só falta fazer aparecer no select as opções cadastradas.

Share this post


Link to post
Share on other sites

Estranho... Algum erro no console?

Enfim acho que entendi sua situação então preparei um exemplo didático aqui

Veja: https://drive.google.com/file/d/1JP0jvAabYWtiOxH02PSJLAwH-I6g8rSz/view?usp=sharing

Em todo caso mesmo não sendo algo como isso, acredito eu que você possa adaptar aí para suas necessidades.

Share this post


Link to post
Share on other sites

Meu problemas esta sendo conflito com as bibliotecas jQuery e plugins, a modal ameaça a abrir e fecha, recarregando a página, e não mostra erro no console.

 

Share this post


Link to post
Share on other sites

Omar, muito obrigado pela ajuda fornecida, porém por conta de conflitos() , resolvi voltar ao código anterior, embora o q você tenha me passado seja excelente, no qual vou estudar melhor depois. resolvi de forma mais simples do que se poderia pensar, o problema era que o select estava fora da div modal, logo não conseguia atualizar o select, o que eu fiz foi atualizar a div do select ao concluir a postagem, isto é, após o insert. 

obsr:obsr
        }).done(function(href){ 
		$("#atualizareu").load( href +" #atualizareu");

desde já agradeço novamente.

Share this post


Link to post
Share on other sites

Enfim, mas uma coisa deve ficar claro você está lançando um protocolo requisitando um arquivo no servidor.

Logo essa requisição deve ser enviada, processada, devolvida ao cliente, só então o usuário irá fazer o download do arquivo e o browser irá compilar o novo html.

Em local isso é feito em uma fração de segundo, mas em um servidor remoto dependendo do seu desempenho e a velocidade de conexão do usuário pode haver um delay de alguns instantes até que seu seletor seja atualizado.

 

O mais interessante mesmo seria usar só o script e anexar as opções ao seletor, pois isso é instantâneo "depende do hardware do usuário".

Tenta fazer alguns testes aí:

var seletor = document.getElementById('id_do_seletor'), // Obtemos o seletor
    novaOpcao = document.createElement('option'); // Com isso criamos uma opção
            
novaOpcao.value = '<?= $php ?>'; // Adicionamos a atributo "value" a opção criada e damos uma propiedade a ela
novaOpcao.innerText = '<?= $php ?>'; // Escrevemos algo na opção
seletor.appendChild(novaOpcao); // Anexamos a opção criada ao seletor

Ou seja registrando uma nova opção se o usuário recarregar a página essa opção vai existir, e ao registrar também teremos a nova opção sem a necessidade de carregamentos, assim sendo ganhando no desempenho em ambos os casos.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By anabeatrizzz
      2. Por que PHP é a mais utilizada em projetos? Explique.
       
      3. São 24 anos de desenvolvimento em PHP, o que faz ele durar tanto na área da programação? Explique.
       
      4. Você acredita que o PHP vai morrer ou não? Explique.
       
      5. Explique o que seria esta HHVM que as empresas utilizam.
       
      6. PHP tem a facilidade de criar APIs, quais seriam as vantagens na hora de desenvolver aplicativos para celular? Explique.
       
      7. Explique um pouco sobre o Laravel, Zend Framework, Sympony, lumen, codelgniter que foram surgindo ao decorrer dos anos.
       
      8. “O PHP veio da WEB e da WEB ele permanecerá”. O que essa frase significaria para você? Explique.
       
      9. Como funcionariam as comunidades em PHP? Por que existem tantas pessoas ainda usando a linguagem? Explique.
       
      10. O PHP vem se modernizando durante anos, quais seriam estas evoluções dele? Explique.
    • By fideles
      Mais uma vez venho aqui pedir ajuda a vocês.
       
      Tenho um formulario que criei aqui na empresa algo bem simples, somente para sair das planilhas de excel, que seria cadastro de funcionarios.
       
      Tem os campos, matricula, nome completo, unidade de trabalho, endereço e telefone de emergencia.
       
      A parte do formulario funciona, a gravação no BD tbm, listar as informações também, ai me perguntaram se era possível um auto preenchimento dos campos colocando somente a matricula do funcionario e respondi que eu não sei porque realmente não sei.
       
      A ajuda que eu preciso de vocês seria, é possível fazer isso ? Colocar a matricula e vir do banco e preencher os outros inputs? Se sim, é possível me derem um exemplo de como funciona e eu estudar o codigo e colocar nos outros inputs.
       
      Obrigado antecipadamente. 
       
    • By tetsuo
      Boas galera?
      Às vezes subo um projeto que, despercebidamente passa um arquivo com letra maiúscula/minúscula
      E dá trabalho pra descobrir que era somente e apenas isso.
       
      Como posso resolver isso?
      Uso rWindows 10.
      Mas a hospedagem é em linux.
       
      O Docker serviria pra me ajudar com essa questão?
       
    • By lUANZIKA3
      minha pagina contém uma table que
      exibe a ultima id da minha DB porém ela não fica ativa.
      a ultima id só é exibida se o form tiver sido enviado.
      ↓table aonde é exibida a Insert_id
      <table class="table table-dark" method="POST" action="processa.php"> <thead> <tr> <th scope="col">#</th> <th scope="col">Ultimo ID</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td> <?php if(isset($_SESSION['id'])){ echo $_SESSION['id']; } ?></td> </tr> </tbody> </table> Agora a conexao.php
      <?php session_start(); $servidor = "localhost"; $usuario = "root"; $senha = ""; $dbname = "contas"; //Criar a conexao $conn = mysqli_connect($servidor, $usuario, $senha, $dbname); $nome = filter_input(INPUT_POST, 'nome', FILTER_SANITIZE_STRING); $face = filter_input(INPUT_POST, 'face', FILTER_SANITIZE_STRING); $numeros = filter_input(INPUT_POST, 'numeros', FILTER_SANITIZE_STRING); //echo "Nome: $nome <br>"; //echo "E-mail: $email <br>"; $result_usuario = "INSERT INTO usuarios (nome, face, numeros, created) VALUES ('$nome', '$face', '$numeros', NOW())"; if ($conn->query($result_usuario) === TRUE) { $id = $conn->insert_id; $_SESSION['id'] = "" . $id; } else { echo "Error: " . $result_usuario . "<br>" . $conn->error; } $resultado_usuario = mysqli_query($conn, $result_usuario); if(mysqli_insert_id($conn)){ $_SESSION['msg'] = "<div class='alert alert-success' role='alert'> Parabéns agora você está participando! </div>"; header("Location: index.php"); }else{ $_SESSION['msg'] = "<div class='alert alert-danger' role='alert'> OPS! Parece que você já está participando, espere por outro sorteio e volte! </div>"; header("Location: index.php"); }  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.