Tengo un problema y no se como resolverlo,tengo una tabla donde se muestran los item registrados al final de cada columna tengo un boton de editar
, al dar click
en cualquiera, abrira un modal
con los datos cargados, anteriormente registrados
,todos los datos cargan perfectamente en su input, excepto dos select
anidados.
si intento hacer un update en cualquiero otro campo, primero debo de volver a elegir la Category para que me aparezca su Item, de otra manera no hara nada y no actualiza.
Solo me falta que cargar ese valor cuando se abra el modal de editar, pero no se como hacerlo.
Esta es la funcion que se ejecuta al dar click en el boton editar, y donde cargo los valores en los input.
function editModal(cat_name,idSub,numFile,description_item,price_item,manufacturer,model_item,reorder_Level,target_Stock,image,
commentt,registerDate,id_category,id_supplier,id_unit,id_location,id_engineer,name_sub)
{
if(parseInt(status) === 0)
{
swal({
title: "Para actualizar debe cambiar status del Item\n"+ description_item,
text: "¡Imposible actualizar!",
icon: "warning",
});
} else{
// $('#modalParaEditar').modal({backdrop: 'static', keyboard: false});
document.getElementById("id").value = cat_name+ "-" +"00"+ idSub+"-"+numFile;
document.getElementById("EdititemDes").value = description_item;
document.getElementById("Editprice").value = price_item;
document.getElementById("Editmanufacturer").value = manufacturer;
document.getElementById("Editmodel").value = model_item;
document.getElementById("Editmin").value = reorder_Level;
document.getElementById("Editmax").value = target_Stock;
document.getElementById('imagenEditar').src = "http://localhost/WareHouse/assets/img/" + image;
document.getElementById("Editcomment").value = commentt;
document.getElementById("lastDate").value = registerDate;
document.getElementById("Editcategory").value = id_category; //
document.getElementById("Editsupplier").value = id_supplier; //
document.getElementById("Editunit").value = id_unit; //
document.getElementById("Edititem").value = idSub;
document.getElementById("Editlocation").value = id_location; //
document.getElementById("Editengineer").value = id_engineer; //
document.getElementById("pk").value = numFile;
$("#modalParaEditar").modal();
}
}
Aqui estoy cargando los valores de los select
, sin embargo el select Item
aparece en blanco.
Ejemplo: Si quiero modificar el valor de cualquier otro input
pero dejar la misma Category
, debo seleccionarlo antes para que me aparezca su Item
y asi poder hacer exitosamente el update, de otra manera no lo hara.
document.getElementById("Editcategory").value = id_category;
document.getElementById("Edititem").value = idSub;
Esta es la function
que se ejecuta al selecccionar el select
de Category
y muestre los datos del siguiente.
function secondCombo(id_category)
{
console.log("Entre a second combo");
console.log(id_category);
var x = new XMLHttpRequest();
x.open('GET', 'http://localhost/WareHouse/apis/sub_category.php?id_category='+ id_category);
x.send();
x.onreadystatechange = function() {
if (x.status == 200 && x.readyState == 4) {
//Toma los dos selectores
var combo = document.getElementById('item');
var comboEditar = document.getElementById('Edititem');
var JSONdata = JSON.parse(x.responseText);
var sub =JSONdata.subItems;
console.log(JSONdata);
document.getElementById('item').options.length = 0;
document.getElementById('Edititem').options.length = 0;
//Llena el combo para editar
for(var i = 0; i < sub.length; i++)
{
//Crea una opcion de selector
var option = document.createElement('option');
//Aniade propiedades a la opcion
option.value = sub[i].id_category;
// option.innerHTML = sub[i].idSub;
option.innerHTML = sub[i].n;
comboEditar.appendChild(option);
}
//Llena el combo para agregar
for(var i = 0; i < sub.length; i++)
{
//Crea una opcion de selector
var option = document.createElement('option');
//Aniade propiedades a la opcion
option.value = sub[i].id_category;
// option.innerHTML = sub[i].idSub;
option.innerHTML = sub[i].n;
combo.appendChild(option);
}
}
}
}
En conclusion, necesito que al querer editar y se abra el respectivo modal
, Item tambien muestre su valor con el que fue registrado, ya que de otra manera no se puede hacer el update
.
Este es el codigo html
donde se manda a llamar la funcion para que asigne el item a la category
, elegida, solo que para editarlo el item no muestra su valor, es decir si quiero dejar la misma category
debo de elegir para que me aparezca el valor y luego, solo luego si actualiza.
<div class="col-md-3 ml-auto">
<label>Category</label>
<select onchange="secondCombo(this.value)" class="form-control" id="Editcategory" >
</select>
</div>
El boton lo estoy creando dentro de una funcion js para crear y llenar la tabla, y solo mando a llama la function editmodal
para que asigne los valores a los input.
edit.setAttribute("onclick", "editModal('" + articulos[i].cat_name +"', '" +
articulos[i].idSub +"','" +
articulos[i].numFile +"', '" + articulos[i].description_item +"', '" +
articulos[i].price_item +"', '" + articulos[i].manufacturer +"', '"+
articulos[i].model_item +"', '" + articulos[i].reorder_Level +"','" +
articulos[i].target_Stock +"','" + articulos[i].image +"','" +
articulos[i].commentt +"','" + articulos[i].registerDate +"', '"+
articulos[i].id_category +"','" + articulos[i].id_supplier +"','" +
articulos[i].id_unit +"','" + articulos[i].id_location +"','" + articulos[i].id_engineer +"','" + articulos[i].idSub +"',)");