why my script does not display the weather

I created a script to display the weather on my site, my problem when I execute it displays nothing.

this is my script :

<!DOCTYPE html>
<html>
<head>
<title>Weather API Test</title>
</head>
<body>
<script type="text/html" id="weather_tmpl">
    <div class="weather_wrapper">
        <div class="top_wrapper top_wrapper_e">
            {{=day0}}
            <div class="bt_control" id="meteo_controller">
                <a href="javascript://">
                    <img src="arrow_open.png" id="meteo_trigger_img" width="27" height="17" alt="Arrow" />
                </a>
            </div>
        </div>
        <div class="bottom_wrapper" id="meteo_future_days">
            <div class="next_days_wrapper">
                <div class="day first">
                    {{=day1}}
                    <div class="clear"></div>
                </div>
                <div class="day">
                    {{=day2}}
                    <div class="clear"></div>
                </div>
                <div class="day last">
                    {{=day3}}
                    <div class="clear"></div>
                </div>
            </div>
            <div class="bottom"></div>
        </div>
    </div>
</script>

<script type="text/html" id="detail_tmpl">
    <div class="date">{{=date.weekday}},
        <br />{{=date.day}} {{=monthname_short}}.</div>
    <div class="temp">{{=high.celsius}}</div>
    <div class="icon">
        <img src="{{=icon_url}}" width="34" height="34" alt="icone" />
    </div>
</script>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="t.min.js"></script>

<script type='text/javascript'>
    (function(){
        var mainTpl = new t($('#weather_tmpl').html()),
            detailTpl = new t($('#detail_tmpl').html());

 $.getJSON('http://api.wunderground.com/api/2ea138a9dd52eabe/forecast/q/CA/San_Francisco.json')
            .done(function(data){
                var tplData = {};
                $.each(data.forecast.simpleforecast.forecastday, function(index, day){
                    tplData['day'+index] = detailTpl.render(day);
                });
                $('body').append(mainTpl.render(tplData));
            });
    })();
</script>
    <script>
          var meteostatus = 0; // closed
          $('#meteo_controller').click(function() {
          if (meteostatus == 0) {
          meteostatus = 1;
          $('#meteo_future_days').fadeIn('slow');
          $('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
          } else {
          meteostatus = 0;
          $('#meteo_future_days').fadeOut('slow');
          $('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
          }
          });
         </script>
</body>
</html>

PS:

The data for the current day, and the forecast for the next 3 are in the array data.forecast.simpleforecast.forecastday.

I've used a templating library called t.js which you can find here

have a nice day

Answers


Replace the two of your scripts (the one with the id of library and the one with t.min.js) with:

<script src="https://github.com/jasonmoo/t.js/blob/master/t.min.js" />
<script type="https://github.com/jasonmoo/t.js/blob/master/template" id="test">
(function(){
        var mainTpl = new t($('#weather_tmpl').html()),
            detailTpl = new t($('#detail_tmpl').html());

 $.getJSON('http://api.wunderground.com/api/2ea138a9dd52eabe/forecast/q/CA/San_Francisco.json')
            .done(function(data){
                var tplData = {};
                $.each(data.forecast.simpleforecast.forecastday, function(index, day){
                    tplData['day'+index] = detailTpl.render(day);
                });
                $('body').append(mainTpl.render(tplData));
            });
    })();
          var meteostatus = 0; // closed
          $('#meteo_controller').click(function() {
          if (meteostatus === 0) {
          meteostatus = 1;
          $('#meteo_future_days').fadeIn('slow');
          $('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
          } else {
          meteostatus = 0;
          $('#meteo_future_days').fadeOut('slow');
          $('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
          }
          });

</script>

You tried to put a script src as a local path on your server, where the file is being hosted on github.

Also, there is a script error.


Need Your Help

installing socket.io with node.js v0.6.18. ws failes during install

node.js websocket socket.io

I am trying to install socket.io using npm on a beaglebone (linux angstrom)

command line steals focuse from tk window

python-3.x tkinter

so, I have a small program which I run using tkinter. when the user start the program he is asked in the command line to enter a user name. my problem is that after he enters the name, the program ...