title: Load view and make json data available in ajax request (Codeigniter)
body: <p>I want ajax request to load view as well as make json data available for same loaded view. In bellow ajax request, I am making request to <code>letUsKnow</code> method which loads views and also I want json data to be available in same loaded views. I tried following code but its not working. </p>
  
  <pre><code>$(document).on("click", "#letKnow", function(){
          $.ajax({
          'type': "POST",
          'url': base_url + "init/letUsKnow",    //calling method in controller
          'data': {},
          success: function (response)
          {
              $("#ads_container").html(response.html);
              alert(response.data[0].model_name);     //undefined
          },
          complete: function()
          {
  
          }
      });
  });
  </code></pre>
  
  <h2>init (controller)</h2>
  
  <pre><code> public function letUsKnow() {
      $models = $this-&gt;dbmodel-&gt;get_models();
      $data = json_encode($models);
      $this-&gt;load-&gt;view("letUsKnow",$data);
  
  }
  </code></pre>
  
  <p>Can this functionality be obtained from single ajax request. I can do with two ajax request that after loading view from one ajax request and again another ajax to request json data. But, How to fulfill this with single ajax request.</p>
  
  <h2>Edit</h2>
  
  <p>You can turn the whole response into json.</p>
  
  <p><code>$this-&gt;load-&gt;view()</code> has a third argument that lets you return the view as  a string to a variable.</p>
  
  <p>I don't understand why you are json encoding <code>$models</code> to pass into the view so I will assume you want that as part of the main response</p>
  
  <p>PHP</p>
  
  <pre><code> public function letUsKnow() {
      $models = $this-&gt;dbmodel-&gt;get_models();
  
      $output = array(
          'html'=&gt;$this-&gt;load-&gt;view("letUsKnow",$models, true),
          'data' = &gt;$models
      );
      // should set Content Type header for json here - see output docs
      echo json_encode($output);
  }
  </code></pre>
  
  <h2>array ($models)</h2>
  
  <pre><code> // $models after json encode in ajax response
       {"abc":[{"id":"76","brand_id":"23","model_name":"iphone 4"},{"id":"77","brand_id":"23","model_name":"iphone 4s"}]}
  
   // after making array of views and data and after json encode in ajax response I get:
        {"html":"this is html views &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\n\r\n",
         "data":{"abc":[{"id":"76","brand_id":"23","model_name":"iphone 4"},{"id":"77","brand_id":"23","model_name":"iphone 4s"}]}} 
  
   // but in real my view's html is:
        &lt;div&gt;this is html views&lt;/div&gt;&lt;div id="iop"&gt;&lt;/div&gt;    //html in controller
  
   // also when I tried to access json object like:
        response.hm   // I get undefined
        response.data.model_name    //I get undefined.
  </code></pre>
  
  <p>AJAX</p>
  
  <pre><code>$.ajax({
      type: "POST",
      url: base_url + "init/letUsKnow", //calling method in controller
      data: {},
      dataType:'json',
      success: function (response) {
          var modelsData = response.data;             //undefined
          $("#ads_container").html(response.html);    //undefined
      },
      error: function(){ alert('Ooops ... server problem'); }
  });  
  </code></pre>