Ir para conteúdo
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.

Compartilhar este post


Link para o post
Compartilhar em outros 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');

}

 

Compartilhar este post


Link para o post
Compartilhar em outros 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í.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por ILR master
      Fala galera, tudo bem?
       
      Tenho o seguinte codigo:
       
       class Data {
      public static function ExibirTempoDecorrido($date)
      {
          if(empty($date))
          {
              return "Informe a data";
          }
          $periodos = array("segundo", "minuto", "hora", "dia", "semana", "mês", "ano", "década");
          $duracao = array("60","60","24","7","4.35","12","10");
          $agora = time();
          $unix_data = strtotime($date);
          // check validity of date
          if(empty($unix_data))
          {  
              return "Bad date";
          }
          // is it future date or past date
          if($agora > $unix_data) 
          {  
              $diferenca     = $agora - $unix_data;
              $tempo         = "atrás";
          } 
          else 
          {
              $diferenca     = $unix_data - $agora;
              $tempo         = "agora";
          }
          for($j = 0; $diferenca >= $duracao[$j] && $j < count($duracao)-1; $j++) 
          {
              $diferenca /= $duracao[$j];
          }
          $diferenca = round($diferenca);
          if($diferenca != 1) 
          {
              $periodos[$j].= "s";
          }
          return "$diferenca $periodos[$j] {$tempo}";
      }
      }
       
      Funciona redondinho se o valor retornado for de algumas horas, mas...
      Quando passa de dois meses, ele retorna a palavra mess. Deve ser por conta dessa linha
      if($diferenca != 1) 
          {
              $periodos[$j].= "s";
          }
       
      Quero que modre:
       
      2 meses atrás
      e não
      2 mess atrás.
       
      Espero que tenham entendido.
       
      Valeu
    • Por Carlos Web Soluções Web
      Olá...
      Estou tentando fazer o seguinte !!
      Listando dados em tabela !!
      Gostaria que....se na listagem houver 4 linhas...indepedente de seu número de ID, faça a listagem em ID ser em ordem 1 2 3 4 !!
      Exemplo...se tiver uma listagem de dados que está em ID 1 3 3...faça ficar 1 2 3 !!

       
      echo "<table class='tabela_dados' border='1'> <tr> <td>ID</td> <td>Nome Empresa</td> <td>Responsável</td> <td>Telefone 1</td> <td>Telefone 2</td> <td>E-mail 1</td> <td>E-mail 2</td> <td>Endereço</td> <td>CEP</td> <td>Bairro</td> <td>AÇÃO 1</td> <td>AÇÃO 2</td> </tr> "; $sql = "SELECT ID FROM usuarios_dados WHERE Usuario='$usuario'"; $result = $conn->query($sql); $num_rows = $result->num_rows; $Novo_ID = 1; for ($i = 0; $i < $num_rows; $i++) { $registro = $result -> fetch_row(); $sql2 = "UPDATE usuarios_dados SET ID='$Novo_ID' WHERE ID='$Novo_ID'"; $result2 = $conn->query($sql2); $Novo_ID++; } $sql = "SELECT * FROM usuarios_dados"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo "<tr> <td>$row[ID]</td> <td>$row[Nome_Empresa]</td> <td>$row[Responsavel]</td> <td>$row[Telefone_1]</td> <td>$row[Telefone_2]</td> <td>$row[Email_1]</td> <td>$row[Email_2]</td> <td>$row[Endereço]</td> <td>$row[CEP]</td> <td>$row[Bairro]</td> <td> <form method='post' action='Editar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='EDITAR'> </form> </td> <td> <form method='post' action='Deletar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='DELETAR'> </form> </td> </tr> "; } } else { echo "0 results"; } $conn->close();  
    • Por ILR master
      Boa tarde pessoal, tudo bem ?
       
      Eu uso o tinymce para cadastro de textos no meu siite, porém, quero fazer um sistema para que os colunistas possam fazer o próprio post.
      O problema do tinymce, é que ele mantém a formatação do texto copiado, como tamanho de fonts, negritos, etc... Quero que o usuário cole o texto e a própria textarea limpe a formatação para que ele formate como quiser.
       
      A pergunta é:
       
      O tinymce tem uma opção para desabilitar a formatação quando um texto é colocado?
      Tem alguma função via java ou php para retirar a formatação assim que o texto é colado?
      Ou é melhor usar um outro editor?
       
      Agradeço deste já.
    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.