2

A função $.ajax está funcionando corretamente, mas o retorno dos dados que estão sendo inseridos dentro da div <#exibeCep> está sendo duplicando quando o usuario clica varias vezes no botão. Tentei usar .remove(), e.preventDefault();, stopPropagation();, bind() e outros, mas nada evitou a duplicidade da div. O que posso colocar para evitar a duplicação da div ?

<div id="exibeCep" class="conf_frete">  <h1>Escolha a opção do frete</h1>  </div>

    $('#buscafrete').click(function(e) { 


    e.preventDefault();
    e.stopPropagation();
    cep = $('#cep').val();
    $.ajax({
        type:'GET',
        url: "{% url 'get_frete' %}",
        dataType: "json",
        data: {
            data:cep,
            csrfmiddlewaretoken:'{{csrf_token}}',
        },        
        success: function(retorno){

            if(retorno['sedex_cod_error'] == -3 || retorno['pac_cod_error'] == -3){
                $('<label><input type="radio" name="zipcode" id='+'sedex'+' value='+'CEP de destino invalido'+'/>'+
                    'CEP de destino invalido.'+'</label>').appendTo('#exibeCep');
            }else
                {
                $('<label><input type="radio" name="zipcode" checked id='+'sedex'+' value='+retorno['Sedex']+'/>'+
                    retorno['Sedex']+' ( '+'Sedex'+' ) '+'</label>').appendTo('#exibeCep');
                $('<label><input type="radio" name="zipcode" id='+'sedex'+' value='+retorno['Pac']+'/>'+retorno['Pac']+' ( '+'Pac'+' ) '+'</label>').appendTo('#exibeCep');           
            } 
        },

        error: function(jqXHR, textStatus, errorThrown){
            //alert("FALHOU");
            console.log('Error');
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        },
    });

});

2 Respostas 2

4

Crie uma div para receber a resposta Ajax:

<div id="exibeCep" class="conf_frete">
    <h1>Escolha a opção do frete</h1>
    <div id="cepAjax"></div>
</div>

Então use-á para mostrar a resposta Ajax:

success: function(retorno){
    $('#cepAjax').empty();
    //resto do seu código aqui, usando .appendTo('#cepAjax');

Seguindo minha sugestão acima você irá esvaziar o container da resposta Ajax antes de populá-lo com os elementos gerados a partir da nova resposta.


Ou para evitar que o botão seja clicado várias vezes:

$('#buscafrete').click(function(e) { 
   this.disabled = true;

Você pode reabilitá-lo dentro do success/error para permitir mais de uma busca, e combiná-lo com a primeira parte da resposta.

Por fim, fiz uma leve reescrita do seu código, utilizando as sugestões acima e adicionando alguns comentários:

$('#buscafrete').click(function(e) { 
    e.preventDefault();
    this.disabled = true; //desabilita o botão após clicado

    var cep = $('#cep').val(); //use "var" para não criar globais
    $.ajax({
        type:'GET',
        url: "{% url 'get_frete' %}",
        dataType: "json",
        data: {
            data:cep,
            csrfmiddlewaretoken:'{{csrf_token}}',
        },
        context: this, //passa a referência "this" do escopo atual para o "this" dos callbacks
        success: function(retorno){
            this.disabled = false; //reabilita botão de busca
            $('#cepAjax').empty(); //esvazia a div de resposta antes de re-popular

            var invalido = retorno['sedex_cod_error'] == -3 || retorno['pac_cod_error'] == -3;

            //refatorei algumas partes comuns do seu if/else para diminuir a repetição
            var $lblSedex = $('<label><input type="radio" name="zipcode" id="sedex"></label>');
            $lblSedex.find('#sedex').val(invalido ? 'CEP de destino invalido' : retorno['Sedex']);
            $lblSedex.append(invalido ? 'CEP de destino invalido.' : retorno['Sedex']+' ( Sedex )');
            $lblSedex.appendTo('#cepAjax');
            if (!invalido) {
                //Obs.: você tinha IDs duplicados aqui, o que é inválido (o radio do Pac também tinha ID "sedex") então o removi.
                //Verifique se a estilização e comportamento continuam OK
                $('<label><input type="radio" name="zipcode" value="'+retorno['Pac']+'">'+retorno['Pac']+' ( Pac ) </label>').appendTo('#cepAjax');
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            //alert("FALHOU");
            this.disabled = false; //reabilita botão de busca
            console.log('Error');
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });

});

Você não tem que seguir a risca o código acima, foi só para demonstrar algumas possíveis melhorias. Caso futuramente você deseje tratar CEPs inválidos de uma forma completamente diferente de CEPs válidos, seria interessante manter o seu if/else original.

4
  • Isso não vai impedir o ajax de ser enviado múltiplas vezes. Commented 18/02/2014 às 18:14
  • Pelo que entendi a duplicação é na UI, de qualquer forma vou melhorar a resposta agora que vi o HTML. Commented 18/02/2014 às 18:15
  • Funcionou de primeira !!! Valeu pela ajuda. Obrigado :) Vou estudar oque colocou no codigo pois preciso aprender isso ai. Valeu mesmo
    – Ricardo
    Commented 18/02/2014 às 18:49
  • @Ricardo sem problemas, pode marcar a resposta como aceita? Valeu. =] Commented 18/02/2014 às 18:51
0

Ao invés de utilizar o método appendTo, tente utilizar o método .html() Exemplo:

$("#exibeCep").html('<label><input type="radio" name="zipcode" id='+'sedex'+' value='+'CEP
                     + 'de destino invalido'+'/>'+'CEP de destino invalido.'+'</label>');

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .