I have a problem and I do not know how to solve it, I have a table where the items registered at the end of each column are displayed I have a editar button, by giving click in any, it will open a modal with the data loaded, previously registrados , all data load perfectly in your input, except two select nested.
If I try to make an update in any other field, first I must return to choose the Category so that its Item appears, otherwise it will not do anything and does not update.
I just need to load that value when the edit modal opens, but I do not know how to do it.
This is the function that is executed when clicking on the edit button, and where I load the values in the 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();
}
} Here I am loading the values of select , however the select Item appears blank.
Example: If I want to modify the value of any other input but leave the same Category , I must select it before so that its Item appears and so I can successfully make the update, otherwise it will not.
document.getElementById("Editcategory").value = id_category;
document.getElementById("Edititem").value = idSub;
This is the function that is executed when selecting the select of Category and showing the data of the next one.
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);
}
}
}
} In conclusion, I need to want to edit and open the respective modal , Item also show its value with which it was registered, since otherwise you can not do update .
This is the code html where the function is called to assign the item to category , chosen, only to edit it the item does not show its value, that is, if I want to leave the same category I must choose for the value to appear and then, only later if you update.
<div class="col-md-3 ml-auto">
<label>Category</label>
<select onchange="secondCombo(this.value)" class="form-control" id="Editcategory" >
</select>
</div>
The button I am creating it within a function js to create and fill the table, and I just call the function editmodal to assign the values to the 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 +"',)");