Jump to content
SrTunes

JQuery preencher input automaticamente baseado em outro input com BD

Recommended Posts

Boa tarde amigos, sei que há vario tópicos parecidos com esse, com praticamente a mesma dúvida, mas com diferentes resoluções. Mas o motivo de eu ter aberto um tópico novo foi por causa tenho duvida no meu código que não encontrei resposta nos outros tópicos.

 

De antemão informo que meu conhecimento em javascript é muito limitado, por isso peço encarecidamente a paciência e compreensão dos colegas e dede já agradeço a todos. Muito obrigado.

 

Bem, o problema:

 

Tenho um form php com dois campos apenas: "PN do item" e "Descrição".

Para o primeiro campo de input (PN do Item), com a ajuda da internet, implementei um script que a medida que digito ele faz uma busca no BD e autocompleta. Até ai beleza.

O que estou querendo agora é, aproveitando a minha estrutura, fazer com que ao escolher o item do primeiro campo de input, o segundo campo de input me retornasse do BD a descrição deste item automaticamente sem refresh da página.

Isso é possível?

 

Abaixo deixo meus scripts:

<?php
	require_once 'config/conexao.class.php';
    require_once 'config/crud.class.php';

    $con = new conexao(); // instancia classe de conxao
    $con->connect(); // abre conexao com o banco

	$consulta = mysql_query("SELECT pn_item FROM descricao_de_itens"); //Busca da tabela descricao_de_itens o campo pn_item para preencher as opções no form
	$dados ="";
	if(mysql_num_rows($consulta) > 0){
		while($row = mysql_fetch_assoc($consulta)){
			$dados = $dados."\"".$row["pn_item"]."\",";
		}
	}
	$dados = substr($dados,0,-1); // retira a última virgula
?>
<!DOCTYPE html>
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="http://localhost/controle_estoque/css/jquery-ui.css">
		<script src="http://localhost/controle_estoque/js/jquery-3.4.1.js"></script>
		<script src="http://localhost/controle_estoque/js/ui/jquery-ui.js"></script>
		<script>
			$( function(){
				var availableTags = [<?php echo $dados?>];
				$( "#tags" ).autocomplete({
					source: availableTags
				});
			} );
		</script>
        <title></title>
    </head>
    <body>
        <form action="" method="post"><!--   formulario carrega a si mesmo com o action vazio  -->
            
			<div class="ui-widget">
            <label for="tags">PN do Item:</label>
            <input id="tags" type="text" name="nome"/>
            <br />
            <br />
			</div>
            <label>Descri&ccedil;&atilde;o:</label>
            <input type="text" name="descricao"/>
            <br />
            <br />
            <input type="submit" name="cadastrar" value="Cadastrar" />      
        </form>
    </body>
</html>
<?php $con->disconnect(); // fecha conexao com o banco ?>

 

Share this post


Link to post
Share on other sites

Vi que está utilizando a jQuery-UI. Parabéns por isso :-)

 

Você pode utilizar o evento change do autocomplete:

https://api.jqueryui.com/autocomplete/#event-change

 

Com o AJAX da jQuery:

http://api.jquery.com/jQuery.getJSON/

 

Para isso você vai ter uma "página" que vai imprimir apenas o resultado esperado... imagino algo como resgatavalor.php?pn_nome=XPTO e pegar o $_GET pra fazer a devida consulta no banco de dados.

 

Estou meio sem tempo agora pra explicar... tenta aí e posta a versão final pra gente :-D

 

Qualquer coisa, grita.

Share this post


Link to post
Share on other sites
27 minutos atrás, Michael Granados disse:

Vi que está utilizando a jQuery-UI. Parabéns por isso :-)

 

Você pode utilizar o evento change do autocomplete:

https://api.jqueryui.com/autocomplete/#event-change

 

Com o AJAX da jQuery:

http://api.jquery.com/jQuery.getJSON/

 

Para isso você vai ter uma "página" que vai imprimir apenas o resultado esperado... imagino algo como resgatavalor.php?pn_nome=XPTO e pegar o $_GET pra fazer a devida consulta no banco de dados.

 

Estou meio sem tempo agora pra explicar... tenta aí e posta a versão final pra gente :-D

 

Qualquer coisa, grita.

Muito obrigado pela ajuda. A dica o evento change achei bem interessante, só que preciso compreende-la melhor para saber como aplicar.

Então, algumas dúvidas:

