title: Codeigniter REST web service and jquery mobiles AJAX in PhoneGap
body: <p>I've made a REST web service where I extract a name and surname and then simply send back a message containing a message with the name and surname in the result. </p>
  
  <p>Now inside PhoneGap I have the following code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
      &lt;html&gt;
       &lt;head&gt;
        &lt;title&gt;PhoneGap&lt;/title&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1"/&gt;
  
      &lt;link rel="stylesheet" href="css/jquery.mobile.css"/&gt;
  
      &lt;script type="text/javascript"  src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"  src="js/jquerym.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"  src="js/myscript.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8" src="js/cordova-2.3.0.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div id ="page1" data-role="page"&gt;
          &lt;div data-role ="header"&gt;
              &lt;h1&gt;Welcome to Page 1&lt;/h1&gt;
          &lt;/div&gt;
          &lt;a href="#page2" data-transition="flip"&gt;Page2&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id ="page2" data-role="page"&gt;
          &lt;div data-role ="header"&gt;
              &lt;h1&gt;Welcome to Page 2&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;form&gt;
              First name: &lt;input type="text" name="name" id="username"&gt;&lt;br&gt;
              Last name: &lt;input type="text" name="surname" id="usersurname"&gt;&lt;br&gt;
              &lt;input type="submit" id ="submit" name="submit" value="GO TIME"&gt;
          &lt;/form&gt;
          &lt;a href="#page1" data-transition="flip"&gt;Page1&lt;/a&gt;
      &lt;/div&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When the user enters values into the form it then runs the following js:</p>
  
  <pre><code>$(document).on('pagebeforeshow','#page2',
      function(){
                  $('#submit').click(function() 
                  {
                      var name = $("#username").val();
                      var surname = $("#usersurname").val();
  
                      alert(name + " " + surname);
  
                      $.post(
                          "http://localhost/rest/index.php/api/test/name/"+name+"/surname/"+surname+"/format/json", 
                          {'name':name,'surname':surname},
                          function(data)
                          {
                              alert(data.result);
                          },
                          "json");
                  });         
                });
  </code></pre>
  
  <p>In my Codeigniter REST I have set the base url and have the following code:</p>
  
  <pre><code>&lt;?php
  
  require(APPPATH.'/libraries/REST_Controller.php');
  class API extends REST_Controller
  {
      function test_post()
      {
          $name = $this-&gt;post('name');
          $surname = $this-&gt;post('surname');
          $result = "This is working ".$name." ".$surname;
          $array = array('result' =&gt; $result);
          $this-&gt;response($array); 
      }
  
  }
  ?&gt;
  </code></pre>
  
  <p>Now when the user enters their info in the input boxes and then clicks the button the js script works fine because the 1st alert appears but for some reason it doesn't go to the codeigniter REST and return a result it simply just sends me back to page 1.  </p>