PhoneGap, jQuery Mobile and Codeigniter

Question

I've started a mini project using PhoneGap and jQuery Mobile.

<title>PhoneGap</title>

<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>

<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>

Now I've made a contoller in Codeigniter and would like to use ajax to talk to a specific method in my controller and then have the method respond back. Here is my ajax code:

$(document).ready(
function(){
            $('#submit').click(function() 
            {
                var name = $("#username").val();
                var surname = $("#usersurname").val();

                $.post(
                    "http://localhost:8080/bookbay/index.php/Home/test", 
                    {'name':name,'surname':surname},
                    function(data)
                    {
                        alert(data.name + " " + data.surname);
                    },
                    "json");
            });         
          });

Here is my contoller:

class Home extends CI_Controller
{
    function test()
    {
        $name = $this->input->post('name');
        $surname = $this->input->post('surname');
        $array = array('name' => "*".$name."*", 'surname'=> "?".$surname."?");
        echo json_encode($array);
    }
} 

Now when I click the submit button it just forwards me to page 1?? I'm not sure what I'm doing wrong

Answer 1

This was caused because $(document).ready( can't be used with jQuery Mobile.

In my blog ARTICLE you will find out why is this important and more about jQuery Mobile page events. Or you can take a look HERE.

You should change your code to:

$(document).on('pagebeforeshow', '#page2', function(){       
   $('#submit').click(function() 
   {
       var name = $("#username").val();
       var surname = $("#usersurname").val();

       $.post(
           "http://localhost:8080/bookbay/index.php/Home/test", 
           {'name':name,'surname':surname},
           function(data)
           {
               alert(data.name + " " + data.surname);
           },
           "json");
   });
});