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!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Variable Problem 1

Status
Not open for further replies.
tumbleweed5673

tumbleweed5673

Programmer
Apr 4, 2014
5
US
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>
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Hi

Rudy said:
when I go to use it later in the code, I get an "undefined" error.
Click to expand...
"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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

alohaaaron
  • Locked
  • Question
Fixed header table problem
Replies
1
Views
75
jpadie
jpadie
grobermatica
  • Locked
  • Question
Combo Box / URL Variable / Update Form
Replies
0
Views
49
grobermatica
grobermatica
spewn
  • Locked
  • Question
simple ajax does not work in firefox - won't pass variable, ie fine
Replies
6
Views
91
BillyRayPreachersSon
BillyRayPreachersSon
alohaaaron
  • Locked
  • Question
scriptaculous problem
Replies
3
Views
59
BillyRayPreachersSon
BillyRayPreachersSon
KingSlick
  • Locked
  • Question
A variable with the callback 1
Replies
3
Views
62
grtammi
grtammi

Part and Inventory Search

Sponsor

Back
Top