Atualizar o select após cadastro sem refresh

[gersonab 1]

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.

[gersonab 1]

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

}

 

[Omar~ 87]

Dar uma conferida nisso:

https://github.com/Spell-Master/sm-web/tree/master/javascript/AjaxRequest

[gersonab 1]

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

 

[Omar~ 87]

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

[gersonab 1]

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.

[Omar~ 87]

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.

[gersonab 1]

Perfeito, vou adaptar e retorno.

[gersonab 1]

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.

 

[gersonab 1]

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.

[Omar~ 87]

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.