Bug em contador (clonando divs com jQuery)

[Maykel-ctba 233]

Fala galera,

 

Estou com um problema. Tenho um código que, no click de um botão, clona uma div, e adiciono um botão logo depois para removê-la em caso de necessidade.

 

Beleza, funcional. Mas descobri um bug.

 

Se eu executo a seguinte sequencia:

• Clono duas divs dinamicamente (aciono o botão #newAddress 2x)
• Removo a primeira div clonada
• Adiciono uma novamente

 

Resultado: Ele não clona a div, e adiciona um botão no final. Buga tudo.

 

 

HTML:

<div id="divEnderecos">
    <div id="divEndereco00" class="divEndereco">
        <h4>Dados de entrega</h4>
        <input class="form-control" name="txEndereco[0][CEP]" placeholder="Digite o CEP aqui" type="text">
    </div>
</div>
<a href="#" id="newAddress">Adicionar outro endereço</a>

Javascript:

$("#newAddress").click(function(){
    var n = $( ".divEndereco" ).length;
    if(n == 3){
        alert('Não é possível criar novos endereços. Você já está no limite de 3 endereços.');
    }
    else{
        $("#divEndereco00").clone().attr('id', 'divEndereco0'+ n++).insertAfter("#divEndereco0"+(n-2));
        $("<a href=\"#\" class=\"delAddress\" id=\"delAddress0"+(n-1)+"\"><i class=\"fa fa-trash\"></i> Remover endereço</a>").insertAfter("#divEndereco0"+(n-1)+" > h4");
    }
});
$(document).on('click', '.delAddress', function() {
    $(this).parent().remove(); // * Se eu adiciono dois endereços extras, removo o 01 e deixo o 02, e adiciono um novamente, ele cria um botão ao lado do outro.
});

Idéias? :sick:

[Rafael Sirotheau 43]

Seu problema ta sendo essas IDs.... Quando você remove o primeiro, deixando o segundo, ele fica com id="divEndereco02"... Se você for adicionar outro, no .insertAfter do <a> ele vai acaba adicionando nesse divEndereco02, ao invés de ser num próximo...

Enfim... é realmente necessário essas IDs? Porque, dependendo da sua estrutura, da pra deixar tudo só com classe, evitando essa dor de cabeça...

Coloquei seu código no jsFiddle, se a estrutura for essa mesma, fica fácil:

http://jsfiddle.net/d3q91d9p/

abs!

[Maykel-ctba 233]

OBS: Queria muito saber fazer esses jsFiddle, sempre esqueço e é sempre uma mão na roda!

 

----

 

Perfeito! Eu pensei nisso de tirar o ID, mas não sabia como fazer, estava sem ideias! A estrutura é essa mesmo, na verdade dentro da div clonada existem muitos outros campos, como endereço, logradouro, numero, e tal... não copiei junto pra não ficar muito comprido e facilitar a ajuda.

 

Usando seletores complexos o código ficou até mais curto :yes:

 

Muito obrigado novamente, @Rafael!

 

Agora só preciso descobrir como mudar o indice de cada value no input (ex: txEndereco[0][CEP] para o indice de acordo com o número da div), mas isso vou tentar aqui e qualquer coisa crio outro tópico com outro tema ;-)

[Rafael Sirotheau 43]

Esse é um pouco mais complicado pra deixar dinâmico (vai cair no mesmo problema das IDs), mas, de novo, talvez seja desnecessária essa 'dor de cabeça'. Tem muito tempo que não desenvolvo backend, mas, se me lembro bem, da última vez que precisei fazer isso, no PHP, enviei somente []... Não é necessário definir o index.

ficaria txEndereco[][CEP]

[Maykel-ctba 233]

@Rafael, eu já fiz o teste "estático". Criei dois inputs iguais de CEP desta maneira, e não foi.

Posso testar de novo, mas eu lembro de ter testado assim. A única maneira que consegui, sem que os indices se sobrescrevessem, seria numerando o index.

 

A minha idéia é procurar todos os inputs que o name comece com "txEndereco[0]" dentro da divEndereco:last-child. Após encontrar, darei um replace no atributo name delas, trocando txEndereco[0] pelo contador, ou algo assim. Preciso testar direito!

[Rafael Sirotheau 43]

Podes fazer essa substituição antes de submeter o formulário, ao inves de fazer 'on-the-fly', assim, fica melhor...

Ae tu podes fazer dessa forma mesmo, buscando quem comece com essa string.

$('input[name^="txEndereco"]').each(function(i) {
  $(this).attr('name','txEndereco['+i+']');
})

[Maykel-ctba 233]

Ah mas ia ser mesmo antes de submeter o form.

 

Fiz desta forma, bem parecida com o que você fez!

// * Endereços múltiplos
$("#newAddress").click(function(){
    var n = $( ".divEndereco" ).length;
    if(n == 3){
        alert('Não é possível criar novos endereços. Você já está no limite de 3 endereços.');
    }
    else{
        $("#divEnderecos").append($(".divEndereco:eq(0)").clone());
        $(".divEndereco:last-child > h4").after("<a href=\"#\" class=\"btn btn-sm btn-danger delAddress\"><i class=\"fa fa-trash\"></i> Remover endereço</a>");
        $('.divEndereco:last-child input[name^="txEndereco"], .divEndereco:last-child select[name^="txEndereco"], .divEndereco:last-child textarea[name^="txEndereco"]').each(function() {
            spec = $(this).attr('name').replace('txEndereco[0]',"");
            $(this).attr('name','txEndereco['+n+']'+spec);
        })
    }
});
$(document).on('click', '.delAddress', function() {
    $(this).parent().remove();
});

E o array gerado no final:

Array
(
    [txNome] => Maykel
    [txEmail] => teste@seusite.com
    [pwSenha] => admin
    [txCPF] => 9999999999
    [txRG] => 777777777
    [txTelefone] => (41) 8888-2222
    [txDataNascimento] => 22/03/1988
    [txEndereco] => Array
        (
            [0] => Array
                (
                    [CEP] => 828480180
                    [Logradouro] => Rua Gastao Luiz Cruls
                    [Numero] => 1100
                    [Complemento] => 
                    [Bairro] => Alto
                    [Cidade] => Curitiba
                    [Estado] => PR
                    [Referencia] => Vasconcelos alberico
                )

            [1] => Array
                (
                    [CEP] => 80530280
                    [Logradouro] => Rua Deputado Mario de Barros
                    [Numero] => 1700
                    [Complemento] => cj 411
                    [Bairro] => Juveve
                    [Cidade] => Curitiba
                    [Estado] => PR
                    [Referencia] => Prox. Mateus Leme
                )
        )
)