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.
