title: Correct way for Codeigniter AJAX get data from MySQL database without refreshing
body: <p>I am currently experimenting with AJAX and jQuery to complete some basic tasks without having to leave a webpage. My aim is to query a table on a database and append that information to a list without the page refreshing.</p>
  
  <pre><code> &lt;button class="button radius" id="btnList"&gt;Current Items&lt;/button&gt;
  </code></pre>
  
  <p>This is my button which has the ID. ("trigger button");</p>
  
  <p>my script looks like this </p>
  
  <pre><code>$('#btnList').click(function(e){
      $.ajax({
          url:"&lt;?php echo base_url();?&gt;/cashbook/get_item",
          datatype:'json',
          type:"POST",
          success: function(result){
              alert(result);
              $.each(result.results,function(item){
                  $('ul').append('&lt;li&gt;' + item + '&lt;/li&gt;')
              })
          }
      })
      $('#div_list').toggle(900)
  })
  </code></pre>
  
  <p>My aim is when the button is clicked, it fires off and does its magic and returns the data and appends it to a list which when finished opens a Div which contains the list. The problem is I get an error <strong>"TypeError: undefined is not an object (evaluating 'a.length')"
  My controller</strong></p>
  
  <pre><code>function get_item()
  
  {
      $data = $this -&gt; M_cashbook -&gt; cashbook_items();
  
      echo json_encode($data);
  
  }
  </code></pre>
  
  <p>Im not sure if what I'm doing in the controller is right but when its set to echo or print it returns the jSon string and flags up in the alert but also appears at the top of my screen as text, if changed to return json_encode the alert shows blank, no Json nothing works.</p>
  
  <p>Am I doing the whole thing wrong?, and if, so what is the correct way of achieving what I would like to do.</p>
  
  <p>Thanks</p>
  
  <p>UPDATE:</p>
  
  <pre><code>function cashbook_items()
  {
      $this -&gt; db -&gt; select('name');
      $this -&gt; db -&gt; from('items');
      $query = $this -&gt; db -&gt;get();
  
      return $query -&gt; result();
  }
  </code></pre>
  
  <p>This is my model</p>
  
  <p>This is my 2 controller functions, the first is the default load of the page which calls the second one to get the content, the second one just doing the grunt work to call the database and return the data</p>
  
  <pre><code>function items()
  {
  
      $data['items'] = $this -&gt;get_item();
      $this-&gt;load-&gt;view('/holders/header');
      $this-&gt;load-&gt;view('/cash/v_cashbook_items_page',$data);
      $this-&gt;load-&gt;view('/holders/footer');
  }
  
  function get_item()
  
  {
      $data = $this -&gt; M_cashbook -&gt; cashbook_items();
  
      echo json_encode($data);
  
  }
  </code></pre>
  
  <p>Lastly the view</p>
  
  <pre><code>    &lt;style&gt;
      ul {
          list-style-type: none;
      }
  &lt;/style&gt;
  &lt;div align="center" style="padding-top: 1%" id="div_main"&gt;
      &lt;div class="jumbotron"&gt;
          &lt;h1&gt;Cashbook Items&lt;/h1&gt;
  
          &lt;p&gt;Add items to to cashbook so they used &lt;br&gt;when adding incomings and out goings later&lt;/p&gt;
  
          &lt;form id="items_form" data-abide&gt;
              &lt;div class="large-3 large-centered columns"&gt;
                  &lt;label&gt;New Item Name
                      &lt;input type="text" required name="item" id="item_name"&gt;
                  &lt;/label&gt;
                  &lt;small class="error"&gt;No item added&lt;/small&gt;
              &lt;/div&gt;
  
              &lt;button class="button radius" id="btnItem"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
          &lt;a href="#" data-reveal-id="firstModal" class="radius button" id="btnList"&gt;Item List&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div id="firstModal" class="reveal-modal" data-reveal align="center"&gt;
          &lt;h3&gt;Current Items&lt;/h3&gt;
  
          &lt;p&gt;Reccuring Items in the database&lt;/p&gt;
          &lt;ul id="list_item"&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  
  &lt;script&gt;
  
      $('#btnList').click(function (e) {
          $.ajax({
              url: "&lt;?php echo base_url();?&gt;/cashbook/get_item",
              dataType: 'text',
              type: "POST",
              success: function (result) {
                  var obj = $.parseJSON(result);
                  $.each(obj, function (index, object) {
                      $('#list_item').append('&lt;li&gt;' + object['name'] + '&lt;/li&gt;');
                  })
              }
          })
      })
  
      $('#items_form').submit(function (e) {
          e.preventDefault();
          var data = $('#item_name').val();
          alert(data);
          $.ajax({
              url: "&lt;?php echo base_url();?&gt;/cashbook/new_item",
              type: 'POST',
              data: "item=" + data,
              success: function () {
                  alert('THIS WORKED');
  
              },
              error: function () {
                  alert('Nah died');
              }
  
          });
      })
  &lt;/script&gt;
  </code></pre>