POST request to UPDATE rows

Question

I'm kind of newbie in javascript so I'm looking for some help to create a way to drag and drop geocoding markers, to allow interactive changing addresses. I believe this is possible by updating the LOCATION column rows.

The first step to do it is 'sending' a POST request, right? Well, so I would like to ask if somebody can show me an example, because I don't make any idea how to write and put this POST request in my code!

score 2 · Accepted Answer · answered Apr 08 '12 at 21:54

You must POST to the Fusion Tables API to update a column, but currently you can't do this directly from JavaScript as Google does not set the CORS headers to allow cross-domain posting to their API.

So if you want to do this, you have to "relay" your request through your webserver or something similar. I do it with the following PHP script, then I post the request via JavaScript to my PHP script. And finally, you have to authenticate yourself using OAuth.

$url = "http://www.google.com/fusiontables/api/query";
$relay = new PostRelay($url,$_POST);
echo $relay->relay();

And in class PostRelay the method relay() is defined, the $_POST holds all posted data (represented by $this->data in my class):

public function relay()
{
    $url = $this->getUrl();
    $this->curlHandler = curl_init($url);
    curl_setopt($this->curlHandler, CURLOPT_POST, true);
    curl_setopt($this->curlHandler, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($this->curlHandler, CURLOPT_TIMEOUT, 30);
    curl_setopt($this->curlHandler, CURLOPT_FOLLOWLOCATION, 1);

    if($this->data != null) {
        curl_setopt($this->curlHandler, CURLOPT_POSTFIELDS, $this->getData());
    }

    $remote_answer = curl_exec($this->curlHandler);

    if(curl_errno($this->curlHandler) != 0) {
        $msgErrorNo = "cURL Errornumber: ".curl_errno($this->curlHandler);
        $msgError = "cURL Error: ".curl_error($this->curlHandler);
        throw new RemoteException($url,$msgErrorNo." ".$msgError);
    }
    return $remote_answer;
}

Hey Stefan, could you please show how this could be done here: — Daniel Montenegro, Apr 10 '12 at 02:22
What do you mean with "here"? I can show you how to use my code snippet. — Odi, Apr 10 '12 at 05:50
Okay I see, you mean your example code below. This works very well to display your data. Now if you want to send data to Fusion Tables, you have to use a webserver in between, because Google does not (yet?) allow direct POST request to their API from JavaScript. Setup my PHP script in your webserver, and send the POST request to this script. In jQuery you can use $.post(url-to-php-script,success-function) to to this. — Odi, Apr 10 '12 at 06:25

score 1 · Answer 2 · answered Apr 10 '12 at 23:39

This is possible using the new Trusted Tester Fusion Table API. I've posted some code here:

http://groups.google.com/group/fusion-tables-api-trusted-testers/msg/126228f052eff30e?hl=en_US

To use the new code, you need to be a Trusted Tester. To become a Trusted Tester, simply join the Trusted Tester API group:

http://groups.google.com/group/fusion-tables-api-trusted-testers?hl=en_US

score 0 · Answer 3 · answered Apr 10 '12 at 06:06

<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas { width: 600px;height: 550px; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;

var layer;
var tableid = 3385625;

function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(-30.127460619520974, -51.167964935302734),
zoom: 11,
 mapTypeId: google.maps.MapTypeId.ROADMAP
});

layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'ENDERECO' FROM " + tableid);
layer.setMap(map);
}
//FUNÇÃO PARA ATIVAR OS FILTROS
function changeMap() {
var searchString = document.getElementById('search-string').value.replace(/'/g, "\\'");
if (!searchString) {
layer.setQuery("SELECT 'ENDERECO' FROM " + tableid);
return;
}
layer.setQuery("SELECT 'ENDERECO' FROM " + tableid + " WHERE 'TIPO' = '" + searchString + "'");
var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql=';
var queryUrlTail = '&jsonCallback=?';
var query = "SELECT COUNT() FROM " + tableid + " WHERE 'TIPO' CONTAINS IGNORING CASE '" + searchString + "'"
var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);
var jqxhr = $.get(queryurl,
function(data){
try{
$('#count').html((data.table.rows[0][0]));
}
catch(err){
$('#count').html('0')
}
},
"jsonp");
}

</script>

</head>
<body onload="initialize();">

<div id="map_canvas"></div>

<div style="margin-top: 10px;">
<label>Qual o tipo?</label>
<select id="search-string" onchange="changeMap(this.value);">
 <option value="">--Selecionar/Reset--</option>
 <option value="Bar">Bar</option>
 <option value="Comidas variadas">Comidas variadas</option>
 <option value="Espaço de Cultura">Espaço de Cultura</option>
 <option value="Hotel">Hotel</option>
 <option value="Igreja">Igreja</option>
 <option value="Museu">Museu</option>
 <option value="Restaurante">Restaurante</option>
 <option value="Shopping Center">Shopping Center</option>
 <option value="Teatro">Teatro</option>
</select>
 </div> </br>
 <label>Quantidade:</label>  
 <span id='count'></span>
 </body>
 </html>

LJ Wilson · Answer 4 · 2012-04-08T02:09:16.943

Have a look at jQuery Ajax:

Example (assuming a .NET web service that resides at a web root folder called Ajax):

var Params = "{'myParamName': 'myParamValue'}";

$.ajax({
        type: "POST",
        url: "Ajax/MyWebService.asmx/MyWSMethod",
        data: Params,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            // Handle the response here as you need to...
        },
        failure: function () {
            // Handle failure if needed
        }
    });

POST request to UPDATE rows

4 Answers4

Linked