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

score 2 · Answer 1 · edited May 23 '17 at 12:21

2

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

edited May 23 '17 at 12:21

Community

1
1

answered Jan 28 '13 at 14:50

Gajotres

57,309
16
102
130

Thanks for that link. Learnt a good bit there about the page events. Now I've changed my code as you've shown above and it works because I've placed an alert showing the name and surname vars. But the ajax post doesn't seem to work. So I don't know what is wrong with the code or if the problem is coming in the link? – user481610 Jan 29 '13 at 07:30

PhoneGap, jQuery Mobile and Codeigniter

1 Answers1