I'm having problems with caching on a page since there are three calls in the event of .change();
3 input[type='select']
asynchronous with jQuery
, but when I redo the first select
, for some reason it gets cache of the old value sent to the page by asynchronous.
Anyway, is there any alternative to $("#minhaDiv").html('');
to clear the entire contents of DIV
?
There are 3 selects with 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>