AJAX PHP : Dynamic drop down list using AJAX - php

Question

Today, I went to code a form with Dynamic dropwdown list in it.
Mission : I want to make dynamic dropdown list when User choose Category, then the store with that category will appear.
It is the form :
<select name="category" class="form-control" id="category" onchange="ajaxStore(this.value)">
<option value="-1"> - Choose Category -</option>
<?php
$StoreCategoriesAPIAccessor = new StoreCategoriesAPIService(GuzzleClient::getClient());
$stores = $StoreCategoriesAPIAccessor->getStoreCategories();
foreach ($stores as $store):
?>
<option value="<?php echo $store->getStoreCategoryId(); ?>"><?php echo $store->getCategory(); ?></option>
<?php endforeach; ?>
</select>
<label for="inputName" class="control-label">Store Name</label>
<select name="store" class="form-control" id="store">
<option value="-1"> - Choose Store -</option>
</select>
This is the AJAX :
<!-- linking drop down AJAX -->
<script type="text/javascript">
var ajaxku=buatajax();
function ajaxStore(id){
var url="objects/StoreAPIService.php?category="+id+"&sid="+Math.random();
ajaxku.onreadystatechange=stateChanged;
ajaxku.open("GET",url,true);
ajaxku.send(null);
}
function buatajax(){
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
if (window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function stateChanged(){
var data;
if (ajaxku.readyState==4){
data=ajaxku.responseText;
if(data.length>=0){
document.getElementById("store").innerHTML = data
}else{
document.getElementById("store").value = "<option selected>- Choose Store -</option>";
}
}
}
</script>
And this the code of StoreAPIService.php :
session_start();
$stores = array();
$store_category_id = $_GET['category'];
try
{
//$client = new GuzzleClient();
$response = $this->client->get('admin/store/bycat/rev/'.$store_category_id,
['headers' => ['Authorization' => $_SESSION['login']['apiKey']]
]);
$statusCode = $response->getStatusCode();
// Check that the request is successful.
if ($statusCode == 200)
{
$error = $response->json();
echo"<option value=''>- Choose Store -</option>";
foreach ($error['stores'] as $store)
{
$mainStore = new StoreSummary();
echo "<option value='{$mainStore->setStoreId($store['store_id'])};'>{$mainStore->setStoreName($store['store_name'])};</option>";
array_push($stores, $mainStore);
}
}
}
I got no error, but the Store with 'Category' that I Choose is not appearing.
Could anyone please check if I went wrong.
thanks for your helps.

Answer 1

You were trying to change options of a dropdown menu. i did this by changing dropdown menu itself.
I created a div with id="store" in the html form and changing the innerHTML of div using ajax
html form
<select name="category" class="form-control" id="category" onchange="ajaxStore(this.value)">
<option value="-1"> - Choose Category -</option>
<?php
$StoreCategoriesAPIAccessor = new StoreCategoriesAPIService(GuzzleClient::getClient());
$stores = $StoreCategoriesAPIAccessor->getStoreCategories();
foreach ($stores as $store):
?>
<option value="<?php echo $store->getStoreCategoryId(); ?>"><?php echo $store->getCategory(); ?></option>
<?php endforeach; ?>
</select><label for="inputName" class="control-label">Store Name</label>
<div id="store"><select name="store" class="form-control">
<option value="-1"> - Choose Store -</option>
</select>
</div> <!--end of store -->
ajax code
<!-- linking drop down AJAX -->
<script type="text/javascript">
var ajaxku=buatajax();
function ajaxStore(id){
var url="objects/StoreAPIService.php?category="+id+"&sid="+Math.random();
ajaxku.onreadystatechange=stateChanged;
ajaxku.open("GET",url,true);
ajaxku.send(null);
}
function buatajax(){
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
if (window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function stateChanged(){
var data;
if (ajaxku.readyState==4){
data=ajaxku.responseText;
if(data.length>=0){
document.getElementById("store").innerHTML = data
}else{
document.getElementById("store").value = "<select name=\"store\" class=\"form-control\">
<option value=\"-1\"> - Choose Store -</option>
</select>";
}
}
}
</script>
StoreAPIService.php :
session_start();
$stores = array();
$store_category_id = $_GET['category'];
try
{
//$client = new GuzzleClient();
$response = $this->client->get('admin/store/bycat/rev/'.$store_category_id,
['headers' => ['Authorization' => $_SESSION['login']['apiKey']]
]);
$statusCode = $response->getStatusCode();
// Check that the request is successful.
if ($statusCode == 200)
{
$error = $response->json();
echo "<select name=\"store\" class=\"form-control\">
<option value=\"\">- Choose Store -</option>";
foreach ($error['stores'] as $store)
{
$mainStore = new StoreSummary();
echo "<option value='{$mainStore->setStoreId($store['store_id'])};'>{$mainStore->setStoreName($store['store_name'])};</option>";
array_push($stores, $mainStore);
}//end of foreach
echo "</select>"
}
}