I'm trying to save a Google Maps Marker's coordinates to my database after the user placed the Marker. When I send the coordinates to the server, I always receive an empty $_POST array.
Where did I go wrong?
Here's my index.php:
<!DOCTYPE html>
<html>
<head>
<title>MyMap</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/main.css">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyCZseZXpWTYc2Z2aI4mJEtoLz8WUYQCITM"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var loc;
var map;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(46.2428219,20.14682)
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
var lat = event.latLng.lat();
var lng = event.latLng.lng();
$.ajax({
type: "POST",
url: "index.php",
data: lat,
success: function (data) {
console.log(data);
}
});
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="result">
<?php
print_r($_POST);
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo 'POSTed';
} else {
echo $_SERVER['REQUEST_METHOD'];
}
?>
</div>
<div id="map_canvas"></div>
</body>
</html>
Add a key to your data?
data: {'lat':lat}
Try something like this:
var lat_value = event.latLng.lat();
var lng_value = event.latLng.lng();
$.ajax({
type: "POST",
url: "index.php",
data: {lat:lat_value},
success: function (data) {
console.log(data);
}
});
In your index.php script use:
$lat=$_POST['lat'];
Related
I have a script code to upload photos on imgur using AJAX. But I can not hide the Client-ID of the public.
I think I need to use PHP to do that use this code:
<?php $idClient = "abc12abc12abc";
echo $idClient ;
?>
But it turned Client-ID is still visible when in view its source code.
Here's the full code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Imgur Upload Test</title>
<style>
#image_preview, #image_preview_2 {
max-width: 200px;
}
</style>
</head>
<body>
<h1>Imgur Upload Test</h1>
<input type="file" id="image_selector" />
<div id="image_preview"></div>
<h2>Image On Imgur:</h2>
<div id="image_preview_2"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#image_selector").change(function() {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result.substr(e.target.result.indexOf(",") + 1, e.target.result.length);
$("#image_preview").html("<img src='" + e.target.result + "' />");
$.ajax({
url: 'https://api.imgur.com/3/image',
headers: {
'Authorization': 'Client-ID <?php $idClient = "abc12abc12abc";
echo $idClient ;?>'
},
type: 'POST',
data: {
'image': data,
'type': 'base64'
},
success: function(response) {
$("#image_preview_2").html("<img src='" + response.data.link + "' />");
}, error: function() {
alert("Error while uploading...");
}
});
};
reader.readAsDataURL(this.files[0]);
});
</script>
</body>
</html>
What's the solution?
How i can check $enjaz_youm every second in the index page for my system
<?
if($enjaz_youm == 80) {
echo "<script>";
echo "alert('This is an alert from JavaScript!');";
echo "</script>";
}
?>
Thanks
You can try this.
<?php
if ($_POST['action']=='enjaz_youm') {
//do your checks here
if ($enjaz_youm==80) echo '1';
die();
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var refreshId = setInterval( function()
{
var request = $.ajax({
url: "<?=$_SERVER['PHP_SELF']?>",
type: "POST",
data: {action : 'enjaz_youm'},
dataType: "html"
});
request.done(function(msg) {
if (msg=='1') {
alert("This is an alert from JavaScript!");
}
});
}, 1000);
});
</script>
</head>
<body>
</body>
</html>
I am actually trying to do exactly what has been done in this example "http://jsfiddle.net/BrLp7/" but unfortunately not able to perform this task when retrieving data from csv file. Below is my code which doesn't output anything and when we click on a point in a given example the resulting graph has to be stored in some text file in this form 5,10,13 if last point was clicked.
<html>
<head>
<title>A BASIC HTML FORM</title>
</head>
<body>
<FORM NAME ="form1" METHOD ="POST" ACTION = "BasicForm.php">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'Input'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Units'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var x=this.series.processedXData.indexOf(this.x);
var items = line.split(',');
seriesData =[];
$.each(items, function(itemNo, item) {
if (itemNo < x) {
seriesData.push(parseFloat(item));
} else if (itemNo == x){
seriesData.push(0);
}
});
}
this.series.setData(seriesData);
}
}
}
},
series: []
};
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var series = {
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item)); });
options.series.push(series);
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- 3. Add the container -->
<div id="container" style="width: 1400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
</FORM>
</body>
</html>
Reading through several posts, I have got the basic idea of creating google charts but I am still not clear with how it is created from data extracted from tables in DB. Some json parsing of objects is done, but not clear with it. I have written some code. Please provide me with some direction ahead.
//chartDraw.php
<html>
<head>
<!--Load the AJAX API -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>">
<script type="text/javascript">
//Load the visualization API and the piechart package
google.load('visualization','1',{'packages':['corechart']});
//Set a callback to run when the google visualization API is loaded
google.setOnLoadCallback(drawchart);
function drawChart(){
var jsonData = $.ajax({
url:"getdata.php",
dataType:"json",
async:false
}).responseText;
//Create our data table out of JSON data loaded from server
var data=new google.visualization.DataTable(jsonData);
//Instantiate and draw our chart, passing in some options
var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data,{width:400,height:240});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart -->
<div id="chart_div"></div>
</body>
</html>
//getdata.php specified in the url property
<?php
mysql_connect('localhost','uname','123456');
mysql_select_db('rcusers');
$sqlquery1="select userid,group_name,req_nodes,actualPE from jobs where userid='zhang' limit 200";
$sqlresult1=mysql_query($sqlquery1);
while($row=mysql_fetch_assoc($sqlresult1)){
$userDetails[]=$row;
}
?>
What next and How am I supposed to send the data to json objects and where? I am confused..
This simple example may be help you
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#test').click(function() {
$.ajax({
type: 'POST',
url: 'fetch_data.php',
dataType: 'json',
cache: false,
success: function(result) {
var data = google.visualization.arrayToDataTable([
['T', result[0]],
['W', result[1]],
['E', result[2]]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
});
});
});
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
click
</body>
</html>
fecth_data.php
<?php
$array = array(1,2,3,4);
echo json_encode($array);
?>
In My Project I am having some javascript to implement my work, but it is not taking when I am starting the page,but it is working after reloading the page.
Here is the code:
<?php
require_once"session.php";
$slat =$_GET['slat'];
$slang =$_GET['slang'];
$elat =$_GET['elat'];
$elang =$_GET['elang'];
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php require_once"header.php";?>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Near My Location Contacts</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
/* function refreshPage() {
alert('dfg');
window.location.href,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : true
}
}
refreshPage();*/
//<![CDATA[
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
//var haight = new google.maps.LatLng(37.7699298, -122.4469157);
//var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
var haight = new google.maps.LatLng(<?php echo $slat;?>,<?php echo $slang;?>);
var oceanBeach = new google.maps.LatLng(<?php echo $elat;?>,<?php echo $elang;?>);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function calcRoute() {
var request = {
origin:haight,
destination:oceanBeach,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();calcRoute()">
<div data-role=page id=nmContacts >
<div data-role=header data-theme="e" >
Back</font>
<h1 align="left"><font size="2px">Near My Contacts</font></h1>
</div>
<div data-role=content style="width:100%;height:100%;">
<div data-role=content id="map_canvas" style="width:95%; height:300px"></div>
<div id="directionsPanel" style="width:97%;height 100%"></div>
</div>
</body>
</html>
In the above I am having body onload it is not working at the first time after refreshing only it is working.
Here is the answer:
Before You are calling to this page You have to specify in href like the following
assume that you are having the following link to load:
sample
here `href="external" You have to specify otherwise it wont work.....