Ainda não compreendi a api jQuery.getJSON, mas quando me disse que terei uma "pagina", ai fiquei mais confuso. Vou precisar criar uma pagina em branco para receber o resultado?

Pensei em algo como outra função com onchange, assim que o valor do input é selecionado, o segundo input através de da segunda função percebe a mudança do primeiro e pega o valor que esta lá, aí penso que poderia chamar uma função php para realizar a pesquisa no BD e retornar o valor para o input atravé de jQuery mesmo.

 

Se puder me dar mais algum norte, agradeço.

Share this post


Link to post
Share on other sites
2 horas atrás, Michael Granados disse:

Vi que está utilizando a jQuery-UI. Parabéns por isso :-)

 

Você pode utilizar o evento change do autocomplete:

https://api.jqueryui.com/autocomplete/#event-change

 

Com o AJAX da jQuery:

http://api.jquery.com/jQuery.getJSON/

 

Para isso você vai ter uma "página" que vai imprimir apenas o resultado esperado... imagino algo como resgatavalor.php?pn_nome=XPTO e pegar o $_GET pra fazer a devida consulta no banco de dados.

 

Estou meio sem tempo agora pra explicar... tenta aí e posta a versão final pra gente :-D

 

Qualquer coisa, grita.

Bem, eu não consegui ainda entender como eu pego o valor do input 1 e trabalho em uma pesquisa DB para que me retorne o valor da pesquisa no outro input sem refresh.

Até agora o maximo que consegui foi replicar o valor do input 1 para o input 2 automaticamente com o change, mas não é isso que quero

 

Share this post


Link to post
Share on other sites

Olá @SrTunes,

 

Vamos do zero. Primeiro, vamos entender uma estrutura json. Ela é uma estrutura de natação de objetos que são facilmente parseados/entendidos/interpretados pelo JavaScript. Basicamente é uma notação que deve ser colocada entre chaves. E não é o chaves da SBT não... são os caracteres { e }. Dentro deles você vai ter uma sequência de atributos e valores separados por dois-pontos... Veja o exemplo:

{
  "nome": "Michael",
  "frase": "Amigo novo, vinho novo. É quando envelhece que o beberás com gosto.",
  "idade": 37
}

Perceba que entre cada item existe uma vírgula para separar... As aspas nos atributos fazem parte da notação json. Apesar de o javascript poder interpretar sem a necessidade delas, algumas outras linguagens podem ter problemas com isso, então vamos manter, ok :-)

 

Bom, no exemplo inicial, apontei um inteiro para minha idade. Você pode mesclar outras estruturas como arrays e até outros objetos nessa estrutura, fazendo com que você tenha flexibilidade para montar os dados como achar mais conveniente. Veja o exemplo:

{
  "recurso": "busca",
  "qantidadeTotal": 25,
  "paginas": 5,
  "paginaAtual": 1,
  "proxima": true,
  "anterior": false,
  "busca": [
    {
      "recurso": "tweet",
      "mensagem": "Olá mundo",
      "usuario": "@dgmike"
    },
    {
      "recurso": "tweet",
      "mensagem": "Olá @dgmike",
      "usuario": "@elcio",
      "em resposta a": "@dgmike",
      "links": [
        "https://twitter.com/dgmike",
        "https://twitter.com/elcio"
      ]
    }
  ]
}

E por aí vai... O legal é que para acessar esses dados você utiliza pontos e colchetes... exemplo:

 

items[1].links[0] === "http://twitter.com/dgmike"

 

Mas por que estou falando tudo isso? Porque você vai usar a estrutura para fazer a chamada AJAX, tanto para enviar quanto para receber os dados. Imagine que a chamada AJAX é como você acessar uma página do servidor sem precisar sair da página. Ela vai "por baixo dos panos" utilizando um objeto XMLHttpRequest ou algo similar.

 

Acontece que existem umas três ou quatro formas de fazer essa requisição e tratar o resultado dependendo do navegador e é aí que a jQuery entra, fazendo a abstração e deixando as requisições mais simples.

 

Para fim de exemplo, vou considerar o exemplo acima como um arquivo que consigo acessar no meu servidor como dados.json, vamos ver como isso funciona...

jQuery.ajax({
  type: 'GET',
  url: '/dados.json',
  error: function () {
    alert('ocorreu um problema com a requisicao');
  },
  success: function (dados) {
    alert('sucesso ao resgatar os dados do servidor: ' + dados.recurso);
  }
});

