Jump to content
michelmir

Carregar valores corretamente em uma input text usando evento OnChange do Jquery, AJAX e TypeAhead sem precisar atualizar página

Recommended Posts

Olá!

 

Recentemente fiz uma postagem aqui no fórum a respeito de se carregar valores em um input text baseando-se na opção selecionada em uma select box, onde obtive uma solução. Por conta disso resolvi adicionar um complemento neste  meu código onde o mesmo deve carregar valores corretamente dentro de uma input text utilizando o plugin TypeAhead.js e o evento onchange do Jquery.

 

Como forma de demonstrar a minha dúvida em funcionamento, criei uma página como forma de testar a solução. O que ocorre é que quando seleciona uma opção no select box  "Categorias", o Ajax manda um request para o php script onde o mesmo retorna os valores corretamente em JSON conforme a imagem do console do navegador Chrome abaixo:

 

1777619869_ValoresretornadoscorrentamenteemJSONviaPHPparaAJAX.png.3a589371722bac80543ecbede7ab6708.png 

 

Até aqui os valores relacionados com a opção selecionada no select box "Categorias" são carregados corretamente porém se eu não atualizar a página "F5" e ao mesmo tempo eu selecionar alguma outra opção dentro do select box, o input text carrega além dos valores relacionados, todos os valores não relacionados com a opção selecionada ou seja, o input text somente carrega os valores corretamente se eu atualizar a página em questão.

 

Abaixo uma imagem demonstrando os valores carregados em uma input text quando seleciono uma outra opçao no select box quando não se atualiza a página. Todos os valores não relacionados também são carregados:

 

982033118_valores-carregados-sem-estarem-relacionados-com-a-opo-selecionada.png.5378c310296a85689801d9416010197d.png

 

Abaixo publico o html e os scripts Ajax, Typeahead e PHP que estou utilizando neste projeto:

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- jQuery UI library -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

</head>
<body>

<div class="container">

<br>

<h1>DYNAMIC TWITTER TYPEAHEAD</h1>

<br>
<div class="row">

<?php 
    // Include the database config file 
    include_once 'dbConfig.php'; 
     
    // Fetch all the country data 
    $query = "SELECT * FROM categorias ORDER BY categoria ASC"; 
    $result = $db->query($query); 
?>


