Array em JQuery

JoaoRobertoo · Dezembro 18, 2014

Bom dia, Pessoal

Estou com um problema que já fiquei por horas pesquisando sobre o assunto e não consegui de forma alguma implementar, meu ultimo caso era ter que abrir um tópico..

Vamos lá, estou com problema em um input que é inserido dinamicamente dentro do meu form via JQuery, ele vem como (name="nome[]"), e a pessoa vai inserindo isso dinamicamente conforme a necessidade, até ai tudo bem, isso funciona... agora eu estou tentando fazer com que conforme a pessoa coloque o nome, seja preenchido automaticamente o telefone e email... ai que está o problema, do jeito que eu fiz ele não funciona com esse campo dinâmico, somente se o campo não for um array.

Esse abaixo é o JQuery para colocar dinamicamente o campo, MIL perdoes por estar assim, tudo bagunçado, mais praticamente ele coloca 2 select, e 3 inputs (nome, telefone, email), como array (nome[], telefone[], email[])

$(document).ready(function(){  
    $("#botao-mais-convidados").click(function( e ){ 
        var contador = $("input[name='confirma']");
        $('#inputs_adicionais').append( '<label><td><select required name="status-convidados[]" id="input-status-convidados"><option value="">Status</option><option value="Presente">Presente</option><option value="Ausente">Ausente</option><option value="Substituído">Substituído</option></select></td><td><input type="text" name="nome[]" placeholder=" Nome" id="input-nome-convidados" required/></td><td><select required name="departamento[]" id="input-departamento-convidados"><option value="">Departamento</option><option value="Compras">Compras</option><option value="CRC">CRC</option><option value="PCP">PCP</option><option value="TI">TI</option><option value="Logistica">Logistica</option><option value="Comercial">Comercial</option><option value="Diretoria">Diretoria</option><option value="Financeiro">Financeiro</option><option value="DHO">DHO</option><option value="Marketing">Marketing</option></select></td><td><input type="text" name="telefone[]" placeholder=" Telefone" id="input-telefone-convidados" required/></td><td><input type="email" name="email[]" placeholder=" E-mail" id="input-email-convidados" required/></td><td><a><input type="button" class="remove" id="botao-menos-convidados"  onClick="delValue()" value="x" /></a></td></label>' ); 
    });

Agora o JQuery com o AJAX que não consigo fazer funcionar.

$(document).ready(function(){
            $("input[name='nome']").blur(function(){
                var email = $("input[name='email']");
                var telefone = $("input[name='telefone']");
                var departamento = $("select[name='departamento']");

                $( email ).val('Carregando...');
                $( telefone ).val('Carregando...');
                $( departamento ).val('Carregando...');

                    $.getJSON(
                        'busca_cliente.php',
                        { nome: $( this ).val() },
                        function( json )
                        {
                            $( email ).val( json.email );
                            $( telefone ).val( json.telefone );
                            $( departamento ).val( json.departamento );
                        }
                    );
		});
	});

E o busca_cliente.php

<?php
	/**
	 * função que devolve em formato JSON os dados do cliente
	 */
	function retorna( $nome, $db )
	{
		$sql = "SELECT `id_usuario`, `nome`, `email` , `telefone` , `departamento`
			FROM `usuario` WHERE `nome` = '{$nome}' ";
 
		$query = $db->query( $sql );
 
		$arr = Array();
		if( $query->num_rows )
		{
			while( $dados = $query->fetch_object() )
			{
				$arr['email'] = utf8_encode($dados->email);
                $arr['telefone'] = utf8_encode($dados->telefone);
                $arr['departamento'] = utf8_encode($dados->departamento);
			}
		}
		else
			$arr['email'] = 'Não encontrado! Favor inserir';
 
		return json_encode( $arr );
	}
 
/* só se for enviado o parâmetro, que devolve os dados */
if( isset($_GET['nome']) )
{
	$db = new mysqli('127.0.0.1', 'root', 'DYNAMIC11', 'sistemaata');
	echo retorna( filter ( $_GET['nome'] ), $db );
}
 
function filter( $var ){
	return $var;//a implementação desta, fica a cargo do leitor
}

Gente, sério, já pesquisei bastante, não é por preguiça... estou vindo aqui no fórum não para vocês me darem as coisas de mão beijadas, só preciso de uma luz de como eu posso resolver isso, já vi que tem que usar o method each()... porém não consegui...

Usei o seguinte link para implementar: http://wbruno.com.br/ajax/input-preenche-formulario-ajax/

Então créditos para ele.

Espero que alguém me ajude,

Obrigado desde já.

William Bruno · Dezembro 18, 2014

troca aqui:

$(document).ready(function(){
            $("input[name='nome']").blur(function(){
                var email = $("input[name='email']");
                var telefone = $("input[name='telefone']");
                var departamento = $("select[name='departamento']");

por

$(document).ready(function(){
            $("input[name='nome[]']").on('blur', function(){
                var $parent = $(this).parents('label');

                var email = $parent.find("input[name='email[]']");
                var telefone = $parent.find("input[name='telefone[]']");
                var departamento = $parent.find("select[name='departamento[]']");

Mas 'label', deveria ser um por campo, troca por tr ou por fieldset.

Ai vai ficar melhor teu html.

JoaoRobertoo · Dezembro 18, 2014

Ok, troquei por fieldset, deslize meu, porém não funcionou o ajax.

$(document).ready(function(){
            $("input[name='nome[]']").on('blur', function(){
                var $parent = $(this).parents('fieldset');

                var email = $parent.find("input[name='email[]']");
                var telefone = $parent.find("input[name='telefone[]']");
                var departamento = $parent.find("select[name='departamento[]']");

Alguma luz ?

William Bruno · Dezembro 18, 2014

trocou ali tb?

$('#inputs_adicionais').append( '<fieldset><td><select required name="status-convidados[]" id="input-status-convidados">

? o que aparece agora no console de erros ?

Ctrl + Shift + J ?

JoaoRobertoo · Dezembro 18, 2014

Sim sim, troquei ai também...

Failed to load resource: net::ERR_CACHE_MISS

JoaoRobertoo · Dezembro 18, 2014

Coloquei um alert, só pra ver se esta entrando dentro da função, após o 'blur', e nada também, fiz o seguinte...

$(document).ready(function(){
            $("input[name='nome[]']").on('blur', function(){
                var $parent = $(this).parents('fieldset');
                
                alert("Teste!");

                ...

Ele nem joga esse alert na tela...

William Bruno · Dezembro 19, 2014

Faz assim:

$("#inputs_adicionais").on('blur', "input[name='nome[]']", function(){

tinha esquecido de fazer o delegate.

JoaoRobertoo · Dezembro 19, 2014

Opa Bruno, obrigado desde já da força que tu ta me dando.

Deu certo, só que não, rsrs

Agora quando eu insiro o campo do nome, ele completa TODOS os outros inputs que foram inseridos dinamicamente, fica meio difícil de explicar, rsrs

Fiz essa GIF exemplificando o que acontece. (Não sei se é permitido gyazo aqui, se não for, me alertar)

http://gyazo.com/1e2b07bc91f0598141779181f8335f19

Se você souber o que é, será de grande ajuda, eu já estou tentando modificar aqui pra ver se resulta em algo.

Att,

William Bruno · Dezembro 19, 2014

Sim sim.. por isso q tem o .parent() e .find() lá em cima:

$(document).ready(function(){
            $("#inputs_adicionais").on('blur', "input[name='nome[]']", function(){
                var $parent = $(this).parents('fieldset');

                var email = $parent.find("input[name='email[]']");
                var telefone = $parent.find("input[name='telefone[]']");
                var departamento = $parent.find("select[name='departamento[]']");

Sem eles vai acontecer isso mesmo.

JoaoRobertoo · Dezembro 19, 2014

O meu está assim mesmo, do jeito que você colocou, segue

$(document).ready(function(){
            $("#inputs_adicionais").on('blur', "input[name='nome[]']", function(){
                var $parent = $(this).parents('fieldset');
                
                var email = $parent.find("input[name='email[]']");
                var telefone = $parent.find("input[name='telefone[]']");
                var departamento = $parent.find("select[name='departamento[]']");

                $( email ).val('Carregando...');
                $( telefone ).val('Carregando...');
                $( departamento ).val('Carregando...');

                    $.getJSON(
                        'busca_cliente.php',
                        { nome: $( this ).val() },
                        function( json )
                        {
                            $( email ).val( json.email );
                            $( telefone ).val( json.telefone );
                            $( departamento ).val( json.departamento );
                        }
                    );
		});
	});

William Bruno · Dezembro 19, 2014

Tá.. então o problema é o html.

Como está ?

JoaoRobertoo · Dezembro 19, 2014

Vou postar somente a parte dos convidados/participantes, senão iria ficar muito poluido.

<tr>			
                    <td><select required name="status-responsavel" id="input-status-convidados" >
                        <option value="">Status</option>
                        <option value="Presente">Presente</option>
                        <option value="Ausente">Ausente</option>
                        <option value="Substituído">Substituído</option>
                    </select></td>
                    
                    <td><input type="text" name="nome-responsavel" id="input-nome-convidados" value="<?php echo $row_DadosUsr['nome']; ?>" required/></td>
                    
                    <td><select required name="departamento-responsavel" id="input-departamento-convidados">
                        <option><?php echo $row_DadosUsr['departamento']; ?></option>
                        <option value="Compras">Compras</option>
                        <option value="CRC">CRC</option>
                        <option value="PCP">PCP</option>
                        <option value="TI">TI</option>
                        <option value="Logistica">Logistica</option>
                        <option value="Comercial">Comercial</option>
                        <option value="Diretoria">Diretoria</option>
                        <option value="Financeiro">Financeiro</option>
                        <option value="DHO">DHO</option>
                        <option value="Marketing">Marketing</option>
                    </select></td>
                    
                    <td><input type="text" name="telefone-responsavel" placeholder=" Telefone" id="input-telefone-convidados" value="<?php echo $row_DadosUsr['telefone']; ?>"required/></td>
                    
                <td>
                    <input type="email" name="email-responsavel" id="input-email-convidados" value="<?php echo $row_DadosUsr['email']; ?>" required/></td>
					
					<fieldset>  <input type="button" name="add" id="botao-mais-convidados"  onClick="addValue()" value="+" /></fieldset>  
		</tr>
					<fieldset id="inputs_adicionais" ></fieldset>
		</div>

Primeiramente eu tenho um campo fixo, que é o responsável, por isso ele não é colocado dinamicamente, ele está funcionando o ajax lindamente, agora depois dele vem o <fieldset id="inputs_adicionais" ></fieldset>, que é aonde os inputs dinamicos são inseridos.

William Bruno · Dezembro 19, 2014

Como está o script de inserção dos inputs dinâmicos ?

JoaoRobertoo · Dezembro 19, 2014

Segue,

$(document).ready(function(){  
    $("#botao-mais-convidados").click(function( e ){ 
        $('#inputs_adicionais').append( '<fieldset><td><select required name="status-convidados[]" id="input-status-convidados"><option value="">Status</option><option value="Presente">Presente</option><option value="Ausente">Ausente</option><option value="Substituído">Substituído</option></select></td><td><input type="text" name="nome[]" placeholder=" Nome" id="input-nome-convidados" class="nome" required/></td><td><select required name="departamento[]" id="input-departamento-convidados"><option value="">Departamento</option><option value="Compras">Compras</option><option value="CRC">CRC</option><option value="PCP">PCP</option><option value="TI">TI</option><option value="Logistica">Logistica</option><option value="Comercial">Comercial</option><option value="Diretoria">Diretoria</option><option value="Financeiro">Financeiro</option><option value="DHO">DHO</option><option value="Marketing">Marketing</option></select></td><td><input type="text" name="telefone[]" placeholder=" Telefone" id="input-telefone-convidados" required/></td><td><input type="email" name="email[]" placeholder=" E-mail" id="input-email-convidados" required/></td><td><a><input type="button" class="remove" id="botao-menos-convidados"  onClick="delValue()" value="x" /></a></td></fieldset>' ); 
    });  
  
	$('#inputs_adicionais').delegate('a','click',function( e ){  
        e.preventDefault();  
        $( this ).parent('fieldset').remove(); 		
    });  
});

William Bruno · Dezembro 19, 2014

Tá quebrado esse html. Faz assim:

$('#inputs_adicionais').append( '<tr><td><select required name="status-convidados[]" id="input-status-convidados"><option value="">Status</option><option value="Presente">Presente</option><option value="Ausente">Ausente</option><option value="Substituído">Substituído</option></select></td><td><input type="text" name="nome[]" placeholder=" Nome" id="input-nome-convidados" class="nome" required/></td><td><select required name="departamento[]" id="input-departamento-convidados"><option value="">Departamento</option><option value="Compras">Compras</option><option value="CRC">CRC</option><option value="PCP">PCP</option><option value="TI">TI</option><option value="Logistica">Logistica</option><option value="Comercial">Comercial</option><option value="Diretoria">Diretoria</option><option value="Financeiro">Financeiro</option><option value="DHO">DHO</option><option value="Marketing">Marketing</option></select></td><td><input type="text" name="telefone[]" placeholder=" Telefone" id="input-telefone-convidados" required/></td><td><input type="email" name="email[]" placeholder=" E-mail" id="input-email-convidados" required/></td><td><a><input type="button" class="remove" id="botao-menos-convidados"  onClick="delValue()" value="x" /></a></td></tr>' );

e ai:

var $parent = $(this).parents('tr');

JoaoRobertoo · Dezembro 19, 2014

Caraaa, eu não tenho nem como te agradecer, PERFEITO

Funcionou certinho... esse é meu primeiro código em PHP + MySQL + ...

Pretendo melhorar nesses quesitos...

Sério, não tenho nem como agradecer o quão paciente você foi comigo

Att,

João Roberto

Arquivado

Array em JQuery

Recommended Posts

JoaoRobertoo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JoaoRobertoo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JoaoRobertoo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JoaoRobertoo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JoaoRobertoo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JoaoRobertoo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JoaoRobertoo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JoaoRobertoo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JoaoRobertoo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante