Get data to display weather using HTML web resource

(0) Share

Report

Posted on by Community Member

Hi experts,

I created an HTML web resource to display the weather for the entered city. My HTML has a text box and a button where the user can enter the city.

However, I want my code to pick up the value of the city from address1_city attribute and display the information dynamically. How can I change my code to make it work?

<!DOCTYPE html>
<html>
<head>
	<title>Weather API</title>
	<script 
		src="code.jquery.com/jquery-3.2.1.min.js"
		integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
		crossorigin="anonymous"></script>
	</head>
	<body>
		<input id="city"></input>
		<button id="getWeatherForecast">Get Weather</button>
		<div id="showWeatherForecast"></div>

		<script type="text/javascript">
			$(document).ready(function() {
				$("#getWeatherForecast").click(function(){
					var city = $("#city").val();
					var key = 'xxxxxxxxxxxxxxxxxxxxxxxxxx';

					$.ajax({
						url: 'api.openweathermap.org/.../weather',
						dataType: 'json',
						type: 'GET',
						data: {q: city, appid: key, units: 'metric'},

						success: function(data){ 
							var wf = '';
							$.each(data.weather, function(index, val){
								wf += '<p><b>' + data.name + "<b><img src=openweathermap.org/.../w"+ val.icon + ".png></p>" +
								data.main.temp + '&deg;C' + ' | ' + val.main + ", " +
								val.description
							});
							$("#showWeatherForecast").html(wf);
						}
					})
				});
			});
		</script>
	</body>
	</html>

Thanks,

Jon

*This post is locked for comments

All responses (12)

Answers (3)

Community Member on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi all,

I've got it to work now. Just had to tweak the image icon URL a little bit.

Thank you so much again for helping me out! Really appreciate it.

Best,

Jon
Suggested answer

Shaminderpal Singh 1,565 on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon,

Since the image is not hosted inside crm that's the reason it is not coming.

Save the image to your local,add it as a web resource file

and replace below highlighted url with your url

<img src="openweathermap.org/.../w"+ val.icon + ".png>

-Shaminder
Community Member on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Thank you so much Shaminder & Goutam for helping me with this task.

Just another thing I was wondering is would you know why the icon isnt displaying the image? In my simple html page it shows the icon:

Thanks,

Jon
Verified answer

Shaminderpal Singh 1,565 on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon,

Remove this line from code //Add a webresource with jquery code and give its reference here

It was an indicator for you to replace the webresource name :)

<script src="..//WebResources/{Specify the schema of jquery file which you created}" >

use the one which is named as jquery1.9.min.js

-Shaminder
Verified answer

gdas 50,091 Moderator on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon ,

try to use Jquery_1.9.1.min
Community Member on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Shaminder,

I added the jqeury reference from the SDK as shown below but I'm still getting message as following:

Did I use the correct jquery file? Or do I am have to do it some other way? I'm sorry I'm a beginner at the technical side of CRM.

Thanks,

Jon
Verified answer

Shaminderpal Singh 1,565 on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon

Use the below one:

<!DOCTYPE html>

<html>

<head>

<title>Weather API</title>

<script src="..//WebResources/new_jquery" ></script>//Add a webresource with jquery code and give its reference here

</head>

<body>

<div id="showWeatherForecast"></div>

<script type="text/javascript">

$(function() {

var city = window.parent.Xrm.Page.getAttribute('address1_city').getValue();

console.log('city', city)

var key = '5c9c57526e87675e29e6dc4028ccb393';

$.ajax({

url: 'https://api.openweathermap.org/data/2.5/weather',

dataType: 'json',

type: 'GET',

data: {q: city, appid: key, units: 'metric'},

success: function(data){

var wf = '';

$.each(data.weather, function(index, val){

wf += '<p><b>' + data.name + "<b><img src=openweathermap.org/.../w"+ val.icon + ".png></p>" +

data.main.temp + '°C' + ' | ' + val.main + ", " +

val.description

});

$("#showWeatherForecast").html(wf);

},

error: function error(data) {

console.log(data);

}

})

});

</script>

</body>

</html>

I have tested it also,go the result as below.

Note-Make sure to add jquery reference by creating a new web resource

-Shaminder
gdas 50,091 Moderator on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon ,

Are you getting any error ? please debug the code and let me know are you getting the city value or not . And in addition also share error if you are getting any.
Community Member on at

Like (0)

Report
RE: Get data to display weather using HTML web resource

Hi Goutam,

Thank you for your reply.

I made the change and removed the input text box tag and button tag. But the web resource is blank when I load the page.

<!DOCTYPE html> <html> <head> <title>Weather API</title> <script src="code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> </head> <body> <div id="showWeatherForecast"></div> <script type="text/javascript"> $(document).ready(function() { $("#getWeatherForecast").click(function(){ var city = window.parent.Xrm.Page.getAttribute("address1_city").getValue(); var key = 'xxxxxxxxxxxxxxxxxxxxxxxxxx'; $.ajax({ url: 'api.openweathermap.org/.../weather', dataType: 'json', type: 'GET', data: {q: city, appid: key, units: 'metric'}, success: function(data){ var wf = ''; $.each(data.weather, function(index, val){ wf += '<p><b>' + data.name + "<b><img src=openweathermap.org/.../w"+ val.icon + ".png></p>" + data.main.temp + '°C' + ' | ' + val.main + ", " + val.description }); $("#showWeatherForecast").html(wf); } }) }); }); </script> </body> </html>
Suggested answer

gdas 50,091 Moderator on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon ,

Could you please try with this -

var city = window.parent.Xrm.Page.getAttribute("address1_city ").getValue();