My combo box when adding new record works well its dependency but when editing it does not load the subcategory or the second combo, it remains empty and if I keep it that way it keeps me null the value, the only way to activate or to select again the 1st combo is changed and the second one is loaded and also the name of my photo does not load to edit it or reload it.
$('.showdata').on('click', '.item-edit', function(){
var id = $(this).attr('data');
$('#myModal').modal('show');
$('#myModal').find('.modal-title').text('Editar Producto');
$('#myForm').attr('action', '<?php echo base_url() ?>producto/updateProduct');
$.ajax({
type: 'ajax',
method: 'get',
url: '<?php echo base_url() ?>producto/editProduct',
data: {id: id},
async: false,
dataType: 'json',
success: function(data){
$('select[name=txtId]').val(data.cat_id);
$('select[name=txtSubId]').val(data.sub_id);
$('input[name=txtCodigo]').val(data.pr_codigo);
$('input[name=txtProducto]').val(data.pr_nombre);
$('textarea[name=txtDescripcion]').val(data.pr_descripcion);
$('input[name=txtProdId]').val(data.pr_id);
$('input[name=txtCantidad]').val(data.pr_cantidad_stock);
$('input[name=txtCatalogo]').val(data.pr_precio_catalogo);
$('input[name=txtOferta]').val(data.pr_precio_oferta);
$('input[name=txtFoto]').val(data.pr_foto);
},
error: function () {
alert('No se puede editar el Registro');
}
});
});
$(document).ready(function () {
$.getJSON('<?php echo base_url() ?>employee/showAllEmployee', function (data) {
var items = '<option value="" selected="" disabled="">-- Elija una Categoria --</option>';
$.each(data, function (name, value) {
items += "<option value='" + value.cat_id + "'>" + value.cat_nombre + "</option>";
});
$("#categoria").html(items);
$('#categoria').change(function () {
var cat = $('#categoria').val();
//subcat(cat);
$.getJSON('<?php echo base_url() ?>subcategoria/showAllSubCat', {id: cat}, function (data) {
var items = '<option value="" selected="" disabled="">-- Elija una Subcategoria --</option>';
$.each(data, function (name, value) {
items += "<option value='" + value.sub_id + "'>" + value.sub_nombre + "</option>";
});
$("#subcategoria").html(items);
});
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form id="myForm" action="" method="post" class="form-horizontal" enctype="multipart/form-data">
<input type="hidden" name="txtProdId" value="0">
<div class="form-group">
<label for="category" class="label-control col-md-4">Nombre categoría</label>
<div class="col-md-8">
<select class="form-control col-md-4" for="name" name="txtId" id="categoria">
</select>
</div>
</div>
<div class="form-group">
<label for="subcategory" class="label-control col-md-4">Nombre subcategoría</label>
<div class="col-md-8">
<select class="form-control col-md-4" for="name" name="txtSubId" id="subcategoria">
</select>
</div>
</div>
<div class="form-group">
<label for="codig" class="label-control col-md-4">Codigo</label>
<div class="col-md-8">
<input type="text" name="txtCodigo" class="form-control">
</div>
</div>
<div class="form-group">
<label for="name" class="label-control col-md-4">Nombre Producto</label>
<div class="col-md-8">
<input type="text" name="txtProducto" class="form-control">
</div>
</div>
<div class="form-group">
<label for="description" class="label-control col-md-4">Descripción</label>
<div class="col-md-8">
<textarea class="form-control" name="txtDescripcion"></textarea>
</div>
</div>
<div class="form-group">
<label for="txtFoto" class="label-control col-md-4">Imagen</label>
<div class="col-md-8">
<input type="file" name="txtFoto" id="txtFoto">
</div>
</div>
<div class="form-group">
<label for="cant" class="label-control col-md-4">Cantidad</label>
<label for="catalog" class="label-control col-md-4">Precio catálogo</label>
<label for="ofert" class="label-control col-md-4">Precio oferta</label>
</div>
<div class="input-group">
<div>
<input type="text" name="txtCantidad" class="form-control">
</div>
<span class="input-group-addon">-</span>
<div>
<input type="text" name="txtCatalogo" class="form-control">
</div>
<span class="input-group-addon">-</span>
<div>
<input type="text" name="txtOferta" class="form-control">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="button" id="btnSave" class="btn btn-primary">Guardar</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->