0

Estou tendo problemas com cache em uma página pois são três chamadas no evento de .change(); de 3 input[type='select'] assíncronas com jQuery, porém quando faço uma nova selação no primeiro select, por algum motivo fica cache do antigo valor enviado para a página por assíncrono.

Enfim, existe alguma outra alternativa ao $("#minhaDiv").html(''); para limpar todo o conteúdo da DIV ?

Existem 3 selects com 3 divs:

<html>

<select id='select1' name='select1'>
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>

<select id='select2' name='select2'>
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>

<select id='select3' name='select3'>
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>

<div id='divSelect1'></div>
<div id='divSelect2'></div>
<div id='divSelect3'></div>

<script>
$(document).ready(function(){

$("#divSelect1").on('change', function(){

$('#divSelect2').empty();
$('#divSelect3').empty();

var cat_four_value = $(this).val();

$.ajax({
    type: 'POST',
    url: 'push/' + cat_four_value + '/',
    data: { value: cat_four_value },
    cache: false,
    success: function(data){
        $('#divSelect1').load('select-details/1');
    }
});

}

$("#divSelect2").on('change', function(){

$('#divSelect3').empty();

var cat_four_value = $(this).val();

$.ajax({
    type: 'POST',
    url: 'push/' + cat_four_value + '/',
    data: { value: cat_four_value },
    cache: false,
    success: function(data){
        $('#divSelect2').load('select-details/1');
    }
});

}

$("#divSelect3").on('change', function(){

var cat_four_value = $(this).val();

$.ajax({
    type: 'POST',
    url: 'push/' + cat_four_value + '/',
    data: { value: cat_four_value },
    cache: false,
    success: function(data){
        $('#divSelect3').load('select-details/3');
    }
});

}

);
</script>

</html>
9
  • Não sei como está seu código, pois, não postou. Mas uma alternativa poderia ser utilizar o método remove() do jQuery.
    – LeAndrade
    Commented 20/09/2018 às 22:10
  • @LeAndrade remove(); não apaga também a div ?
    – AngeloJ
    Commented 20/09/2018 às 22:15
  • @sam não resolveu o problema, tá igual a html('').
    – AngeloJ
    Commented 20/09/2018 às 22:18
  • @LeAndrade preciso remover apenas o conteúdo interno mesmo, não apagar a DIV, pois ela não é criada, ela é apenas alimentada com conteúdo no evento.
    – AngeloJ
    Commented 20/09/2018 às 22:22
  • @AngeloJ a sua pergunta quer uma alternativa ao .html(''), no caso, é o .empty(). Agora, se resolveu ou não o seu problema é outra história. :D... mas vamos analisar melhor...
    – Sam
    Commented 20/09/2018 às 22:22

1 Resposta 1

1

Sim. Você pode usar o método .empty(), que remove todos os elementos filhos da div selecionada:

Exemplo:

$("button").click(function(){
    $("#minhaDiv").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="minhaDiv">
   <div>filho 1</div>
   <div>filho 2</div>
</div>
<button>Limpar div</button>

Documentação

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 .