Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Posts: 7
Registered: ‎05-26-2012
My Device: 9930 + Playbook
Accepted Solution

JQuery getJSON works in BB browser, but not in compiled webworks app

Hey all,

 

I've been battling with this for a couple of hours now, and I've run out of things to try. I'm very very very new to Javascript programming and WebWorks and this is my first application using both.

 

The application reaches out to the weather underground API and then parses the data to provide a display to tell me if I should put the top on my convertible up or down depending on rules (over 65F, etc.).

 

The app is working in: Ripple, Chrome on my computer (Win 7 x64 Enterprise), the Playbook Browser, the Blackberry Browser (BB 9930 w/ OS 7.1), and when I compile it and deploy to the 9930 simulator that comes with the webworks SDK.

 

When I use the "package and sign" option in ripple and then deploy it to my device however, it does not work. I was able to get into web inspector and eventually get the error message. Here it is (API key removed):

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

http://api.wunderground.com/api/<API KEY>/conditions/q/94523.json?callback=jQuery172041091463435441256_1338084703923&_=1338084727389

 

I am able to visit the above URL in both my web browser and the blackberry browser and it loads completely on both. So it is a valid URL.

 

My config.xml file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="0.0.0.9">  
    <name>Convertible Weather</name>
    <author>Erik Granlund</author>
    <description>A simple application to tell you if you should leave your top open or closed.</description>
    <icon src="images/open_front.png"/>
    <content src="index.html"/>
    
    <feature id="blackberry.ui.menu" required="true" version="1.0.0.0" />
    
    <access uri="*" subdomains="true" />
    
    <feature id="blackberry.app" required="true" version="1.0.0.0"/>
    <feature id="blackberry.app.event" required="true" version="1.0.0.0"/>
    <feature id="blackberry.invoke" required="true" version="1.0.0.0"/>
 
</widget>

 

Can anyone help me get to the bottom of this? I'm truly stumped.

New Contributor
Posts: 7
Registered: ‎05-26-2012
My Device: 9930 + Playbook

Re: JQuery getJSON works in BB browser, but not in compiled webworks app

I forgot to mention, the function that is being called when this error occurs is:

jQuery.getJSON( generateAPIrequest( 'conditions' ), function(data) {
currentCondition = data.current_observation.weather;
currentTemp = data.current_observation.temp_f;
town_name = data.current_observation.display_location.full;
document.getElementById( "header_text" ).innerHTML = 'Weather Forcast for ' + town_name;
alert( 'Town name = ' + town_name );
});

Please excuse my horrid coding - I'm just trying to get it to work at this point and will clean it up later :smileyhappy:
Developer
Posts: 572
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: JQuery getJSON works in BB browser, but not in compiled webworks app

Your code:

jQuery.getJSON( generateAPIrequest( 'conditions' ), function(data) {
currentCondition = data.current_observation.weather;
currentTemp = data.current_observation.temp_f;
town_name = data.current_observation.display_location.full;
document.getElementById( "header_text" ).innerHTML = 'Weather Forcast for ' + town_name;
alert( 'Town name = ' + town_name );
});

 

I believe the first parameter in the $.getJSON function should be the url.

Try changing generateAPIrequest('conditions') to your url like so:

$.getJSON("http://api.wunderground.com/api//conditions/q/94523.json?callback=?", function(data){
		currentCondition = data.current_observation.weather;
                currentTemp = data.current_observation.temp_f;
                town_name = data.current_observation.display_location.full;
                $( "#header_text" ).html( 'Weather Forcast for ' + town_name);
                alert( 'Town name = ' + town_name );
         });

 


Also, try putting the url in a regular browser and see if it returns any data first. Then url the same url structured as above to make the call from your app.

 

Tell me if that worked.

New Contributor
Posts: 7
Registered: ‎05-26-2012
My Device: 9930 + Playbook

Re: JQuery getJSON works in BB browser, but not in compiled webworks app

[ Edited ]

 

Greenback,

 

Thank you for your respnose.

 

I have performed the code change you mentioned and received a different error this time:

Failed to load resource: the server responded with a status of 500 (Error requesting resource)
http://api.wunderground.com/api/675353bbc88d6aad/conditions/q/94523.json?callback=jQuery172083499402...

 

 

