Nested select values are not loaded in edit modal


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,
    	if(parseInt(status) === 0)
    		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;

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");
	var x = new XMLHttpRequest();'GET', 'http://localhost/WareHouse/apis/sub_category.php?id_category='+ id_category);
  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;
			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;

			//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;

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">
                      <select onchange="secondCombo(this.value)"  class="form-control" id="Editcategory" >

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 +"',)");
asked by Pato 22.11.2018 в 23:37

1 answer


What I can understand, is that the item leaves you blank because the secondCombo function never enters the edit because the event onChange never happens, that's why you need to select the category again so that the event onChange occurs and thus the funcion is executed.

You could send the function secondCombo in the js of your modal and send as a parameter the value of Editcategory .

So each time the modal opens, it will take that value and execute the function:

var select = document.getElementById("Editcategory")
var value = select.value //El valor seleccionado

I think this part is easy, it's just an example, you could apply it as best suits you.

I hope it serves you.

answered by 23.11.2018 / 20:18