Select Box onchange事件的ajax代码

Question

I have select box with menu(id,name) and I have another select box category (cid, cname) and it must show only category based on the menu selected by setting the menuid to " url ". Here is my code: http://jsfiddle.net/L8su2/738/

echo $this->Form->create('Subcategorynew');
echo $this->Form->input('menu_id', array('empty'=>'--Select--','label'=>'Menu','type'=>'select','options'=>$menunew, 'div' => false, 'id' => 'prodid', 'onchange' => 'test()', 'class' => 'form-control'));
echo "</br>";
echo $this->Form->input('category_id', array('type'=>'select','label'=>'Category', 'div' => false, 'id' => 'total','options'=>$catnew, 'class' => 'form-control'));
echo "</br>";

Answer 1

First, you should add an error trigger to see what happens. AJAX is based on JSON and you are sending HTML code. Then you HAVE to change the data type. Finally, to do it easier, you can use $.get() and $.post() to be sure the way data is coming.

error: console.log,
dataType : 'html',

It should be something like this to test. Results are in your developpement console like in Chrome or Firefox

$.post({
   url: "<?=$this->webroot?>admin/subcategorynew/add/"+prodid,
   data: data,
   error: console.log,
   success: console.log,
   dataType: 'html'
});

or

$.get({
   url: "<?=$this->webroot?>admin/subcategorynew/add/"+prodid,
   data: data,
   error: console.log,
   success: console.log,
   dataType: 'html'
});

To display data where we want, via JQuery

Set the callback

success: dataToProcess,

Create the callback

function dataToProcess(data, status){
  // select your submenu via the ID
  // $.html() will replace the current HTML data INTO the actual tag to the data you sended
  $("#idSubMenu").html(data);
}