Definir variáveis no Javascript

[Webster]

O Rafael Laurindo me indicou um script bem legal para identificar a localização do visitante no site pelo Javascript. Só que eu estou com dificuldades em definir as variáveis do PHP dentro do Javascript.

O código original tava assim:

&lt;script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
&lt;script> 
(function(){

  var info = document.getElementById('info');
  var lat = geoip_latitude();
  var lon = geoip_longitude();
  var city = geoip_city();
  var out = '<h3>Informações para seu IP</h3>'+ 
            '<ul>'+
            '<li>Latitude: ' + lat + '</li>'+
            '<li>Longitude: ' + lon + '</li>'+
            '<li>Cidade: ' + city + '</li>'+
            '<li>Cód. Região: ' + geoip_region() + '</li>'+
            '<li>Região: ' + geoip_region_name() + '</li>'+
            '<li>Código do País: ' + geoip_country_code() + '</li>'+
            '<li>Nome do País: ' + geoip_country_name() + '</li>'+
            '</ul>';
  info.innerHTML = out;
  var url = 'http://maps.google.com/maps/api/staticmap?center='+
            lat+','+lon+'&sensor=false&size=300x300&maptype=roadmap&key='+
            'ABQIAAAAijZqBZcz-rowoXZC1tt9iRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQQBCa'+
            'F1R_k1GBJV5uDLhAKaTePyQ&markers=color:blue|label:I|'+lat+
            ','+lon+'6&visible='+lat+','+lon+'|'+(+lat+1)+','+(+lon+1);
  var map = document.getElementById('map');
  map.innerHTML = '<img src="'+url+'" alt="'+city+'">';
  
})();
</script>

Eu estou tentando fazer assim:

var out = '<?php $lat =' + lat + '?>'+
'<?php $long =' + lon + '?>'+
'<?php $cidade =' + city + '?>'+

Só que não tá dando certo...

Obrigado pela ajuda!

Editado Julho 1, 2010 por Webster

[Rafael Laurindo]

Cara, primeiro, espero que tenha um servidor HTTP rodando aí onde irá testar, segundo, o arquivo deve estar com a extensão php, vamos lá.

var teste = "<?php echo $varPHP ?>";
alert(teste);

Faça isso e irá funcionar. Abs.

Editado Julho 10, 2010 por Rafael Laurindo

[Webster]

Rafael, mais uma vez obrigado pelo apoio. Eu consigo definir a variável, só que ela não entra no contexto do javascript. Por exemplo:

No script original tava assim:

var out = '<h3>Informações para seu IP</h3>'+ 
            '<ul>'+
            '<li>Latitude: ' + lat + '</li>'+

Este código retorna Informações para seu IP Latitude: -23.5333 Eu queria armazenar o "-23.5333" no banco. Então escrevi assim:

var out = '<?php $lat =' + lat + '?><?php echo $lat ?><br />'+

Só que ao invés do echo retornar o "-23.5333", tá vindo "+ lat +" Como será que eu faço pra capturar estas informações deste script?

Cara, primeiro, espero que tenha um servidor HTTP rodando ío onde irá testar, segundo, o arquivo deve estar com a extensão php, vamos lá.

var teste = "<?php echo $varPHP ?>";
alert(teste);

Faça isso e irá funcionar. Abs.

[OxCom]

Webster,

Confesso que não sabia desse script sobre localização através de IP. Realmente muito bom.

Quando eu preciso passar alguma informação do JavaScript para uma página PHP, utilizo AJAX (com JQuery):

Considere lat e long sendo as suas variáveis em java script:

em data, a sintaxe é :

nome_para_php : valor_javascript

$.ajax(
        {
          type: "POST",
          url: "_localizacao.php",
          data: {
              latitude: lat,
              longitude: long
          },
          async: false,
          success: function(txt) {
            
            alert(txt); //aqui ele vai imprimir tudo que _localizacao.php der print;
            
          },
          error: function(error) {
            alert(error.responseText); // exibe erro se não conseguir executar o Ajax.
          }
        }
    );

agora é só criar a página PHP: _localizacao.php

