Estou tomando uma surra daquelas para conseguir fazer alguma coisa simples(dentro do meu conhecimento de Java).
Estou carregando um chart do google em minha página. Em um determinado ponto, desejo obter os valores de um REST que criei e para isso, criei uma função dentro do .
O problema, e que eu não estou conseguindo pegar o valor data que é gerado no retorno no $.ajax.
<script>
google.load('visualization', '1', {packages: ['corechart', 'line']});
function obtemvalores(){
var $resultado = '';
$.ajax({
url: 'http://localhost:8080/messeger/webapi/myresource',
success: function(data){
console.log(data);
$resultado = data;
},
error: function(){
alert('Ops! Deu zebra em alguma coisa!')
}
});
return $resultado;
}
$(document).ready(function(){
google.setOnLoadCallback(function(){
//... resto do código que gera o mapa.
Dentro da função obtemvalores(), observe, que eu criei uma variável chamada $resultado
. Eu não estou conseguindo associar o valor que vem no data para ela, dentro do success do $.ajax
.
Se eu dou um print do valor, como escrito no código, através do console.log(data), dentro do success, o mesmo é apresentado correto. Mas passar o valor para o var que eu desejo não está indo.
Alguém poderia me da uma dica?
obs.: desejo esse valor para que ele seja retornado, como descrito na linha return $resultado
.
--------------------------------- Tentativa 1 ----------------------------------
Complementando a pergunta, o Marcus explicou bem. Consegui fazer alguma coisa em cima do ele disse. Acredito que seja diferente o conceito de variável global do jQuery e diferente do Java(JVM), e isso pode estar me matando.
Consegui fazer o seguinte:
<script>
google.load('visualization', '1', {packages: ['corechart', 'line']});
function obtemvalores(callbackSucesso) {
$.ajax({
url: 'http://localhost:8080/messeger/webapi/myresource',
success: function(data) {
callbackSucesso(data);
},
error: function() {
alert('Ops! Deu zebra em alguma coisa!')
}
});
}
$(document).ready(function(){
obtemvalores(function ($resultado){
console.log('suceso1', $resultado) <----------
google.setOnLoadCallback(function(){
var data = new google.visualization.DataTable();
var options = {hAxis: { title: 'Time' }, vAxis: { title: 'Popularity'}}
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
console.log('suceso2', $resultado);<----------
data.addRows($resultado);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
});
});
</script>
Consigo fazer com que o meu primeiro console.log seja impresso com o valor. Agora segundo não vai mais. O que agrava, e que o serviço do google charts não inicia mais ou seja, não apresenta mais nada na tela.
Teria alguma outra ideia para setar alguma variável em um processo assíncrono e retorna o valor?
----------------------------------- Solução ------------------------------------
Consegui realizar o que eu desejava através de variável global. Segue a solução.
O que eu estava me embolando é que o googlecharts necessita de um valor em json, e eu estava passando como string ai, mesmo a montragem estando certo, ele ficava apresentando a mensagem de que não há valores. :)
Obrigado a todos
var enddate = "default";
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(load_page_data);
function load_page_data(){
$.getJSON('http://localhost:8080/messeger/webapi/myresource',function(data){
chart_data = data;
drawChart(chart_data);
console.log(chart_data)
});
}
function drawChart(chart_data) {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows(chart_data);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}