Variable Problem 1

tumbleweed5673 · Apr 4, 2014

I've been working on this for a week or so now and I admit I am a little new to this. I need to be able to pull information (that works), store the information in a global variable (not sure if it is global?), use the global variable throughout the page. It will show in the first section but not in the second. Thanks in advance, I would apprecaite any help anyone could offer.
Rudy

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>[/URL]
<script>jQuery(document).ready(function($) { $.ajax({ url : "[URL unfurl="true"]http://api.wunderground.com/api/fee47ffeca88d616/geolookup/conditions/q/VA/Yorktown.json",[/URL] dataType : "jsonp", success : function(parsed_json) { var location = parsed_json['location']['city']; var temp_f = parsed_json['current_observation']['temp_f']; var tempout = temp_f; 
//document.write ("Current temperature in " + location + " is: " + temp_f);
//It will show here
} }); }); 
</script>
</head>
<body>
<script>document.write ("Current temperature in " + location + " is: " + temp_f); 
//But not show here
 </script>
</body>
</html>

feherke · Apr 4, 2014

Hi

You can use [tt]document.write()[/tt] only while the document is being rendered. Your AJAX call will be executed after the document was closed. Calling [tt]document.write()[/tt] that time will forcefully open the [tt]document[/tt] again, discarding its current content. Use DOM manipulation instead to display new content.

And no, variables declared with the [tt]var[/tt] keyword inside a [tt]function[/tt] ( or any block ) are not global, but local to the given block.

Feherke.
feherke.ga

tumbleweed5673 · Apr 4, 2014

Thanks for the quick response. I will get reading on DOM. I really don't need to WRITE the variable I just need to have it available for use later down the page. I will get to looking and learning.

Thanks again,
Rudy

feherke · Apr 4, 2014

Hi

That part is simple :

JavaScript:

[gray]// declare the variables outside :[/gray]
[b]var[/b] location, temp_f;
jQuery(document).ready([b]function[/b]($) {
  $.ajax({
    url : [green][i]"[URL unfurl="true"]http://api.wunderground.com/api/fee47ffeca88d616/geolookup/conditions/q/VA/Yorktown.json"[/URL][/i][/green],
    dataType : [green][i]"jsonp"[/i][/green],
    success : [b]function[/b](parsed_json) {
[gray]// omit the var keyword when using them inside :[/gray]
      location = parsed_json[[green][i]'location'[/i][/green]][[green][i]'city'[/i][/green]];
      temp_f = parsed_json[[green][i]'current_observation'[/i][/green]][[green][i]'temp_f'[/i][/green]];
    }
  });
});

Feherke.
feherke.ga

tumbleweed5673 · Apr 4, 2014

Thanks however when I go to use it later in the code, I get an "undefined" error. How can I store the variables so they can be used later in the program? I would like to use a chart program to display the temperature, i.e.72, however when I use it in the code later is not there. Once again thanks for the help.
Rudy

feherke · Apr 4, 2014

Hi

Rudy said:
when I go to use it later in the code, I get an "undefined" error.

"Later" is unpredictable. I suppose the problem is you are not using it later enough. I mean, the AJAX request has to complete first to have proper values in you global variables. Otherwise they will still have their initial values ( in this case [tt]undefined[/tt] as I not assigned anything specific to them on declaration ).

For more advices on what to do we will need to see your actual code.

Feherke.
feherke.ga

tumbleweed5673 · Apr 4, 2014

Maybe I should have posted this first however I tried to keep it simple. The code grabs the local temperature and inserts it as a variable in a chart:

Code:

<html>
  <head>
    <title>My First chart using FusionCharts XT -
          using XML data embedded in the page</title>
<script type="text/javascript" src="Charts/FusionCharts.js"></script>          
<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>[/URL]
<script> 
var location, temp_f;
jQuery(document).ready(function($) { $.ajax({ url : "[URL unfurl="true"]http://api.wunderground.com/api/fee47ffeca88d616/geolookup/conditions/q/VA/Yorktown.json",[/URL]
 dataType : "jsonp",
 success : function(parsed_json) {
    location = parsed_json['location']['city']; 
    temp_f = parsed_json['current_observation']['temp_f'];  
    } 
 });  
 }); 
</script>
</head>
<body>

<div id="chartContainer">FusionCharts XT will load here</div>
<script type="text/javascript"><!--
FusionCharts.setCurrentRenderer('javascript');
var myChart = new FusionCharts("Charts/Column2D.swf", "myChartId", "400", "300", "0");
myChart.setXMLData("<chart caption='Temperature for my area' xAxisName='Temperature' yAxisName='In Celsius' >"+
          "<set label='My Area' value='" +temp_f+ "'/>" + "</chart>");
myChart.render("chartContainer");
// -->
</script>
</body>
</html>

Thanks!
Rudy

feherke · Apr 4, 2014

Hi

Yepp, the problem is what I mentioned earlier.

The JavaScript code is executed when the surrounding [tt]script[/tt] tag is closed. However all the code in your first [tt]script[/tt] tag does is setting up an event handler which be called when the entire document's rendering was done.

The simplest is to move the chart rendering code inside the success event handler, so it gets executed if and when the AJAX request was completed :

HTML:

<html>
<head>
<title>My First chart using FusionCharts XT - using XML data embedded in the page</title>
<script type="text/javascript" src="Charts/FusionCharts.js"></script>          
<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>[/URL]
<script> 
jQuery(document).ready(function($) {
  $.ajax({
    url : "[URL unfurl="true"]http://api.wunderground.com/api/fee47ffeca88d616/geolookup/conditions/q/VA/Yorktown.json",[/URL]
    dataType : "jsonp",
    success : function(parsed_json) {
      FusionCharts.setCurrentRenderer('javascript');
      var myChart = new FusionCharts("Charts/Column2D.swf", "myChartId", "400", "300", "0");
      myChart.setXMLData("<chart caption='Temperature for my area' xAxisName='Temperature' yAxisName='In Celsius' >"+
        "<set label='My Area' value='" + parsed_json['current_observation']['temp_f'] + "'/>" + "</chart>");
      myChart.render("chartContainer");
    } 
  });
});
</script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here</div>
</body>
</html>

Feherke.
feherke.ga

tumbleweed5673 · Apr 4, 2014

Wow! Amazing! It works! I really appreciate all of your help. I need to become more familiar with ajax and javascript. You have no idea how long I've been working this. I really appreciate all of your help. I will study your code.

Rudy

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Variable Problem 1

tumbleweed5673

Programmer

feherke

Programmer

tumbleweed5673

Programmer

feherke

Programmer

tumbleweed5673

Programmer

feherke

Programmer

tumbleweed5673

Programmer

feherke

Programmer

tumbleweed5673

Programmer

Similar threads

Part and Inventory Search

Sponsor