$lat = $_POST['latitude']; // porque latitude? porque declaramos assim no javascript : latitude: lat, se fosse xxx: lat, utilizariamos $_POST['xxx'];
$long = $_POST['longitude];

//Crie  o código para inserir no banco de dados.

[Rafael Laurindo]

Concordo com o OxCom, eu usaria o Ajax, fica mais simples. E quanto ao seu script, tem jeito sim, mas você fez algo errado, o concatenador do php é o ponto ".", você estava usando o "+" dentro das tags php. Troca aí e faz o teste. Desta forma como programou, o php somente poderá receber uma var js, com o comando eval do próprio js, que transforma um string em uma expressão numérica. Veja abaixo.

<?php
$lat = 10;
?>

<script type="text/javascript">
	//var JS recebendo de var PHP
	var out = "<?php echo $lat?>"
	alert(out) //a saída será 10

	var lat = 20;
	//var PHP recebendo de var JS
	var out = eval("<?php echo $lat=" lat "?>")
	alert(out) //a saída será 20
</script>

Para gravar no banco, você pode guardar isso no value de um elemento tipo hidden de um form, e depois submeter este form, com o comando submit do js. Já usou DOM na sua vida? É com ele que fará isso.

Editado Julho 10, 2010 por Rafael Laurindo

[Webster]

Legal essa dica OxCom... Obrigado. Só que ainda estou meio perdido... aonde eu coloco o $.ajax? Eu quero colocar esta função no header.php da minha página, que já faz um INSERT no banco de dados com algumas informações do visitante. como eu faço?

Webster,

Confesso que não sabia desse script sobre localização através de IP. Realmente muito bom.

Quando eu preciso passar alguma informação do JavaScript para uma página PHP, utilizo AJAX (com JQuery):

Considere lat e long sendo as suas variáveis em java script:

em data, a sintaxe é :

nome_para_php : valor_javascript

$.ajax(
        {
          type: "POST",
          url: "_localizacao.php",
          data: {
              latitude: lat,
              longitude: long
          },
          async: false,
          success: function(txt) {
            
            alert(txt); //aqui ele vai imprimir tudo que _localizacao.php der print;
            
          },
          error: function(error) {
            alert(error.responseText); // exibe erro se não conseguir executar o Ajax.
          }
        }
    );

agora é só criar a página PHP: _localizacao.php

$lat = $_POST['latitude']; // porque latitude? porque declaramos assim no javascript : latitude: lat, se fosse xxx: lat, utilizariamos $_POST['xxx'];
$long = $_POST['longitude];

//Crie  o código para inserir no banco de dados.

Editado Julho 17, 2010 por Webster

[Rafael Laurindo]

Então meu camarada. O ajax você usa diretamente no código html ou em um script externo, sendo assim, você terá que chama-lo no src da tag script. <script type="text/javascript" src="ajax.js">. O ajax requisita um arquivo no servidor, podendo este ser um arquivo texto (html, "ecoamento" do PHP, .txt) ou uma aplicação XML. Isso dependerá da extensão do arquivo. Exemplo.

Considere todos os arquivos em um mesmo namespace, ou seja, num mesmo espaço, numa mesma pasta ou folder, como quiser.

arquivo.php

<?php
    //o echo bem como o print é a resposta do servidor ao cliente.
    echo 'Latitude: ' $_POST['latitude']; . ' Longitude: ' . $_POST['longitude'];

Veja que é simples. Porém, a estrutura do ajax deve ser coerente, cuidado com ela. Não, simplesmente pegue como usar um framework, e use-o, entenda ainda como ele trabalha, ou seja, que comando, faz o que, para que serve tal comando. Já ouviu falar em json (javascript object notation)? A estrutura abaixo está nesta notação, essa maluquisse. É considerada a melhor notação para definição de um objeto. arquivo.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//repare que tem uma tag script só apra chamar o arquivo externo, o plugin jquery.js
$.ajax({
	type: "POST",
	async: false,
	url: "_localizacao.php",
	data:
	{
		latitude: lat,
		longitude: long
          	},
          	success: function(txt){
            		document.write(txt); //aqui ele vai imprimir tudo que _localizacao.php der print;
          	},
          	error: function(error){
            		document.write(error.responseText); // exibe erro se não conseguir executar o Ajax.
          	}
});
</script>
</head>
<body>
</body>
</html>

Abs.

Editado Julho 17, 2010 por Rafael Laurindo

[OxCom]

Além da dica do Rafael, você pode mandar executar o código depois de toda a página ser carregada. Como???

Assim:

1)Dentro do arquivo ajax.js que você cria uma função:

function GravaLocalizacaoDB(){
 /*
 * Coloque aqui o código AJAX que mencionamos anteriormente... 
 */
}

2) Faça a chamada a esta função assim que toda a página for carregada:

<head>
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajax.js"></script>

<script type="text/javascript">
$(function() {
    
    GravaLocalizacaoDB();
    
});
</script>
</head>

Explicação do script: Note que o código e a chamada da função GravaLocalizacaoDB estão dentro do HEAD. Esse $(function ..... ) indica ao Navegador para executar este bloco de instrução somente quando TODA a página for carregada.

Outra dica é que você pode carregar diretamente o Jquery dos servidores do google. De uma olhada nestas páginas:

http://code.google.com/intl/pt-BR/apis/aja.../documentation/

http://www.pinceladasdaweb.com.br/blog/200...rtir-do-google/

Editado Julho 17, 2010 por OxCom