Click here to Skip to main content
15,068,988 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
On clicking on the button second time , i want to remove the previous results. How can i do that?

HTML file

HTML
<!doctype html>
<html>
	<head>
		<title>Twitter</title>
		<meta charset=utf-8/>
		<link rel="stylesheet" type="text/css" href="twitter.css">
	</head>	
	<body>
		
		<input type='textbox' value='paris' id='city'></input>
		<button id='btnCity' >Get</button>

		<ul class='container'>
			<script id="weather-template" type="text/x-handlebarstemplate">
				<li  class='weather-list'>
					<p>{{name}}</p>
					<p>Latitude : {{coord.lat}}</p>
					<p>Longitude : {{coord.lon}}</p>
					<p>Wind Degree : {{wind.deg}}</p>
					<p>Wind Speed : {{wind.speed}}</p>
				</li>
			</script>
			
		</ul>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
		<script type="text/javascript" src="handlebars-v3.0.0.js"></script>
		<script type="text/javascript" src="twitter.js"></script>
		<script>
			(function(){
				var txtCity = $('#city');
				var liWeather = $('.weather-list');

				$('#btnCity').on('click',function(){
					
					var url = 'http://api.openweathermap.org/data/2.5/weather?q='+ txtCity.val();
					var twitter = new Twitter({
						url : url,
						template : $('#weather-template').html(),
						container : $('ul.container')
					});
					twitter.fetch();

				})
			}());
		</script>
	</body>
</html>


JS file

JavaScript
//(function(){
	/*var Twitter ={
		init: function(){
			this.url = 'http://api.openweathermap.org/data/2.5/weather?q=delhi';
		}	
	}*/

	function Twitter(config ){
		//console.log(config);
		this.url = config.url,
		this.template = config.template,
		this.container = config.container 

	}

	Twitter.prototype.attachTemplate = function() {
		//console.log(this.template);
		//console.log(this.weather);

		var template = Handlebars.compile(this.template);
		var html = template(this.weather);
		this.container.append(html);
	};

	Twitter.prototype.fetch = function() {
		console.log(this.url);
		var self = this;
		$.getJSON(this.url,function(data){
			self.weather = {
				name : data.name,
				coord : {
							lat : data.coord.lat,
							lon : data.coord.lon
				},
				wind : {
							deg	:data.wind.deg,
							speed : data.wind.speed
				}
			}
			self.attachTemplate();
			// self.display();
			
		});
	};

	Twitter.prototype.display = function() {
		console.log(this.weather);
		console.log(this.weather.coord);
		console.log(this.weather.wind);
	};
	
//})();
Posted
Updated 13-Feb-15 23:04pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900