The URL above works in both the BlackBerry browser, and the browser on my computer.

 

I also should mention that my Blackberry is connected to a BES server (Blackberry Cloud Services w/ Office 365) that has no IT policies or anything linked to it. Encryption was enabled when I first started testing, but I have disabled it. This error still happens even if I have the mobile network turned off and am operating solely off of WiFi. I have also downloaded the latest simulator for my phone and am not able to get the application to work in that either, though I am unable to connect to the Web Inspector in the simulator so I can not verify that I am getting the same error.

 

The JQuery that I am using is version 1.7.2.min that I downloaded straight from the JQuery website and copied into a folder that is packaged with the application.

 

I have uploaded all of my source files if you want to take a look. The link is: https://s3.amazonaws.com/egranlund.data/development/convertible_weather_0.0.0.13.zip

 

Thank you again for your help.

Developer
Posts: 572
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: JQuery getJSON works in BB browser, but not in compiled webworks app

I  should have the code working shortly! :Clap:

 

 

Developer
Posts: 572
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: JQuery getJSON works in BB browser, but not in compiled webworks app

Changed a few things, added a few functions.

 

The Code

 

index.html
 

<!DOCTYPE html>
<html>
<head>
    <title>Convertible Weather</title>
    <meta id="viewport" name="viewport" content="user-scalable=no,target-densitydpi=device-dpi,initial-scale=1.0" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/weather.js"></script>
</head>
<body onLoad="initMenu()">
    <div class="container">
		<h1 id="header_text">Please select a city</h1>
		<div class="day">
			<div class="car" id="car_day_1"><img src="images/no_data.png" /></div>
			<div class="summary" id="day_1"><h1>No Data!</h1><p>Open the menu, and press "Refresh Location"</p></div>
		</div>
		<div class="day">
			<div class="car" id="car_day_2"><img src="images/no_data.png" /></div>
			<div class="summary" id="day_2"><h1></h1><p></p></div>
		</div>
    </div>
</body>
</html>


weather.js
 

/**
 * Global Variables
 */
var zipCode = '94523';
var town_name = '';
var last_request = '';

/**
 * Function that is called when the page is loaded
 */
function initMenu() {
	//blackberry.ui.menu.clearMenuItems();
	//$('body').html('');
	var refreshButton = new blackberry.ui.menu.MenuItem( false, 1, "Refresh Forecast", getForecast );
	blackberry.ui.menu.addMenuItem(refreshButton);   
}

