Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Maycon Welliton

Auto-completar com Ajax em Formularios Dinamicos

Por , em Javascript

Recommended Posts

Maycon Welliton    1

Maycon Welliton
Postado

Pessoal, já estou nessa a 15 dias.e não tive progresso..

 

Imagine que eu tenha que criar uma lista de produtos onde eu não sei qual será o tamanho final dela, meus produtos tem cada um deles um "ID" especifico, e cada ID, tem sua propria descrição "NOME", e sempre que eu cadastrar um novo produto no banco de dados, ele terá uma nova id

 

Eu preciso criar um tabela que adiciona os campos dinamicamente(input) e que cada novo campo (input) faça uma nova consulta para completar o campo "Nome", eu encontrei um exemplo funcional nesse link:

 

http://angelorubin.besaba.com/JQUERY/FuncoesCamposDinamicos/#

 

Mas não consegui criar o arquivo

'busca.php';

 

Ele só retorna o primeiro valor.. quando eu adiciono outros Inputs, ele não retorna nada...

 

Alguem pode me ajudar?

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maycon Welliton    1

Maycon Welliton
Postado

Consegui resolver..eu estava enviando a solicitação por POST e recebendo por GET... :)

 

Mas já resolvi o problema....

 

Segue os códigos funcionando:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/1999/xhtml" lang="en" xml : lang="en">
<html>
<head>	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>SimpleTabs</title>
		<script type="text/javascript" src="js/simpletabs_1.3.js"></script>
		
		<!--endereço do jquery -->
		<script type="text/javascript" src="js/jquery-1.11.0.js"	</script>
		<!--endereço do jquery -->
		
		<!--função abrir conteudo em div -->
		
		<script type="text/javascript">
		$(document).ready(function(){
			$("#menulateral a").click(function( e ){
				e.preventDefault();
				var href= $( this ).attr("href");
				$("#conteudo").load( href +" #conteudo");
				});
		</script>
		
	<!--função abrir conteudo em div -->
	
<script>
$(function(){
	
	function removeCampo() {
		$(".removerCampo").unbind("click");
		$(".removerCampo").bind("click", function () {
			if($("tr.linhas").length > 1){
				$(this).parent().parent().remove();
			  }
		  });
	}	
	$("#btn-adicionar").click(function () {
		var num_linhas=$("tr.linhas").length;
		if($("tr.linhas").length < 10){
			novoCampo = $("tr.linhas:first").clone();
			novoCampo.find("input").val("");
			novoCampo.insertAfter("tr.linhas:last");
			novoCampo.find('input:text:first').focus();
			novoCampo.find('input:hidden:first').val(num_linhas);
			removeCampo();
		}
	});	
	//Funcao que busca no banco de dados
	
	$(document).on('change', '#codunidade', function(){
		/* aqui pegamos a url a ser consultada por ajax */
		var url = 'buscaunidade.php';
		/* aqui pegamos o cod(o código que foi digitado dentro do input com id igual a cod) */
		var codunidade = $(this).val();
		/* aqui pegamos o indice do .linhas */
		var indice = $(this).parent().parent().index();
		/* aqui pegamos o objeto .linhas */
		var obj = $(this).parent().parent();
		/* aqui realizamos a consulta ajax*/
		$.ajax({
			type: 'get',
			url: url,
			data: {codunidade: codunidade}, /* aqui vai um objeto com o codigo digitado */
			success: function(unidade){
				/* aqui com o retorno do ajax na pagina buscar.php(exemplo), percorremos o obj e colocamos o valor no input nome */
				$(obj).each(function(){
					$(this).children(':eq(2)').children().val(unidade);
				})
			}
		})
	})
	
	
	/* Aqui não sei se a melhor opção é o evento focusout, adeque a sua necessidade */
	$(document).on('change', '#cod', function(){
		/* aqui pegamos a url a ser consultada por ajax */
		var url = 'busca.php';
		/* aqui pegamos o cod(o código que foi digitado dentro do input com id igual a cod) */
		var cod = $(this).val();
		/* aqui pegamos o indice do .linhas */
		var indice = $(this).parent().parent().index();
		/* aqui pegamos o objeto .linhas */
		var obj = $(this).parent().parent();
		/* aqui realizamos a consulta ajax*/
		$.ajax({
			type: 'get',
			url: url,
			data: {cod: cod}, /* aqui vai um objeto com o codigo digitado */
			success: function(nome){
				/* aqui com o retorno do ajax na pagina buscar.php(exemplo), percorremos o obj e colocamos o valor no input nome */
				$(obj).each(function(){
					$(this).children(':eq(4)').children().val(nome);
				})
			}
		})
	})
	
	$(document).on('change', '#variavel', function(){
		/* aqui pegamos a url a ser consultada por ajax */
		var url = 'buscavariavel.php';
		/* aqui pegamos o cod(o código que foi digitado dentro do input com id igual a cod) */
		var variavel = $(this).val();
		/* aqui pegamos o indice do .linhas */
		var indice = $(this).parent().parent().index();
		/* aqui pegamos o objeto .linhas */
		var obj = $(this).parent().parent();
		/* aqui realizamos a consulta ajax*/
		$.ajax({
			type: 'get',
			url: url,
			data: {variavel: variavel}, /* aqui vai um objeto com o codigo digitado */
			success: function(retorna){
				/* aqui com o retorno do ajax na pagina buscar.php(exemplo), percorremos o obj e colocamos o valor no input nome */
				$(obj).each(function(){
					$(this).children(':eq(6)').children().val(retorna);
				})
			}
		})
	})
	
})
</script>	
				
		<!--função abrir conteudo em div -->
		
		<!--folhas de estilo -->
		<style type="text/css" media="screen">
		@import "css/simpletabs.css";
		@import "css/semtabelas.css";
		</style>
		<!--folhas de estilo -->
		
</head>
<body>	

<div id="tudo">	

	<div id="cabecalho">
			
		<h2 >Menu Funcionarios</h2></span>

	</div> <!fecha cabecalho!>

	<div id="menulateral">
	
					<ul>
						<li><a href='index.html'><span>Pagina Principal</span></a></li>
						<li><a href='pesquisar.php'><span>Localizar</span></a></li>
						<li><a href='menufuncionarios.php'><span>Funcionarios</span></a></li>
						<li><a href='inserirvariaveis.php'><span>Inserir Variaveis</span></a></li>
					</ul>  
	</div><!fecha menulateral!>
	
	<div id="conteudo">


     <form>
            <table border="0" cellpadding="1" cellspacing="1" >
                <tr align="center">
                    <td>Excluir:</td>
					<td>Cod.:</td>
                    <td>Unidade: </td>
                    <td>Matricula:</td>
                    <td>Nome: </td>
                    <td>Cod.Evento:</td>
					<td>Evento:</td>
					<td>Quantidade:</td>
                </tr>
                <tr class="linhas" align="center">
                    <td>
                        <a href="#" class="removerCampo" title="Remover linha">
                            <img src="css/images/icon-close.png" width="11" height="11">
                        </a>
                    </td>
					<td>
                        <input name="index_linha[]" type="hidden" value="1"/>
                        <input type="text" name="codunidade[]" id="codunidade"/ size="10"> <!-- busca -->
                    </td>
                    <td>
                        <input type="text" name="nome_unidade[]" disabled="disabled">
                    </td>
                    <td>
                        <input type="text" name="cod[]" id="cod"/ size="10"> <!-- busca -->
                    </td>
                    <td>
                        <input type="text" name="nome_acesso[]" size="50" disabled="disabled">
                    </td>
                    <td>
                        <input  type="text" name="variavel[]" id="variavel"/ size="4"><!-- busca -->
                    </td>
					<td>
                        <input  type="text" name="nome_retorna[]" disabled="disabled" >
                    </td>
					<td>
                        <input  type="text" name="qtd[]" />
                    </td>
					
                </tr>
                <tr>
                    <td>
                       <input type="button" id="btn-adicionar" value="Adicionar" />                        
                    </td>					
					<td>
                        <input type="submit" id="btn-cadastrar" value="Cadastrar" />
                    </td>
					
                </tr>
               
            </table>
        </form>
    


					
	</div><! fecha div=conteudo !>


	<div id="rodape">Rodape

	</div>


  
</div> <!fecha div=tudo !>

</body>

</html>

<?php
include 'conectar.php';


$cod = $_GET['cod'];

$sel = mysql_query("SELECT * FROM funcionarios WHERE matricula = '{$cod}'") or die(mysql_error());
$cont = mysql_num_rows($sel);
if($cont >= 1){
$res = mysql_fetch_array($sel);
echo $res['nome'];
}else{
echo "Matricula Não Existe!";
}
?>

<?php
include 'conectar.php';


$variavel = $_GET['variavel'];

$sel = mysql_query("SELECT * FROM tipovariavel WHERE codigo = '{$variavel}'") or die(mysql_error());
$cont = mysql_num_rows($sel);
if($cont >= 1){
$res = mysql_fetch_array($sel);
echo $res['descricao'];
}else{
echo "Código Inexistente!";
}
?>

<?php
include 'conectar.php';


$cod = $_GET['cod'];

$sel = mysql_query("SELECT * FROM funcionarios WHERE matricula = '{$cod}'") or die(mysql_error());
$cont = mysql_num_rows($sel);
if($cont >= 1){
$res = mysql_fetch_array($sel);
echo $res['nome'];
}else{
echo "Matricula Não Existe!";
}
?>

Assim eu consegui atribuir Inputs dinamicamente, fazendo consulta simultâneas em um BD com 4 tabelas diferentes, e insiro..

 

Obrigado..


Se alguem quizer os arquivos, disponibilizei os aquivos e a estrutura do BD pelo link:

 

http://www.4shared.com/rar/CsVJbjUiba/Sem_Tabelas.html

 

Fiquem a vontade para alterar e adaptar-lo conforme necessidade..

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito