Ajax is not working properly - php

Question

Finding place when enter pincode using ajax php. But it doesn't work properly. When we enter each pincode that pincode is checked and then result of that place is displayed .
<label for="pincode">Pin-Code:</label>
<input name="pincode" type="text" class="text" id="pincode" />
<div id="section1"></div>
I am setting this section as input fields.
<script>
$(document).ready(function() {
$('#pincode').keyup(function() {
//ajax request
$.ajax({
url: "pincode_check.php",
data: {
'pincode' : $('#pincode').val()
},
dataType: 'json',
success: function(data) { console.log(data.success);
if(data.success){
$.each(data.results[0].address_components, function(index, val){
console.log(index+"::"+val.long_name);
$('#section1').append( val.long_name+'<br>');
});
}
},
});
});
});
</script>
This is ajax section for send data to pincode_check.php.
I am doing pincode_check.php look like below. Here passing value retrive in $pincode variable then using maps.google.com to find logitude of that place. Then find corresponding place. That place name display in below the form field. But it does not worked properly.
<?php
$pincode=$_REQUEST['pincode'];
$geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$pincode.'&sensor=false');
$response= json_decode($geocode); //Store values in variable
$lat = $response->results[0]->geometry->location->lat; //Returns Latitude
$long = $response->results[0]->geometry->location->lng; // Returns Longitude
$geocode=file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?latlng='.$lat.','.$long.'&sensor=false');
$data= json_decode($geocode);
if($data==true)
{ // Check if address is available or not
$data->results[0]->formatted_address ;
$data->success=true;
echo json_encode($data);
}
else {
$data->success= false;
echo json_encode($data);
}
?>

Answer 1

Try this, In your ajax response success object was missed. I have rewritten the code,
also, pincode_check.php
if($data==true)
{ // Check if address is available or not
$data->result[0]->formatted_address ;
$data->success=true;
echo json_encode($data);
}
else {
$data->success= false;
echo json_encode($data);
}
In HTML: should be (Remove # in html id element)
<div id="section1"></div>
instead of
<div id="#section1"></div>
UPDATE:
<script>
$(document).ready(function() {
$('#pincode').keyup(function() {
//ajax request
$.ajax({
url: "pincode_check.php",
data: {
'pincode' : $('#pincode').val()
},
dataType: 'json',
success: function(data) { console.log(data.success);
if(data.success){
$.each(data.results[0].address_components, function(index, val){
console.log(index+"::"+val.long_name);
$('#section1').append( val.long_name+'<br>');
});
}
},
});
});
});
</script>
HTML:
<label for="pincode">Pin-Code:</label>
<input name="pincode" type="text" class="text" id="pincode" />
<div id="section1"></div>
PHP code
<?php
$pincode=$_REQUEST['pincode'];
$geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$pincode.'&sensor=false');
$response= json_decode($geocode); //Store values in variable
$lat = $response->results[0]->geometry->location->lat; //Returns Latitude
$long = $response->results[0]->geometry->location->lng; // Returns Longitude
$geocode=file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?latlng='.$lat.','.$long.'&sensor=false');
$data= json_decode($geocode);
if($data==true)
{ // Check if address is available or not
$data->result[0]->formatted_address ;
$data->success=true;
echo json_encode($data);
}
else {
$data->success= false;
echo json_encode($data);
}
?>

Answer 2

Try this which has a ready handler
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#pincode').live('change', function() {
//ajax request
$.ajax({
url: "pincode_check.php",
data: {
'pincode' : $('#pincode').val()
},
dataType: 'json',
success: function(data) {
if(data.success ==true){
$('#section1').html(data.address_components);
}
},
});
});
});
</script>

Answer 3

Debug your script.
Are you getting data in your $pincode variable?
var_dump($pincode);
I prefer use a defined method in the ajax request, like post:
$.ajax({
url: "pincode_check.php",
method: 'POST'
data: {
'pincode' : $('#pincode').val()
},
dataType: 'json',
success: function(data) {
if(data.success ==true){
$('#section1').html(data.address_components);
}
},
});
Your success function has already the response, there is no need to use the conditional:
if(data.success ==true){
$('#section1').html(data.address_components);
}
Try to debug it to know what data are you recieving:
success: function(data) {
console.log(data);
}
},