jQuery ainda tem uma forma mais acessível para as requisições mais comuns:

jQuery.get('/dados.json', function (dados) {
  alert('consulta realizada com sucesso:' + dados.recurso );
});

Bom, a pesquisa não precisa de fato ser um arquivo com extensão .json, ela pode ser um script PHP que retorne a estrutura JSON. Vamos a um exemplo:

<?php

$dados = array(
  "recurso" => "tweet",
  "tweet" => array(
    "mensagem" => "Em um ninho de mafagafos",
  ),
);

header("Content-Type: application/json"); // aqui informamos ao servidor que isso é um JSON ;-)
echo json_encode($dados);

Óbvio que seus dados não precisam ser fixos, eles podem vir de um banco de dados realizando uma query talvez filtrando por um dado vindo do $_GET. Veja...

 

<?php

require './conexao.php';

if (!isset($_GET['pesquisa']) || !trim($_GET['pesquisa'])) {
  header('Content-Type: application/json');
  echo json_encode(array('erro' => 'a pesquisa é obrigarória'));
  exit;
}

// só vou abrir a conexao pra usar o banco de fato, o mysql_real_escape_string se baseia no banco que está conectado
$con = new conexao(); // instancia classe de conxao
$con->connect(); // abre conexao com o banco

$prepara = 'SELECT `campo` FROM `tabela` WHERE `campo_pesquisa` = \'%s\' LIMIT 1';
$sql = sprintf($prepara, mysql_real_escape_string($valor)); // evitando SQL Injections ;-)
$resultado = mysql_query($sql);

if (mysql_num_rows($resultado) == 0) {
  $con->disconnect();

  header('Content-Type: application/json');
  echo json_encode(array('erro' => 'a pesquisa não retornou nada'));
  exit;
}

$dados = mysql_fetch_assoc($resultado);
$con->disconnect();

// e, por fim...
header('Content-Type: application/json');
echo json_encode(array('erro' => false, 'dados' => $dados));

Agora, basta acessar a URL /busca.php?pesquisa=javali que teremos um arquivo JSON com os dados do banco de dados.

 

Neste ponto cabe um disclaimer: pare de utilizar as funções mysql_* por questões de segurança, experimente o mysqli_* que tem suporte a versão orientada a objetos ou, se preferir, pule diretamente para PDO.

 

Agora, acoplando o seus inputs...

 

<form action="" method="post">
  <div class="ui-widget">
    <label for="tags">PN do Item:</label>
    <input id="tags" type="text" name="nome" />
  </div>
  <div class="ui-widget">
    <label>Descrição:</label>
    <input id="descricao" type="text" name="descricao" />
  </div>
  <input type="submit" name="cadastrar" value="Cadastrar" />      
</form>

<script>
  $(function(){
    var availableTags = <?php echo json_encode($dados); ?>;

    $("#tags").autocomplete({
      source: availableTags,
      change: function () {
        // aqui vem a mágica
        var valor = this.value;
        if (!$.trim(valor)) {
          return;
        }
        $.getJSON('/busca.php', { busca: valor }, function (dados) {
          $('#descricao').val(dados.resultado); // ou seja lá o que for...
        });
      }
    });
  });
</script>

Aliás, agora pensando aqui... não sei qual o volume de informação que você resgata lá do servidor na primeira requisição, se vale a pena trazer toda a informação e fazer a busca local, sem precisar de requisição extra alguma....

<form action="" method="post">
  <div class="ui-widget">
    <label for="tags">PN do Item:</label>
    <input id="tags" type="text" name="nome" />
  </div>
  <div class="ui-widget">
    <label>Descrição:</label>
    <input id="descricao" type="text" name="descricao" />
  </div>
  <input type="submit" name="cadastrar" value="Cadastrar" />      
</form>

<script>
  $(function(){
    var availableTags = [
      {
        value: "jQuery",
        desc: "the write less, do more, JavaScript library"
      },
      {
        value: "jQuery UI",
        desc: "the official user interface library for jQuery"
      },
      {
        value: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine"
      }
    ];
    
    var selecionado = function (event, ui) {
      if (!ui.item) {
        $('#descricao, #tags').val('');
        return;
      }
      $('#descricao').val(ui.item.desc);
    };

    $("#tags").autocomplete({
      source: availableTags,
      select: selecionado,
      change: selecionado
    });
  });
</script>