/**
 * Get the weather forcast for five days including the specified date
 * @param zipCode - The zip code of the place we're looking to get a forcast from
 */
 function getForecast() {
	// Get the current conditions and store
	//alert( 'Starting first request...' );
	$.getJSON("http://api.wunderground.com/api/675353bbc88d6aad/conditions/q/94523.json?callback=?", function(data){
			//pull relevant data from the api, set vars
				currentCondition = data.current_observation.weather;
				currentTemp = data.current_observation.temp_f;
				town_name = data.current_observation.display_location.full;
			
			//output header
				$( "#header_text" ).html( 'Weather Forecast for ' + town_name);
			
			console.log(data); //test that data received
			var dD = $('#day_1');			
				dD.html('');//clear html
				//dD.append(getDay()); // displays day on screen
				dD.append(carPicture(currentTemp,currentCondition)); // display car
				dD.append(formatForecast(getToday(),currentCondition,currentTemp)); //display conditions
				
			//dD.append('<button id="nextDay">Next Day</button>');
			//var nextDay = $('#nextDay'); // button to move to next day
			//nextDay.live('click',function(){
				//alert('Tomorrow is: ' + getTomorrow());
			//});
			//$('#day_2 h1').html(getTomorrow() + '(Tomorrow)');
			//$('#day_2 p').html('Cannot predict the future...');
	 });
	 
 }
 
 /**
  * Format the forecast for output
  * @param dayName - full name for the day (Monday, Tuesday, etc.)
  * @param condition - the condition for the day (Partly cloudy, etc.)
  * @param temperature - the temperature for the day
  */
 
 // added new functions to get day
 
 function getToday(){
	d = new Date();
	n = d.getDay();
	dayName = '';
	//normalize current day from 0-6 to Sunday to Saturday equivalent
	switch(n){
		case 0: dayName = 'Sunday';break;
		case 1: dayName = 'Monday';break;
		case 2: dayName = 'Tuesday';break;
		case 3: dayName = 'Wednesday';break;
		case 4: dayName = 'Thursday';break;
		case 5: dayName = 'Friday';break;
		case 6: dayName = 'Saturday';break;
	}
	return dayName;
 }
 
 //tomorrow
  function getTomorrow(){
	d = new Date();
	n = d.getDay();//today +1 = tomorrow
	//if today is Saturday, set tomorrow to Sunday
	n = n+1; // increment day by 1
	tomorrow = '';
	//normalize current day from 0-6 to Sunday to Saturday equivalent
	switch(n){
		case 1: tomorrow = 'Monday';break;
		case 2: tomorrow = 'Tuesday';break;
		case 3: tomorrow = 'Wednesday';break;
		case 4: tomorrow = 'Thursday';break;
		case 5: tomorrow = 'Friday';break;
		case 6: tomorrow = 'Saturday';break;
		case 7: tomorrow = 'Sunday';break;
	}
	return tomorrow;
 }
 
 function formatForecast( dayName, condition, temperature ) {
 
	forecast =  '<h1>' + dayName + '</h1>';
	forecast += '<h2>' + condition + ' at ' + temperature + 'F</h2>';
	
	return forecast;
 
 }
 
 /**
  * Place the car picture based on the current temperature
  * @param temperature - the temperature of the day you need the car picture for
  * @param condition - the conditions predictide for the day you need the car picture for
  */
 
 function carPicture( temperature, condition ) {
	temperature = parseFloat( temperature );
	
	topdown = false;
	
	if( temperature >= 65 ) {
		topdown = true;
	} else {
		topdown = false;
	}

	if( topdown ) {
		return '<img src="images/open_side.png" class="car" />'
	} else {
		return '<img src="images/closed_side.png" class="car" />'
	}
	
} 

 /**
  * Return a string for the API request depending on the features we need
  * @param feature - The feature name as defined by the Weather Underground API documentation
	@param zipcode - The zipcode of the place we're getting the weather for
  */
 
function generateAPIrequest(feature,zipCode) {
	api_key = '675353bbc88d6aad';
	api_request = 'http://api.wunderground.com/api/' + api_key + '/' + feature + '/q/' + zipCode + '.json?callback=?';
	return api_request;
}

 

Findings

 

In your initial code, you did not have a way of outputting the data onto your screen. If you run this code, you should see that the data is loaded in the simulator, and is displaying the correct vehicle image based on the temperature and conditions. 

 

Deployment Tests

 

TEST #1: Smartphone Deployment


My hunch is that the Wunderground API is either blocking mobile devices by their user agent. I would message them and ask about this. 

 

My previous experience is that this should work. A few of my apps make calls to apis without problem.

 

So I decided to test the same call/code with a minor edit on the Playbook....

 

Test #2: Playbook Deployment

 

Packaging and deploying to the Playbook. WORKED.

(I edited the code to use a button click to run getForecast(), b/c Playbook doesn't have "menus").


[screenshot]

 

 

 

What to do next?

I would send wunderground.com a message. If could be just a bug with their API and how it handles requests. 

 

:Cool2:

New Contributor
Posts: 7
Registered: ‎05-26-2012
My Device: 9930 + Playbook

Re: JQuery getJSON works in BB browser, but not in compiled webworks app

WOW!

 

Thank you _so_ much. I will definitely be dropping Weather Underground a line abuot using their API on my blackberry...or switch API sources entirely.

 

Also, thank you for the corrections/shortcuts you made to my code, I've studied them and will keep them in mind when I finally get this thing working.

 

You rule. :Punk:

Developer
Posts: 572
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: JQuery getJSON works in BB browser, but not in compiled webworks app

Thanks. If you need any help or have more questions(app dev), just DM or message me somehow. 

 

Welcome to BlackBerry! 

 

 

 

New Contributor
Posts: 7
Registered: ‎05-26-2012
My Device: 9930 + Playbook

Re: JQuery getJSON works in BB browser, but not in compiled webworks app

Finally got it working :smileyhappy:

 

Thanks again for your help.