The $.ajax
function is working correctly, but the return of the data being inserted into the div is being duplicated when the user clicks the button several times. I tried to use .remove()
, e.preventDefault();
, stopPropagation();
, bind()
and others, but nothing prevented duplicity from div
.
What can I put to avoid duplicating the 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);
},
});
});