Desculpa a colcha de retalhos, mas fui escrevendo conforme as ideias iam surgindo... :-D

 

Qualquer coisa, grita.

 

 

---

Referencias:

http://json.org/

http://api.jquery.com/category/ajax/

http://api.jquery.com/jQuery.getJSON/

https://php.net/json_encode

https://www.php.net/mysqli

https://www.php.net/pdo

Share this post


Link to post
Share on other sites
7 horas atrás, Michael Granados disse:

Olá @SrTunes,

 

Vamos do zero. Primeiro, vamos entender uma estrutura json. Ela é uma estrutura de natação de objetos que são facilmente parseados/entendidos/interpretados pelo JavaScript. Basicamente é uma notação que deve ser colocada entre chaves. E não é o chaves da SBT não... são os caracteres { e }. Dentro deles você vai ter uma sequência de atributos e valores separados por dois-pontos... Veja o exemplo:


{
  "nome": "Michael",
  "frase": "Amigo novo, vinho novo. É quando envelhece que o beberás com gosto.",
  "idade": 37
}

Perceba que entre cada item existe uma vírgula para separar... As aspas nos atributos fazem parte da notação json. Apesar de o javascript poder interpretar sem a necessidade delas, algumas outras linguagens podem ter problemas com isso, então vamos manter, ok :-)

 

Bom, no exemplo inicial, apontei um inteiro para minha idade. Você pode mesclar outras estruturas como arrays e até outros objetos nessa estrutura, fazendo com que você tenha flexibilidade para montar os dados como achar mais conveniente. Veja o exemplo:


{
  "recurso": "busca",
  "qantidadeTotal": 25,
  "paginas": 5,
  "paginaAtual": 1,
  "proxima": true,
  "anterior": false,
  "busca": [
    {
      "recurso": "tweet",
      "mensagem": "Olá mundo",
      "usuario": "@dgmike"
    },
    {
      "recurso": "tweet",
      "mensagem": "Olá @dgmike",
      "usuario": "@elcio",
      "em resposta a": "@dgmike",
      "links": [
        "https://twitter.com/dgmike",
        "https://twitter.com/elcio"
      ]
    }
  ]
}

E por aí vai... O legal é que para acessar esses dados você utiliza pontos e colchetes... exemplo:

 

items[1].links[0] === "http://twitter.com/dgmike"

 

Mas por que estou falando tudo isso? Porque você vai usar a estrutura para fazer a chamada AJAX, tanto para enviar quanto para receber os dados. Imagine que a chamada AJAX é como você acessar uma página do servidor sem precisar sair da página. Ela vai "por baixo dos panos" utilizando um objeto XMLHttpRequest ou algo similar.

 

Acontece que existem umas três ou quatro formas de fazer essa requisição e tratar o resultado dependendo do navegador e é aí que a jQuery entra, fazendo a abstração e deixando as requisições mais simples.

 

Para fim de exemplo, vou considerar o exemplo acima como um arquivo que consigo acessar no meu servidor como dados.json, vamos ver como isso funciona...


jQuery.ajax({
  type: 'GET',
  url: '/dados.json',
  error: function () {
    alert('ocorreu um problema com a requisicao');
  },
  success: function (dados) {
    alert('sucesso ao resgatar os dados do servidor: ' + dados.recurso);
  }
});

jQuery ainda tem uma forma mais acessível para as requisições mais comuns:


jQuery.get('/dados.json', function (dados) {
  alert('consulta realizada com sucesso:' + dados.recurso );
});

Bom, a pesquisa não precisa de fato ser um arquivo com extensão .json, ela pode ser um script PHP que retorne a estrutura JSON. Vamos a um exemplo:


<?php

$dados = array(
  "recurso" => "tweet",
  "tweet" => array(
    "mensagem" => "Em um ninho de mafagafos",
  ),
);

header("Content-Type: application/json"); // aqui informamos ao servidor que isso é um JSON ;-)
echo json_encode($dados);

Óbvio que seus dados não precisam ser fixos, eles podem vir de um banco de dados realizando uma query talvez filtrando por um dado vindo do $_GET. Veja...

 


<?php

require './conexao.php';

if (!isset($_GET['pesquisa']) || !trim($_GET['pesquisa'])) {
  header('Content-Type: application/json');
  echo json_encode(array('erro' => 'a pesquisa é obrigarória'));
  exit;
}

// só vou abrir a conexao pra usar o banco de fato, o mysql_real_escape_string se baseia no banco que está conectado
$con = new conexao(); // instancia classe de conxao
$con->connect(); // abre conexao com o banco

