title: CodeIgniter Ajax form - submitting form
body: <p>I'm new to stackoverflow and to CodeIgniter and I'm currently experimenting on some simple code examples I have found on the Internet in order to get a start. The one I'm working on right now is a form which uses CI and Ajax (jQuery) along with saving the inputs of the form in a database and then display the most recent of them on the same page as the form.
  If I confused you it's the 4.7 application example from <a href="http://devsnippets.com/article/getting-started-with-codeigniter-and-how-to-create-all-those-great-apps.html" rel="nofollow">here</a>. The initial source code lies <a href="http://justalittlebrain.wordpress.com/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/" rel="nofollow">here</a> but I have modified it in order to work with the latest release of CI and I quote all my MVC files just below.</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>&lt;?php
  class Message extends CI_Controller
  {
      function __construct()
      {
          parent::__construct();
          $this-&gt;load-&gt;helper('form');
          $this-&gt;load-&gt;helper('url');
          $this-&gt;load-&gt;helper('security');
          $this-&gt;load-&gt;model('Message_model');
      }
  
      function view()
      {
          //get data from database
          $data['messages'] = $this-&gt;Message_model-&gt;get();
  
          if ( $this-&gt;input-&gt;is_ajax_request() ) // load inline view for call from ajax
              $this-&gt;load-&gt;view('messages_list', $data);
          else // load the default view
              $this-&gt;load-&gt;view('default', $data);
      }
  
      //when we pres the submit button from the form
      function add()
      {
          if ($_POST &amp;&amp; $_POST['message'] != NULL)
          {
              $message['message'] = $this-&gt;security-&gt;xss_clean($_POST['message']);
              $this-&gt;Message_model-&gt;add($message);
          }
          else
          {
              redirect('message/view');
          }
      }
  }
  ?&gt;
  </code></pre>
  
  <p><strong>Model:</strong></p>
  
  <pre><code>&lt;?php
  class Message_model extends CI_Model
  {
      function __construct()
      {
          parent::__construct();
          $this-&gt;load-&gt;database();
      }
  
      function add($data)
      {
          $this-&gt;db-&gt;insert('messages', $data);
      }
  
      function get($limit=5, $offset=0)
      {
          $this-&gt;db-&gt;order_by('id', 'DESC');
          $this-&gt;db-&gt;limit($limit, $offset);
  
          return $this-&gt;db-&gt;get('messages')-&gt;result();
      }
  }
  ?&gt;
  </code></pre>
  
  <p><strong>Views</strong></p>
  
  <p>default.php:</p>
  
  <pre><code>&lt;!-- called using message/view --&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  
          &lt;script src="&lt;?php echo base_url('js/jquery-1.8.1.min.js'); ?&gt;" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function()
              {
                  $('#submit').click(function(e)
                  {
                      e.preventDefault();
                      var msg = $('#message').val();
                      $.post("", {message: msg}, function() {
                          $('#content').load("");
                          $('#message').val('');
                      });
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;?php echo form_open("message/add"); ?&gt;
          &lt;input type="text" name="message" id="message"&gt;
          &lt;input type="submit" value="submit" name="submit" id="submit"&gt;
          &lt;?php echo form_close(); ?&gt;
  
          &lt;div id="content"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>messages_list.php:</p>
  
  <pre><code>&lt;!-- called from ajax call --&gt;
  
  &lt;ol&gt;
  &lt;?php foreach ($messages as $cur): ?&gt;
      &lt;li&gt;&lt;?php echo $cur-&gt;message; ?&gt;&lt;/li&gt;
  &lt;?php endforeach; ?&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>The problem mainly lies in the 1st of the views (default.php). That is, if I omit the <code>e.preventDefault();</code> line from the javascript code then the form loads a different page (message/add as the form action parameter implies) which is a blank page, also cancelling the ajax behavior of my application that way.
  On the other hand, if I actually add this line then the add method of my message controller isn' t called, thus not adding what I've typed into the database.</p>
  
  <p>Finally, I tried the following js code instead of the other above:</p>
  
  <pre><code>$(document).ready(function()
              {
                  $('#submit').click(function(e)
                  {
                      e.preventDefault();
                      var msg = $('#message').val();
                      $.post("&lt;?php echo base_url(); ?&gt;message/add", {message: msg}, function() {
                          $('#content').load("");
                          $('#message').val('');
                      });
                  });
              });
  </code></pre>
  
  <p>but that way it seems as the $.post() crashes because nothing is executed in the function which is supposed to run on a successful post() call.</p>
  
  <p>Any help appreciated and sorry for the big post. :)</p>