Ir para conteúdo

POWERED BY:

Arquivado

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

visitante_xp

[Resolvido] .Live() e campos dinamicos

Por , em Javascript

Recommended Posts

visitante_xp    0

visitante_xp
Postado

Iae galera...

 

To fazendo aqui um sistema em que preciso gerar campos para inserir CNPJ e deps que eu inserilos eu preciso que eles me retornem a descrição imediatamente. Consegui isso facilmente. Meu problema é que não consigo coloca-los no lugar exato.

 

Concerteza estou tratando os dados de forma errada, mas preciso que alguem me indique onde estou errando.

$(document).ready(function(){
 $("input[name=campo[]]").live("blur", function(){ 
  var Texto = $("input[name=campo[]]").val();
  $.post("zzz.php", {texto:Texto}, function(data){
   $("input[name=desc_cnpj[]]").val(data);
  });
 });
});

Se alguem tiver alguma sugestão.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Acredito que você está trabalhando com 'vários campos iguais', ne?!

 

então, você está pegando os valores de forma totalmente errada..

 

var Texto = $("input[name=campo[]]").val();
era melhor um:

var Texto = $( this ).val();
se não, o JS nunca vai saber de qual campo você quer, se você sempre informar para ele, um array de objetos.

 

a mesma coisa para:

$("input[name=desc_cnpj[]]").val(data);
prefira percorrer o DOM, com .parent(), e .find()

Compartilhar este post

Link para o post
Compartilhar em outros sites

visitante_xp    0

visitante_xp
Postado

Não estou conseguindo identificar como utilizar tanto o find(); quanto o parent();

 

Talvez não se aplique ao meu caso, sei lá...

 

Meu código esta assim:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery-masked.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("input[name=campo[]]").live("blur", function(){ 
  var Texto = $(this).val();
  $.post("zzz.php", {texto:Texto}, function(data){
   $("input[name=desc_cnpj[]]").val(data);
  });
 });
});

function addCampos() 
{
 var qtdeCampos = document.getElementById("campo").value;
 var qtCamp = document.getElementsByName("campo[]");
 
 for(y=qtCamp.length; y<qtdeCampos; y++)
 {
  var i = y+1;
  
  var objPai = document.getElementById("campoPai");
  //Criando o elemento DIV;
  var objFilho = document.createElement("div");
  //Definindo atributos ao objFilho1:
  objFilho.setAttribute("id","filho"+i);
  //Inserindo o elemento no pai:
  objPai.appendChild(objFilho);
  //Escrevendo algo no filho recém-criado:
  document.getElementById("filho"+i).innerHTML = "<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\"><tr><td>CNAE"+i+"</td><td><input type='text' name='campo[]' id=\"cnae"+i+"\" /></td></tr><tr><td>Descrição CNPJ:</td><td><input type=\"text\" name=\"desc_cnpj[]\" id=\"desc_cnpj"+i+"\" /></td></tr><tr><td>Descrição Contratual:</td><td><input type=\"text\" name=\"desc_cont[]\" id=\"desc_cont"+i+"\" /></td></tr><tr><td colspan=\"2\"><input type='button' onclick='removerCampo("+i+")' value='Apagar campo'></td></tr></table><br />";
 }
}

function removerCampo(id) 
{
 var objPai = document.getElementById("campoPai");
 var objFilho = document.getElementById("filho"+id);
 //Removendo o DIV com id específico do nó-pai:
 var removido = objPai.removeChild(objFilho);
}

</script>
<body>

<input type="text" name="campo" id="campo" /><input type="button" name="botao" id="botao" value="Click" onclick="addCampos();" />

<div id="campoPai"></div>


</body>
</html>

Só me de a certeza de que é isso que devo usar.

 

OFF: Gosto particulamente quando você posta em minhas duvidas @William... Tu num da nada mastigado...rsrs... Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim cara, vai ser .parent() e .find() que vai resolver o teu problema..

 

tô analisando teu código aqui, dava pra melhorar ele bastante..

 

já que tem jQuery na parada, dava para aproveitar o FW melhor... mas tudo bem ^_^

 

pensa assim:

 

 

-> estou disparando uma função no evento onblur de um input $( this )

-> esse input está dentro de uma TD .parent()

-> essa TD tá dentro de uma TR .parent()

-> essa TR está dentro de uma TABLE .parent()

 

eu preciso:

 

-> Pegar o campo 'tal', que está na mesma tabela do meu input que disparou a função .find()

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Legal o loop que você fez, porém:

-> não exclui tabela, se informar um valor menor que o numero atual delas

-> criando DIVs, e IDs demais.. muito complicado

-> mal uso das aspas

 

uma implementaçãozinha que fiz aqui:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("input[name='cnae[]']").live('blur', function(){
		var cnae = $( this ).val();
		var tr = $( this ).parent('td').parent('tr');
		var table = $( tr ).parent('tbody'); 

		
		var inputs = $( table ).find("input[name='desc_cont[]']").val( cnae );
	});
	$("input[name='apagar_campo']").live('click',function(){
		var tr = $( this ).parent('td').parent('tr');
		var table = $( tr ).parent('tbody');
		
		$( table ).remove();
	});
	$("input[name='add_campos']").click(function(){
		var qnts = $("input[name='qnts']").val();	
		var total = $("input[name='cnae[]']").length;
		
		if( qnts<total )
		{
			var table = $("#campoPai").find('table');

			for( var i=total;i>qnts;i-- )
			{
				$( table ).eq( i-1 ).remove();
			}
		}
		else
		{
			for( var y=total; y<qnts; y++ )
			{
				var i = y+1;
				$('#campoPai').append('<table border="1" cellpadding="0" cellspacing="0"><tbody>'+
				'<tr><td>CNAE'+i+'</td><td><input type="text" name="cnae[]" /></td></tr>'+
				'<tr><td>Descrição CNPJ:</td><td><input type="text" name="desc_cnpj[]" /></td></tr>'+
				'<tr><td>Descrição Contratual:</td><td><input type="text" name="desc_cont[]" /></td></tr>'+
				'<tr><td colspan=2><input type="button" name="apagar_campo" value="Apagar campo"></td></tr>'+
				'</tbody></table>');
			}
		}
	});
});
</script>
</head>
<body>
	<input type="text" name="qnts" maxlength="2" /><input type="button" name="add_campos" value="Click" />

	<div id="campoPai">
	
	</div><!-- /campoPai -->
</body>
</html>
agora vai de você melhorar esse script :lol:

 

Atente para a linha:

var inputs = $( table ).find("input[name='desc_cont[]']").val( cnae );
coloquei apenas para mostrar, como chegar até o input..

no caso, você não vai colocar o cnae ai, mas sim o teu retorno da requisição ajax.

 

^_^

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