$prepara = 'SELECT `campo` FROM `tabela` WHERE `campo_pesquisa` = \'%s\' LIMIT 1';
$sql = sprintf($prepara, mysql_real_escape_string($valor)); // evitando SQL Injections ;-)
$resultado = mysql_query($sql);

if (mysql_num_rows($resultado) == 0) {
  $con->disconnect();

  header('Content-Type: application/json');
  echo json_encode(array('erro' => 'a pesquisa não retornou nada'));
  exit;
}

$dados = mysql_fetch_assoc($resultado);
$con->disconnect();

// e, por fim...
header('Content-Type: application/json');
echo json_encode(array('erro' => false, 'dados' => $dados));

Agora, basta acessar a URL /busca.php?pesquisa=javali que teremos um arquivo JSON com os dados do banco de dados.

 

Neste ponto cabe um disclaimer: pare de utilizar as funções mysql_* por questões de segurança, experimente o mysqli_* que tem suporte a versão orientada a objetos ou, se preferir, pule diretamente para PDO.

 

Agora, acoplando o seus inputs...

 


<form action="" method="post">
  <div class="ui-widget">
    <label for="tags">PN do Item:</label>
    <input id="tags" type="text" name="nome" />
  </div>
  <div class="ui-widget">
    <label>Descrição:</label>
    <input id="descricao" type="text" name="descricao" />
  </div>
  <input type="submit" name="cadastrar" value="Cadastrar" />      
</form>

<script>
  $(function(){
    var availableTags = <?php echo json_encode($dados); ?>;

    $("#tags").autocomplete({
      source: availableTags,
      change: function () {
        // aqui vem a mágica
        var valor = this.value;
        if (!$.trim(valor)) {
          return;
        }
        $.getJSON('/busca.php', { busca: valor }, function (dados) {
          $('#descricao').val(dados.resultado); // ou seja lá o que for...
        });
      }
    });
  });
</script>

Aliás, agora pensando aqui... não sei qual o volume de informação que você resgata lá do servidor na primeira requisição, se vale a pena trazer toda a informação e fazer a busca local, sem precisar de requisição extra alguma....


<form action="" method="post">
  <div class="ui-widget">
    <label for="tags">PN do Item:</label>
    <input id="tags" type="text" name="nome" />
  </div>
  <div class="ui-widget">
    <label>Descrição:</label>
    <input id="descricao" type="text" name="descricao" />
  </div>
  <input type="submit" name="cadastrar" value="Cadastrar" />      
</form>

<script>
  $(function(){
    var availableTags = [
      {
        value: "jQuery",
        desc: "the write less, do more, JavaScript library"
      },
      {
        value: "jQuery UI",
        desc: "the official user interface library for jQuery"
      },
      {
        value: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine"
      }
    ];
    
    var selecionado = function (event, ui) {
      if (!ui.item) {
        $('#descricao, #tags').val('');
        return;
      }
      $('#descricao').val(ui.item.desc);
    };

    $("#tags").autocomplete({
      source: availableTags,
      select: selecionado,
      change: selecionado
    });
  });
</script>

Desculpa a colcha de retalhos, mas fui escrevendo conforme as ideias iam surgindo... :-D

 

Qualquer coisa, grita.

 

 

---

Referencias:

http://json.org/

http://api.jquery.com/category/ajax/

http://api.jquery.com/jQuery.getJSON/

https://php.net/json_encode

https://www.php.net/mysqli

https://www.php.net/pdo

Bom dia Michael! Cara, que aula você deu agora. Ajudou demais aqui. Já quero te agradecer muito, pois esclareceu muita coisa pra mim com relação a JQuery.

Fiquei com duvida em alguns pontos da sua explicação, pois vi que o que você postou modifica um pouco o que tinha feito. Olha só, neste código que você fez:

$(function(){
    var availableTags = <?php echo json_encode($dados); ?>;

    $("#tags").autocomplete({
      source: availableTags,
      change: function () {
        // aqui vem a mágica
        var valor = this.value;
        if (!$.trim(valor)) {
          return;
        }
        $.getJSON('/busca.php', { busca: valor }, function (dados) {
          $('#descricao').val(dados.resultado); // ou seja lá o que for...
        });
      }
    });
  });

No código acima eu estou enviando via get a variável "valor", estou certo? Mas o que tem nesta variável?

