need an help on a jquery script. I have a select that trigger from Ajax a list of options available. Once user click this option if a variable got 1 a HTML div is added, if i change to another value HTML disappear. This script work as well first time: i click a option and div appear, when i click other option disappear but this cycle is completed if i it another time select option this stop working... This is the code:
<script type="text/javascript">
$(document).ready(function() {
request_url = 'opzioni-select';
$.ajax({
url: request_url,
success: function(data){
$('#id_opzione').html("");
$.each(data, function(i, item){
var id = item.id;
var parent_id = item.parent;
var nome_opzione = item.nome_opzione;
var nome_parent = item.nome_parent;
$('#id_opzione').append('<option data-opzione="'+ item.nome_parent +'" data-parent="'+ item.parent +'" id="' + item.nome_opzione +'" value="' + item.id + '">' + item.nome_opzione +'</option>');
});
$(document).on('change', '.opzione', function(){
var parent = $('#id_opzione').find(':selected').data('parent');
var nome_parent = $('#id_opzione').find(':selected').data('opzione');
if(parent != null) {
$('#parent-div').append('<label for="parent-div" class=" control-label col-md-4 text-left">'+ nome_parent +'</label><div class="col-md-6"><input type="text" name="valore_parent" class="form-control"></div><div class="col-md-2"></div>');
} else {
$('#parent-div').hide('fast');
}
});
}
});
});
</script>
I tried to change div id in class and switched to "on('change" instead of call directly the #div with .change( but nothing.
Few problems - you're appending a bunch of options - then delegating for a class that i cant see being created.. Id recommend moving the delegated event to the document ready function. . and using the id of the select - and selecting the option after that using this.
<script type="text/javascript">
$(document).ready(function() {
request_url = 'opzioni-select';
$.ajax({
url: request_url,
success: function(data){
$('#id_opzione').html("");
$.each(data, function(i, item){
var id = item.id;
var parent_id = item.parent;
var nome_opzione = item.nome_opzione;
var nome_parent = item.nome_parent;
$('#id_opzione').append('<option data-opzione="'+ item.nome_parent +'" data-parent="'+ item.parent +'" id="' + item.nome_opzione +'" value="' + item.id + '">' + item.nome_opzione +'</option>');
});
});
$('#id_opzione').on('change', function(){
alert('Changed');
var parent = $('#id_opzione').find(':selected').data('parent');
var nome_parent = $('#id_opzione').find(':selected').data('opzione');
if(parent != null) {
$('#parent-div').append('<label for="parent-div" class=" control-label col-md-4 text-left">'+ nome_parent +'</label><div class="col-md-6"><input type="text" name="valore_parent" class="form-control"></div><div class="col-md-2"></div>');
} else {
$('#parent-div').hide('fast');
}
});
}
});
</script>