On clicking on the button second time , i want to remove the previous results. How can i do that?
HTML file
<!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
//(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); }; //})();
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)