Bem, antes de ler seus post estava fazendo algo assim:

$( function(){
	var availableTags = [<?php echo $dados?>];
	$( "#tags" ).autocomplete({
		source: availableTags,
		change: autoCompleteChanged
	});
} );
function autoCompleteChanged( event, ui){
	var valorItem = $( "#tags").val();
	$( "form" ).submit(function( event ){
		event.preventDefault();
			$.ajax({
				url : 'config/funcoes.php',
				data : {pnitem : valorItem},
				type : 'get',
				dataType : 'json',
				success : function(data){
					$( "#desc").val(data.valor);
				},
			});
	});
}

No código que fiz o que tinha entendido era que "data" era onde eu inseria o dado que enviaria para a function e dela enviaria via get para o código php. (Meu código não funcionou). Fiz duas funções, mas tudo em uma função, como você fez achei bem melhor.

Não encontrei, no código que me apresentou, a ligação entre o dado do primeiro campo com o dado do segundo. Por exemplo, veja se o que entendi esta correto: a variável "availableTags" recebe uma lista do banco de dados, quando começo a digitar no campo 1 ele me dá as opções. Quando escolho uma delas, esse valor escolhido é recebido pela variável valorItem, que no ajax estaria no "data" com o nome de "pnitem". Este data vai para a function, que trataria no codigo php a consulta e me retornaria um valor.

Sabe onde errei?

Será que consegui explicar? :D

 

Muito obrigado mais uma vez.

 

Share this post


Link to post
Share on other sites

@SrTunes

 

Como diria Jack, vamos por partes...

 

Primeira dúvida... Sobre o trecho do $.getJSON('/busca.php', { busca: valor }, fn);

 

Por ser GET, a jQuery vai entender que se trata de um valor para apendar/adicionar/concatenar a sua URL, só que de forma mais segura, então você não precisa se preocupar em escapar caracteres como + ou &. Desta forma, digamos que valor tenha o conteúdo de pipoca. Então a jQuery vai montar a URL como /busca.php?busca=pipoca.

 

Agora, o valor vem de uma instrução um pouquinho mais pra cima... 

var valor = this.value;

No caso, this é o input onde você está colocando o texto e value é o valor desse mesmo input. A jQuery utiliza muito essa notação.

 

Sobre a segunda dúvida, acho que vale a pena analisar o que está sendo enviado para o servidor utilizando a ferramenta de desenvolvimento do seu navegador. Sim, você tem.... rsss...

 

Se estiver no chrome, aperte CTRL+i e vai abrir uma área de desenvolvimento, mas não se assuste... vá até a aba network ou rede em português e veja cada requisição acontecendo... Tem um botão com simbolo de proibido, ele limpará o histórico para facilitar.... limpe-o e faça a sua requisição... veja qual URL ele está tentando acessa e como ele está fazendo...

 

 

Aqui um print do que estou falando... aconteceu um POST na URL do youtube que resultou em um 200 (OK/sucesso).

 

image.png.327d23e930ee58d4fa704451b689b6fb.png

Share this post


Link to post
Share on other sites
Em 21/05/2019 at 12:58, Michael Granados disse:

@SrTunes

 

Como diria Jack, vamos por partes...

 

Primeira dúvida... Sobre o trecho do $.getJSON('/busca.php', { busca: valor }, fn);

 

Por ser GET, a jQuery vai entender que se trata de um valor para apendar/adicionar/concatenar a sua URL, só que de forma mais segura, então você não precisa se preocupar em escapar caracteres como + ou &. Desta forma, digamos que valor tenha o conteúdo de pipoca. Então a jQuery vai montar a URL como /busca.php?busca=pipoca.

 

Agora, o valor vem de uma instrução um pouquinho mais pra cima... 


var valor = this.value;

No caso, this é o input onde você está colocando o texto e value é o valor desse mesmo input. A jQuery utiliza muito essa notação.

 

Sobre a segunda dúvida, acho que vale a pena analisar o que está sendo enviado para o servidor utilizando a ferramenta de desenvolvimento do seu navegador. Sim, você tem.... rsss...

 

Se estiver no chrome, aperte CTRL+i e vai abrir uma área de desenvolvimento, mas não se assuste... vá até a aba network ou rede em português e veja cada requisição acontecendo... Tem um botão com simbolo de proibido, ele limpará o histórico para facilitar.... limpe-o e faça a sua requisição... veja qual URL ele está tentando acessa e como ele está fazendo...

 

 

