×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

*
*
*
*

Thanks. We have received your request and will respond promptly.

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Variable Problem

thread1600-1729732

Variable Problem

Variable Problem

(OP)
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>jQuery(document).ready(function($) { $.ajax({ url : "http://api.wunderground.com/api/fee47ffeca88d616/geolookup/conditions/q/VA/Yorktown.json", 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>

RE: Variable Problem

Hi

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

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

Feherke.
feherke.ga

RE: Variable Problem

(OP)
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

RE: Variable Problem

Hi

That part is simple :

CODE --> JavaScript

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

Feherke.
feherke.ga

RE: Variable Problem

(OP)
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

RE: Variable Problem

Hi

Quote (Rudy)

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 undefined 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

RE: Variable Problem

(OP)
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="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script> 
var location, temp_f;
jQuery(document).ready(function($) { $.ajax({ url : "http://api.wunderground.com/api/fee47ffeca88d616/geolookup/conditions/q/VA/Yorktown.json",
 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

RE: Variable Problem

Hi

Yepp, the problem is what I mentioned earlier.

The JavaScript code is executed when the surrounding script tag is closed. However all the code in your first script 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 :

CODE --> 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="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script> 
jQuery(document).ready(function($) {
  $.ajax({
    url : "http://api.wunderground.com/api/fee47ffeca88d616/geolookup/conditions/q/VA/Yorktown.json",
    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

RE: Variable Problem

(OP)
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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login
Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close