Json / Jsonp not connecting to php (Phonegap + jquerymobile)

Posted by Madhulika Mukherjee on Stack Overflow See other posts from Stack Overflow or by Madhulika Mukherjee
Published on 2012-07-10T08:49:40Z Indexed on 2012/07/10 9:15 UTC
Read the original article Hit count: 228

I am trying to make -

  • an android WEB application
  • with phonegap
  • layout with JqueryMobile

What Im doing -

  • An html form that takes ID, name, and address as input
  • 'Serialize's this data using ajax
  • makes a json object out of it
  • Should send it to a file called 'connection.php'
  • Where, this data is put into a database (MySql)

Other details -

  • My server is localhost, Im using xampp
  • I have already created a database and table using phpmyadmin

The problem -

  • My html file, where my json object is created, does not connect to the php file which is hosted by my localhost

Here is my COMPLETE html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 

<!-- Change this if you want to allow scaling --> 
   <meta name="viewport" content="width=default-width; user-scalable=no" /> 
   <meta http-equiv="Content-type" content="text/html;charset=utf-8"> 

   <title>Trial app</title>
   <link rel="stylesheet" href="thestylesheet.css" type="text/css">
    <script type="text/javascript" charset="utf-8" src="javascript1.js"></script>
    <script type="text/javascript" charset="utf-8" src="javascript2.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>

    <script>
    $(document).ready(function () {
        $("#btn").click( function() {
        alert('hello hello');

        $.ajax({
            url: "connection.php",
            type: "POST",
            data: {
                id: $('#id').val(),
                name: $('#name').val(),
                Address: $('#Address').val()
            },
            datatype: "json",
            success: function (status)
            {
                if (status.success == false)
                {
                    alert("Failure!");
                }
                else 
                {
                    alert("Success!");
                }
            }
        });

    });
    });
</script> 
</head> 

<body> 

<div data-role="header">
        <h1>Heading of the app</h1>
    </div><!-- /header -->
<div data-role="content">
    <form id="target" method="post">
        <label for="id">
            <input type="text" id="id" placeholder="ID">
        </label>

        <label for="name">
            <input type="text" id="name" placeholder="Name">
        </label>

        <label for="Address">
            <input type="text" id="Address" placeholder="Address">
        </label>
<div id="btn" data-role="button" data-icon="star" data-theme="e">Add record</div>
        <!--<input type="submit" value="Add record" data-icon="star" data-theme="e">
        -->
    </form>

</div>
</body> 
</html>

And here is my 'connection.php' hosted by my localhost

  <?php header('Content-type: application/json');

$server = "localhost";

$username = "root";

$password = "";

$database = "jqueryex";

$con = mysql_connect($server, $username, $password);
if($con) { echo "Connected to database!"; }
else { echo "Could not connect!"; }
//or die ("Could not connect: " . mysql_error());

mysql_select_db($database, $con);

/*
 CREATE TABLE `sample` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(45) DEFAULT NULL,
  `Address` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`id`)
)

*/
    $id= json_decode($_POST['id']);

$name = json_decode($_POST['name']);

$Address = json_decode($_POST['Address']);

    $sql = "INSERT INTO sample (id, name, Address) ";
    $sql .= "VALUES ($id, '$name', '$Address')";
    if (!mysql_query($sql, $con)) {
        die('Error: ' . mysql_error());
    } else {
        echo "Comment added";
    }
    mysql_close($con);
?>

My doubts:

  • No entry is made in my table 'sample' when i view it in phpmyadmin
  • So obviously, i see no success messages either
  • I dont get any errors, not from ajax and neither from the php file.

Stuff Im suspecting:

  • Should i be using jsonp instead of json? Im new to this.
  • Is there a problem with my php file?
  • Perhaps I need to include some more javascript files in my html file?

I assume this is a very simple problem so please help me out! I think there is just some conceptual error, as i have only just started with jquery, ajax, and json. Thank you.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JSON