Filling two dropdowns with Ajax

Question

I have three HTML DropDownList ( <select><option></option></select> ). The first DropDownList contains categories, the second contains subcategories of different products, and the third contains brands (or manufacturers).

If a category is selected, two subcategories and a drop-down list brand must be populated immediately from the database in accordance with the category identifier passed to the Ajax function. I am using the following Ajax code.

 function ajax() { if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp = new ActivexObject("Microsoft.XMLHTTP"); } } function getBrandList(selected) //selected is the category id. { ajax(); xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("brandList").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax/BrandAjax.php?selected="+selected, true); xmlhttp.send(); alert(selected); } function getSubcategoryList(selected) //selected is the category id. { getBrandList(selected); //First above function is invoked to populate brands. ajax(); xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("subCategoryList").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax/SubCatAjax.php?selected="+selected, true); xmlhttp.send(); } 

When a category is selected, the getSubcategoryList(selected) Javascript function is getSubcategoryList(selected) , which executes the Ajax request. The problem is that I need to immediately fill out both the subcategory and the brand (when the category is selected).

It works, and both drop-down lists are filled immediately in accordance with the transmitted category identifier (this is a parameter of the selected functions above).

I unnecessarily use the warning window at the bottom of the getBrandList() function. When this notification field is commented out, only one folder is filled in, which is a subcategory. Brands remain empty. I no longer need this warning window.

Why is this happening? What is the solution?

Answer 1

seriyPS mostly hit the target. The problem is actually the xmlhttp variable. You must declare it local within each function used. Basically, create function call closures. The problem is not necessarily that it must be "local", but it is redefined in the second query as a result of the global variable. This essentially kills the original request, because the variable now points to the second request.

The reason the warning field makes it work is because the first request completes the ajax request before you can click ok. (A warning window pauses javascript and therefore delays the second request until you click ok.)

To fix this, you can change your code to use a different variable for each request. Try changing your function like this:

 // Global Variables var brandListRequest; var subcategoryRequest; function ajax() { var xmlhttp; //!! if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp = new ActivexObject("Microsoft.XMLHTTP"); } return xmlhttp; //!! } function getBrandList(selected) //selected is the category id. { brandListRequest = ajax(); //!! brandListRequest.onreadystatechange=function() { if(brandListRequest.readyState==4 && brandListRequest.status==200) { document.getElementById("brandList").innerHTML=brandListRequest.responseText; } } brandListRequest.open("GET","ajax/BrandAjax.php?selected="+selected, true); brandListRequest.send(); //alert(selected); } function getSubcategoryList(selected) //selected is the category id. { getBrandList(selected); //First above function is invoked to populate brands. subcategoryRequest = ajax(); //!! subcategoryRequest.onreadystatechange=function() { if(subcategoryRequest.readyState==4 && subcategoryRequest.status==200) { document.getElementById("subCategoryList").innerHTML=subcategoryRequest.responseText; } } subcategoryRequest.open("GET","ajax/SubCatAjax.php?selected="+selected, true); subcategoryRequest.send(); } 

Answer 2

I think the second call to ajax () destroys the xmlhttp variable. When you enter your warning, I bet that he gave the first talk time before the second. You should probably call ajax () first and remove the call from your handlers.

Answer 3

First, just try some modern JavaScript frameworks like jQuery.

As @tzerb says: you override the xmlhttp global variable before the first completion of an AJAX request. You must use local variables for this.

 function ajax() { var xmlhttp; //!! if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp = new ActivexObject("Microsoft.XMLHTTP"); } return xmlhttp; //!! } function getBrandList(selected) //selected is the category id. { xmlhttp = ajax(); //!! xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("brandList").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax/BrandAjax.php?selected="+selected, true); xmlhttp.send(); //alert(selected); } function getSubcategoryList(selected) //selected is the category id. { getBrandList(selected); //First above function is invoked to populate brands. xmlhttp = ajax(); //!! xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("subCategoryList").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax/SubCatAjax.php?selected="+selected, true); xmlhttp.send(); } 

With jQuery you can look like this:

 function getBrandsList(selected){ $("#brandList").load("ajax/BrandAjax.php?selected="+selected); } function getSubcategoryList(selected){ $("#brandList").load("ajax/SubCatAjax.php?selected="+selected); } 

Answer 4

I would recommend you use jQuery .

  1. Load the first dropdown with categories on page load 2. Call the following ajax call on change event of the first dropdown, categoryList $('#categoryList').change(function () { $('#subCategoryList').load("ajax/SubCatAjax.php?selected="+this.value); $('#brandList').load("ajax/BrandAjax.php?selected="+$('#subCategoryList').val()); }); 3. Call the following ajax call on change event of the second dropdown, subcategoryList. $('#subCategoryList').change(function () { $('#brandList').load("ajax/BrandAjax.php?selected="+this.value); }); 

PS I assume that your ajax requests return a string containing parameters, e.g. <option value='1'>subcategory1</option><option value='2'>subcategory2</option> ..etc. and you want to download brands based on the selected subcategory, not the selected category.

Answer 5

I think you can use the callback function. But I suggest using jquery. It is much simpler. You do not need to do all this manually (by creating an xhttprequest object and maintaining the response state and all these awkward objects associated with the activex object)