Aqui um print do que estou falando... aconteceu um POST na URL do youtube que resultou em um 200 (OK/sucesso).

 

image.png.327d23e930ee58d4fa704451b689b6fb.png

 

E ae Michael! Cara, depois de tanto tempo estou de volta.

Seguinte, fica tranquilo que eu sei como funciona as ferramentas de desenvolvedor de página da web. (Valeu mesmo)

 

Caaaara, você fez quase todo o script pra mim. rs Muitíssimo obrigado.

Mas vamos lá, tudo que me explicou aqui foi de extrema valia, linha por linha. Você é muito bom, poderia dar aulas, se já não dá. rs Como falei antes, como não tenho conhecimento em javaScript, é exatamente lá que estou apanhando para entender. Osso.

 

Já saquei como é a requisição get com json e a sua implementação faz o trabalho da requisição certinho. Entendi também como funciona a parte do this.valor, perfeito.

a parte do:

$.getJSON('config/busca.php', { busca: valor }

busca e responde com o valor certinho. Agora como eu pego o dado da resposta que veio assim:

{"erro":false,"dados":{"descricao_item":"Cisco SFP-GE-T"}}

e mando para o campo de id="descricao"? Como funciona a lógica?

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 manigold
      Estou com um pequeno problema nessa parte:
      $monsters = simplexml_load_file($otdir . '/data/monster/monsters.xml') or die('<b>Could not load monsters!</b>'); foreach($monsters->monster as $monster) { $loot = simplexml_load_file($otdir . '/data/monster/' . $monster['file']); if($loot) { if($item = $loot->loot->item){ A pagina mostra a lista de items corretamente mas se eu tenho um item dentro de outro item ,como nesse exemplo:
      <loot> <item id="2148" countmax="100" chance="33750" /> <item id="2148" countmax="100" chance="33750" /> <item id="2672" countmax="5" chance="80000" /> <item id="7399" chance="80" /> <item id="2392" chance="1428" /> <item id="2033" chance="3190" /> <item id="2547" countmax="7" chance="6700" /> <item id="5948" chance="3040" /> <item id="1987" chance="100000"> <!-- bag --> O PROBLEMA É NESSA PARTE <item id="5882" chance="5920" /> <item id="2498" chance="888" /> <item id="7378" countmax="3" chance="8800" /> <item id="2146" chance="5300" /> <item id="2414" chance="1500"/> <item id="2528" chance="2333" /> <item id="7402" chance="2000" /> <item id="2492" chance="730" /> </item> </loot> Os items dentro do item com id 1987 não são mostrados .
      Me desculpem se a explicação não esta muito boa , não entendo nada de php e xml ,eu agradeço se alguem puder me ajudar.
    • By gersonab
      Bom dia.
      utilizava um código para completar o endereço conforme o cep, funcionando perfeitamente, só que preciso pegar o cep caso não tenha, pelo endereço digitado, pesquisando pela internet encontrei o código abaixo, funciona perfeitamente para os dois casos, só que .... no meu formulário tenho dois campos de endereço, um residencial e outro de trabalho, o código que utilizava antes funcionava para os dois campos, erá só mudar o id do campo do formulário, tipo se eu tinha id="logadouro" em um campo no outro id="logadouro1", só que .... no código atualizado para ambas as pesquisas esta forma não funciona, gostaria da ajuda de vocês para este problema.
      código antigo:
      function limpa_formulário_cep() { $("#logradouro").val(""); $("#bairro").val(""); $("#localidade").val(""); $("#uf").val(""); } $("#cep").blur(function() { var cep = $(this).val().replace(/\D/g, ''); if (cep != "") { var validacep = /^[0-9]{8}$/; if(validacep.test(cep)) { $("#logradouro").val("..."); $("#bairro").val("..."); $("#localidade").val("..."); $("#uf").val("..."); $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) { if (!("erro" in dados)) { $("#logradouro").val(dados.logradouro); $("#bairro").val(dados.bairro); $("#localidade").val(dados.localidade); $("#uf").val(dados.uf); } else { limpa_formulário_cep(); alert("CEP não encontrado."); } }); } else { limpa_formulário_cep(); alert("Formato de CEP inválido."); } } else { limpa_formulário_cep(); } }); como podem ver era só duplicar e mudar o id, agora neste ja não consigo
      var inputsCEP = $('#logradouro, #bairro, #localidade, #uf'); var inputsRUA = $('#cep, #bairro'); var validacep = /^[0-9]{8}$/; function limpa_formulário_cep(alerta) { if (alerta !== undefined) { alert(alerta); } inputsCEP.val(''); } function get(url) { $.get(url, function(data) { if (!("erro" in data)) { if (Object.prototype.toString.call(data) === '[object Array]') { var data = data[0]; } $.each(data, function(nome, info) { $('#' + nome).val(nome === 'cep' ? info.replace(/\D/g, '') : info).attr('info', nome === 'cep' ? info.replace(/\D/g, '') : info); }); } else { limpa_formulário_cep("CEP não encontrado."); } }); } // Digitando RUA/CIDADE/UF $('#logradouro, #localidade, #uf').on('blur', function(e) { if ($('#logradouro').val() !== '' && $('#logradouro').val() !== $('#logradouro').attr('info') && $('#localidade').val() !== '' && $('#localidade').val() !== $('#localidade').attr('info') && $('#uf').val() !== '' && $('#uf').val() !== $('#uf').attr('info')) { inputsRUA.val('...'); get('https://viacep.com.br/ws/' + $('#uf').val() + '/' + $('#localidade').val() + '/' + $('#logradouro').val() + '/json/'); } }); // Digitando CEP $('#cep').on('blur', function(e) { var cep = $('#cep').val().replace(/\D/g, ''); if (cep !== "" && validacep.test(cep)) { inputsCEP.val('...'); get('https://viacep.com.br/ws/' + cep + '/json/'); } else { limpa_formulário_cep(cep == "" ? undefined : "Formato de CEP inválido."); } }); desde já agradeço.
    • By helkton
      Bom galera tenho um cardápio, onde cada categoria do cardápio tem um limite de itens que podem ser adicionados, agora preciso limitar os inputs selecionados de acordo com limite de cada categoria..
      olha meu código como esta...
      ////////////////////////////// aqui pego as categorias juntamente com os limites /////////////////////////////////// <?php $sqlConsultExtrasDelivery = "SELECT * FROM extras_delivery_item INNER JOIN extras_delivery ON(extras_delivery_item.idExtraItem = extras_delivery.idExtraDelivery) WHERE extras_delivery_item.idItem = '".$resultItemCardapio->iditemCategoria."' AND extras_delivery_item.checked = '1' "; $conectaConsultExtrasDelivery = $conectaDelivery->query($sqlConsultExtrasDelivery); while($resultExtrasDelivery = $conectaConsultExtrasDelivery->fetch_object()){ $limteExtra = $resultExtrasDelivery->limiteExtra;?> ////////////////////////////// aqui pego as categorias juntamente com os limites /////////////////////////////////// ////////////////////////////// aqui monto os itens de cada categoria /////////////////////////////////// <?php $sqlConsultItensExtras = "SELECT * FROM item_extra WHERE idItemExtra = '".$resultExtrasDelivery->idExtraDelivery."' "; $conectaConsultItensExtras = $conectaDelivery->query($sqlConsultItensExtras); while($resultItensExtras = $conectaConsultItensExtras->fetch_object()){?> ////////////////////////////// aqui monto os itens de cada categoria /////////////////////////////////// <input type="checkbox" class='limited' name="idExtraSelects[]" id="check<?php echo $resultItensExtras->idExtra?>" value="<?php echo $resultItensExtras->idExtra?>"> <label class="custom-control-description" for="check<?php echo $resultItensExtras->idExtra?>"> <?php echo utf8_encode($resultItensExtras->nomeItemExtra)?> </label> <script> $(function(){ var MAX_SELECT = <?php echo $limteExtra?>; // Máximo de 'input' selecionados $('input.limited').on('change', function(){ if( $(this).siblings(':checked').length >= MAX_SELECT ){ this.checked = false; } }); }); </script> <?php }?> <?php }?> não sei o que esta acontecendo pois ele esta limitando a 1 item no geral independente dos itens que seleciono 
    • By dkpimentel
      Olá.
      Estou tendo problemas na lib gd, quado gero um imagem na tela estando em um VM localhost a imagem gera normal, quando envio o projeto para uma VPS a imagem não gera e fica com a tela toda branca, já verifiquei se nas duas versões do php e a lib gd estão iguais, já tentei vários procedimentos e ainda não consegui, alguém pode dar uma ajuda?
       
      Grato pela atenção...
×

Important Information

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