<!-- categoria dropdown -->
<div class="col-md-4">
<select id="categoriaFK" name="categoriaFK" class="form-control">
    <option value="">seleciona categoria</option>
    <?php 
    if($result->num_rows > 0){ 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['categoriaID'].'">'.$row['categoria'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">Categoria não encontrada</option>'; 
    } 
    ?>
</select>
</div>

<div class="col-md-4" id="prod">

<div ><input type="text" name="produtos" id="produtos" class="form-control input-lg typeahead" autocomplete="off" placeholder="" /></div>

</div>

<div class="col-md-4">

<div id="imagem" name="imagem"></div>

</div>

</div>
</div>

</body>
</html>

 

No script abaixo, o Ajax envia um request para o script PHP que por sua vez retorna os valores em JSON para o Ajax que envia para o TypeAhead e carrega o input text com valores relacionados. Após selecionar uma opção no input text, o Jquery envia um valor relacionado para a div "#imagem" :

 

$(document).ready(function(){
var produtos;
var nomes = []; // array
var lista = {}; // objeto

$('#categoriaFK').on('change', function(){

var queryID = $(this).val();

   $.ajax({
    url:"fetch.php",
    method:"POST",    
    data:{categoria:queryID},
    dataType:"json",
    success:function(data){
    console.log(data);
    
      $.each(data, function(i, optionHtml){
        $('#produtos').append(optionHtml);
      });
      
      $("#imagem").empty('');
      $(".typeahead").val('');
      produtos = data;
      }
      });
   
 $('.typeahead').typeahead({
 
  source: function(query, result)
  {
   $.each(produtos, function(idx, item){
   
      if(!~nomes.indexOf(item.nomeProduto)) nomes.push(item.nomeProduto);
      lista[item.nomeProduto] = item.imagem;
   });
   return result(nomes);
},
  afterSelect: function (data) {
  var img = lista[data];
  
   $('#imagem').html(img);      

},
	
 });
 
}); 
});

 

Abaixo, o php script que seleciona os valores baseando-se no valor selecionado do select box e os envia em formato JSON para o Ajax:

 

<?php
require_once 'dbConfig.php';

if(!empty($_POST["categoria"])){

	$query = "
		SELECT * FROM produtos WHERE categoriaFK = ".$_POST['categoria']."
	";

	$result = $db->query($query);
	$data = array ();

	if ( $result->num_rows > 0 )
	{
		while($row = $result->fetch_assoc ())
		{
			$data[] = $row;
			
		}

 header("Content-type: application/json; charset=utf-8 cache-control: no-cache, no-store, must-revalidate");
 echo json_encode($data);
 exit();
	}
}
?>

No caso como mencionado acima, nesta página que criei demonstra o funcionamento de todo o código acima, porém acredito que devo modificar o script para que o mesmo carregue valores corretamente quando seleciono alguma opção no select box "Categorias" sem precisar atualizar a página para que o mesmo carregue corretamente. 

 

Como posso proceder? Desde já agradeço a atenção de todos.

Share this post


Link to post
Share on other sites

Após alguns ajustes consegui encontrar uma solução. Após ter criado uma variável chamada "lista" para criar um objeto, fiz um ajuste no evento afterSelect do Typeahead onde após selecionar uma opção dentro do input text o evento Typeahead envia um valor relacionado ao item para dentro da div #imagem. Esta solução pode ser vista em funcionamento aqui

 

Segue o script ajustado:

 

<script type="text/javascript">
  
  	var produtos;
	var lista = {}; // cria o objeto

		$ ( function ()
		{
			$('#categoriaFK').on('change', function(){
				var queryID = $(this).val();

				$.ajax({
					url:"fetch.php",
					method:"POST",
					data: {
						categoria: queryID
					},
					dataType:"json",
					success:function(data)
					{
						console.log(data);
						
						$("#produtos").val ('');
						
						produtos = data;
						
					}
				});
			});

			$('#produtos').typeahead({
				source: function ( query, result )
				{
					result ( $.map(produtos, function (item)
						{
							return item.nomeProduto;
							
						}
					));
					
				},
			
				/* O ajuste foi feito aqui no evento afterSelect */
				
				  afterSelect: function(data) {
       $.each(produtos, function(idx, item){
   
      lista[item.nomeProduto] = item.imagem;
   });
  
   
   var img = lista[data];
  
   $('#imagem').html(img);
   
   
  },						
			});
			
		});
  
</script>

Por fim, essa foi a solução que consegui encontrar. Caso alguém sugira uma modificação mais otimizada fiquem a vontade. Valeu!

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 k9studio
      Olá Amigos,
      tenho essa tabela abaixo e estou apanhando para listar os dados e fazer validação,
      alguém pode ajudar como chamar os dados e validar mostrar o nome somente se estiver visible=on  

       
      CREATE TABLE `system` (   `namesystem` text COLLATE utf8_unicode_ci NOT NULL,   `setting` text COLLATE utf8_unicode_ci NOT NULL,   `value` text COLLATE utf8_unicode_ci NOT NULL,   `order` int(1) NOT NULL,   KEY `namesystem_setting` (`namesystem`(32),`setting`(32)),   KEY `setting_value` (`setting`(32),`value`(32)) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; como os dados estão na tabela:
       
      namesystem setting   value   order (honda)    (name)   (Honda)   1 (honda)    (xtts)   (ok)      0    (honda)   (visible)  (on)      0    (toyota)    (name)   (Toyota)  2 (toyota)    (xtts)   (ok)      0    (toyota)  (visible)  (on)      0    
    • By iguulima
      É possivel realizar uma consulta SQL em duas colunas da mesma tabela usando outra função que não seja o AND ou OR? Segue o meu Select ate agora:
       
      (SELECT * FROM product WHERE comid = $idcom AND status = 'Ativo' AND categ = $category AND nameprod like'%$search%'  ORDER BY id DESC)  
      Por exemplo se eu colocar um AND após buscar o nameprod, no nome do produto não tiver a palavra chave ele também não irá buscar. Ou se colocar um OR ele anulo as outras condições até onde eu sei.
      Iniciante em programação.
    • By fideles
      Caros,
       
      Venho por uma duvida que esta cruel comigo. Explico-lhes.
       
      Tenho um banco de dados contendo exatas 4 colunas (id, codigo, descricao, quantidade) e criei um relatorio no excel que me separa os codigos, neste caso seria 3 abas pq tenho somente 3 codigos internos (S = Solicitar, F = Forneceder, B = Baixado) e criei uma select com GROUP By codigo
       
      Ai no banco eu posso ter 30 codigos com S, 10 com F e 15 com B,
      SELECT * FROM solicitacoes WHERE n_solicitacao = '".$n_solicitacao."' GROUP BY codigo Acontece que essa instrução acima, lista somente a primeira linha de cada codigo, como que eu faço neste caso para ele listar todos codigos? Exibir no caso os 30 codigos com S, os 10 com F e os 15 com B ? 
       
      Estou comendo algo ou meu raciociono esta totalmente equivocado ?
       
    • By Carlos Longo
      Srs Bom dia,
       
      fiz inumeras tentativas para mostrar a imagem com link em:
       <script type="text/javascript"> var imagens =  new Array( '1.jpg', '2.jpg', '3.jpg','4.jpg', '5.jpg', '6.jpg'); var num_img = 6; var img_atual =0; function ChangeImg() { if (img_atual < (num_img - 1) ) { img_atual = img_atual + 1; } else { img_atual = 0; } document["img_apoio"].src = "http://www.ficasimples.com.br/calcfal/prop/" + imagens[img_atual]; var x = setTimeout ("ChangeImg()", 2000); }   </script>  
      ela posteriormente é chamada assim:
      queria que ao clicar na figura fosse chamado o link da figura especifica conforme valor da variavel  imagens[img_atual]/////
      <img name="img_apoio" src="http://www.ficasimples.com.br/calcfal/prop/1.jpg" alt="" border="0"width="190px" height="210px" align="center">  
       
      poderiam me ajudar??
       
      grato
       
      Carlos
    • By iguulima
      Bom dia a todos, tenho em meu banco de dados uma tabela de pedidos, onde nesse pedidos estão salvos as id's dos produtos que foram selecionados pelo usuário, gostaria de saber se tem alguma forma utilizando um while que possa selecionar os produtos mais pedidos dessa tabela, não tenho ideia por onde começar. Consigo listar todos apenas mas não sei como selecionar os que são mais pedidos.
×

Important Information

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