CODEWITHSUNDEEP
ajaxcodeigniterrestcordovajquery-mobile
user481610
user481610

Reputation: 3270

Codeigniter REST web service and jquery mobiles AJAX in PhoneGap

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.

Now inside PhoneGap I have the following code:

<!DOCTYPE HTML>
    <html>
     <head>
      <title>PhoneGap</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1"/>

    <link rel="stylesheet" href="css/jquery.mobile.css"/>

    <script type="text/javascript"  src="js/jquery.js"></script>
    <script type="text/javascript"  src="js/jquerym.js"></script>
    <script type="text/javascript"  src="js/myscript.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/cordova-2.3.0.js"></script>
 </head>
 <body>
    <div id ="page1" data-role="page">
        <div data-role ="header">
            <h1>Welcome to Page 1</h1>
        </div>
        <a href="#page2" data-transition="flip">Page2</a>
    </div>

    <div id ="page2" data-role="page">
        <div data-role ="header">
            <h1>Welcome to Page 2</h1>
        </div>

        <form>
            First name: <input type="text" name="name" id="username"><br>
            Last name: <input type="text" name="surname" id="usersurname"><br>
            <input type="submit" id ="submit" name="submit" value="GO TIME">
        </form>
        <a href="#page1" data-transition="flip">Page1</a>
    </div>

 </body>
</html>

When the user enters values into the form it then runs the following js:

$(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");
                });         
              });

In my Codeigniter REST I have set the base url and have the following code:

<?php

require(APPPATH.'/libraries/REST_Controller.php');
class API extends REST_Controller
{
    function test_post()
    {
        $name = $this->post('name');
        $surname = $this->post('surname');
        $result = "This is working ".$name." ".$surname;
        $array = array('result' => $result);
        $this->response($array); 
    }

}
?>

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.

Upvotes: 0

Views: 2407

Answers (2)

Joel Murphy
Joel Murphy

Reputation: 2512

You've probably solved this issue now, but I thought I'd answer it for you as I just had a similar issue and stumbled upon this question.

Basically, you won't be able to access http://localhost/rest/index.php/api/test/name from your emulator as your XAMPP server is hosted on a different machine (the emulator is a virtual machine). By changing the URL of your request to http://192.168.0.7/rest/index.php/api/test/name for example, you can access the apache server hosted on your PC. You'll have to find out your local IP by opening a command prompt and typing ipconfig. You'll also need to ensure that your networks firewall allows incoming traffic from port 80.

Upvotes: 2

Gajotres
Gajotres

Reputation: 57309

This is not going to work, you can't use localhost on a phonegap mobile app.

If you are testing this code on a mobile device your $.POST destination is not a: 

http://localhost/rest/index.php/api/test/name

Your phone has a different IP adress then your PHP server.

Find your PHP server IP and replace localhost with it.

Upvotes: 1

Related Questions