How to retrive data in cakephp when change the opt

Question

I am really new in cakephp. I have two controllers named 'questions' and 'answers'. In answers view i have a admin_add.ctp file which includes a select box that show the list of questions. But the problem is when someone select the question then it will show all the answers in different input fields depending on the selected question_id though my admin_add.ctp contains a single input fields. So the fields have to be added when dynamically to the admin_add ctp when someone make a change. My answers table contains a field 'question_id' as foreign_key. Here is my admin_add.ctp file..

<?php echo $this->
    Html->script(array('answers_add','jquery-ui-1.8.18.custom.min'), array('inline'
    => false)); ?>
    <div class="answers form">
        <?php echo $this->
            Form->create('Answer');?>
            <fieldset>
                <legend>
                    <?php echo __( 'Admin Add Answer'); ?>
                </legend>
                <?php echo $this->
                    Form->input('question_id', array('empty'=>'Please select the question'));?>
                    <span class="labelToAnswerBox">
                        Add your answers
                    </span>
                    <ul id="allAnswerHolder">
                        <li class="eachAnswer">
                            <?php echo $this->
                                Form->input('answer', array('id' => false, 'class' => 'answerInput', 'name'
                                => 'data[Answer][answer][]','div' => false, 'label' => false, 'after' =>
                                '
                                <input type="button" value="X" class="removeAnswer">
                                ', 'before' => '
                                <span class="ui-icon ui-icon-arrowthick-2-n-s">
                                </span>
                                ')); ?>
                        </li>
                    </ul>
                    <span class="addAnswer">
                        Add
                    </span>
                    <?php echo $this->
                        Form->input('Status', array('type'=>'hidden', 'id'=>'status')); echo $this->Form->input('Status1',
                        array('type'=>'hidden', 'id'=>'status1')); ?>
            </fieldset>
            <?php echo $this->
                Form->end(__('Submit'));?>
    </div>
    <?php echo $this->
        element('left');?>  

Can anyone help me? Thanks in advance.

Answer 1

Try like below:

Write change() method for that select box with AJAX request:

$('select#AnswerQuestionId').on('change', function() {
   var questionID = $(this).val();
   // send ajax
   $.ajax({
      url: 'admin/answers/add/' + questionID,
      method: 'get',
      dataType: 'json',
      success: function(response) {
          // for example
          // response = [{'Answer': {'id': 1, 'answer': 'ans 1'} }, {'Answer': {'id': 2, 'answer' : 2}}....];
          // now loop over the response
          var html = '';
          $.each(response, function(index, val) {
              html + = '<div id="answer_'+ val.Answer.id +'">'+ val.Answer.answer +'</div>'
          });
          // append this html to target container
          $('#target_container').append(html);
      }
   });
});

In CakePHP side try like following:

public function admin_add($id = null) {
    if( !empty($id) )
    {
        $this->Answer->recursive = -1;
        $answers = $this->Answer->find('all', 
                                        array(
                                         'fields' => array('Answer.answer', 'Answer.id'), // assume the answer contains in answer field in db
                                         'conditions' => array('Answer.question_id' => $id)
                                        )
                                      );
        echo json_encode( $answers );
    }
}