How can I refresh a select list with another - ajax

Question

I am trying hard to refresh a list after selecting an option of a second.
I have this list
<select id="ArticleShopId">
<option>Some options</option>
<option>Some options 2</option>
<option>Some options 3</option>
</select>
I have a seond
<select id="ArticleCategoryId">
<option></option>
<option></option>
<option></option>
<option></option>
</select>
When I select an option of the first, ajax should load the table Shop and update the second select
I create an action called admin_refreshCategoriesAjax
function admin_refreshCategoriesAjax($id = null){
$this->loadModel('Category');
// Le list recupere la valeur des IDs et cherche un champs qui a la valeur "name"
$categories = $this->Category->find('list',array('order'=>'name ASC','conditions'=>array('shop_id'=>$id)));
//return "toto";
return $categories;
#return json_encode($categories);
}
I wish t create a ajax code to do it. Then I try doing it
$('select#ArticleShopId').on('change',function(){
//alert($(this).val());
//alert("/articles/refreshCategoriesAjax/"+$(this).val());
$.ajax({
type: "GET",
url: "<?php echo $this->Html->url(array('controller' => 'articles', 'action' => 'refreshCategoriesAjax', 'admin' => true)); ?>",
data: "id="+$(this).val(),
success: function(msg){
console.log(msg);
}
})
})
but msg does not return my an array with the $categories values.
How can I correctely call my action admin_refreshCategoriesAjax and update my second select with the value of $categories?
many thank for your help, I spend half day on it :o(
Note:
If I enter this in my URL
http://localhost:8888/web/admin/articles/refreshCategoriesAjax/1
it return me well the array I looking for. If I changer 1 with 2, it return my other value. Then this part seams to work nice

Answer 1

I believe your problem is that in your function admin_refreshCategoriesAjax you are returning the array rather than doing something that will actually output it to the webpage. You could do echo json_encode($categories); to get some output you can use without explicitly creating a view for that action.

Answer 2

Instead of finding an id in the parameter, you will find an id in $this->request->data. To make your ajax request secure, use the following code into your view file:
$('select#ArticleShopId').on('change',function(){
//alert($(this).val());
//alert("/articles/refreshCategoriesAjax/"+$(this).val());
$.ajax({
type: "POST",
url: "<?php echo $this->Html->url(array('controller' => 'articles', 'action' => 'refreshCategoriesAjax', 'admin' => true)); ?>",
data: {id:$(this).val()},
success: function(msg){
console.log(msg);
}
});
});
And the following code into your controller:
function admin_refreshCategoriesAjax(){
$categories = array();
if($this->request->is('post'))
{
$id = $this->request->data['id'];
$this->loadModel('Category');
// Le list recupere la valeur des IDs et cherche un champs qui a la valeur "name"
$categories = $this->Category->find('list',array('order'=>'name ASC','conditions'=>array('shop_id'=>$id)));
//return "toto";
}
return $categories;
#return json_encode($categories);
}
Now to fill the data in dropdown, return json_encode($categories) from your controller. And use var result = $.parseJSON(msg); in your ajax success method.