How to pass data to controller to view using json in php?

Question

I using codeigniter.I need to pass data to my controller to view somehow.I manage to pass view to controller(in view when drop-down selected value pass to controller using ajax) this is my HTML code

<div class="form-group">
   <label for="lastname" class="control-label">Your Packages</label>
      <?php if(isset($tourbuddy_packages)){?>
           <select id="itemType_id" class="form-control input-sm" name="tripbuddy_PackageTitle" onChange="disp_text()">
             <?php
                  foreach ($tourbuddy_packages as $packages) {?>
                     <option value="<?php echo $packages['PackageID'] ?>"><?php echo $packages['PackageTitle']?></option>
                   <?php } ?>
            </select>
          <input type="hidden" name="PackageID" id="country_hidden">
          <?php }  else { ?>
                 <select class="form-control input-sm" name="tripbuddy_PackageTitle">
                        <option>Add Packages</option>
                 </select>
           <?php } ?>
</div>

when drop-down selected a vale i pass data to controller by using ajax and java Script

$("#itemType_id").change(function() {
            $.ajax({
                url : "feature/tea/",
                method: "POST",
                data: "id=" + $(this).val(),
                success: function(response) {
                    // handle
                }
            })  
});

Selected vale pass to tea method in controller

 public function tea()
    {

        $this->session->set_userdata(array('tripbuddy_PackageID'=>$_POST['id']));


    $package_data = $this->ci->package_model->get_package($_POST['id']);
    $package_cat =  $this->ci->package_model->get_package_categories();
    $data = array();
    $data['tourbuddy_selected_package'] = $package_data[0];
    $data['tourbuddy_selected_package_cat'] = $package_cat;
    //echo $data['package']['AlbumID'];
    $data['tourbuddy_selected_photos'] = $this->photo->get_package_photo_stream($data['tourbuddy_selected_package']['AlbumID']);    
    //echo var_dump($data['photos']);

    echo json_encode($data);

    }

now I need to pass $data array to my view without refreshing view page how can i do this ? need a quick help

Answer 1

Controller

class Feature extends CI_Controller
    {
        public function tea()
        {
            $post = $this->input->post(); //do some form validation here

            $model = Model::get($post); // do all business logic in the model

            if(!$model){
                //return a Response header rather than a 404View
                return $this->output->set_status_header(404); 
            }

            $responce = array(
                'something'  =>  $model->something
            );

            return $this->output
                ->set_content_type('application/json')
                ->set_output(json_encode($responce))
                ->set_status_header(200);
        }
    }

Untested Javascript

 var URL = <?php echo site_url(); ?>// Global URL variable

    (function($){

        var Form = {
            init : function(){
                this.Form = $("form#formId"),
                this.ItemType = this.Form.find("#itemtype_id");

                this.ItemType.on('change', $.proxy(this.change, this));
            },
            /**
             * -----------------------------------------------------------------
             * Bind the ItemTypeId change event to this function using $.proxy
             * Ajax return's a deffered(promise) so capture it, and do stuff
             * -----------------------------------------------------------------
            **/
            change : function(event){
                this.doAjax(event.target).then(
                    function( data ) // success
                    {
                        $(this).html('Success'); // $(this) -> context
                    },
                    function( reason ) //fail
                    {
                        switch(reason.code)
                        {
                            case 404:
                            default:
                                $(this).html('no results found');
                            break;

                        }
                    }
                );
            },
            /**
             * -----------------------------------------------------------------
             * Make the ajax request a wait for it to return a promise
             * -----------------------------------------------------------------
            **/
            doAjax : function( target ){
                var data = {
                    id : target.id
                }
                return $.ajax({
                    cache: false,
                    url : URL + 'feature/tea/',
                    context : target,
                    method: "POST",
                    data : data,
                    dataType : 'json',
                }).promise();
            }
        }

        Form.init();

    }(jQuery));

Answer 2

First you need to add the correct header to your tea() function as it will be returning json

public function tea()
{
    header('Content-Type: application/json');

   //...
}

Then you will need to add the dataType parameter to your ajax call

$("#itemType_id").change(function() {
    $.ajax({
        url : "feature/tea/",
        method: "POST",
        dataType: 'json', //Added this
        data: "id=" + $(this).val(),
        success: function(response) {
            // handle
        }
    })  
});

In your success function you will then be able to access the data like

success: function(response) {
    response.tourbuddy_selected_photos.data
}