2016-03-30 16 views
0

私はこのコードを使用して数ヶ月前に私のサイトに現在の気温と気象条件を追加しましたが、今週は空白になっていました。私はjQueryやyahoo APIを更新する必要があると仮定していますが、私が試したものはすべて動作していません。jQueryとYQLの天気が突然停止しました

HTML:

<div id="wxWrap"> 
    <span id="wxIntro"> 
     Currently in Galveston: 
    </span> 
    <span id="wxIcon2"></span> 
    <span id="wxTemp"></span> 
</div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 

はCSS:

#wxWrap { 
width: 240px; 
background: #EEE; /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#e0e0e0',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(224,224,224,1) 100%); /* W3C */ 
padding: 2px 13px 2px 11px; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
} 
#wxIntro { 
display: inline-block; 
font: 14px/20px lato,Verdana,sans-serif; 
color: #666; 
vertical-align: top; 
padding-top: 9px; 
} 
#wxIcon { 
display: inline-block; 
width: 61px; 
height: 34px; 
margin: 2px 0 -1px 1px; 
overflow: hidden; 
background: url('http://l.yimg.com/a/lib/ywc/img/wicons.png') no-repeat 61px 0; 
} 
#wxIcon2 { 
display: inline-block; 
width: 34px; 
height: 34px; 
margin: 1px 6px 0 8px; 
overflow: hidden; 
} 
#wxTemp { 
display: inline-block; 
font: 20px/28px lato,Verdana,sans-serif; 
color: #333; 
vertical-align: top; 
padding-top: 5px; 
margin-left: 0; 
} 

JS:

$(function(){ 

// Specify the ZIP/location code and units (f or c) 
var loc = '77551'; // or e.g. SPXX0050 
var u = 'f'; 

var query = "SELECT item.condition FROM weather.forecast WHERE location='" + loc + "' AND u='" + u + "'"; 
var cacheBuster = Math.floor((new Date().getTime())/1200/1000); 
var url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster; 

window['wxCallback'] = function(data) { 
    var info = data.query.results.channel.item.condition; 
    $('#wxIcon').css({ 
     backgroundPosition: '-' + (61 * info.code) + 'px 0' 
    }).attr({ 
     title: info.text 
    }); 
    $('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />'); 
    $('#wxTemp').html(info.temp + '&deg;' + (u.toUpperCase())); 
}; 

$.ajax({ 
    url: url, 
    dataType: 'jsonp', 
    cache: true, 
    jsonpCallback: 'wxCallback' 
}); 

}); 
+1

あなたが得ているエラーは...? – j08691

+0

それは単に空白になります。これは私が昨年から得たもので、彼も空白です。 http://codepen.io/ibrahimjabbari/pen/MwZzBq –

+0

これは私にも起こっている面白いこと、おそらく彼らはAPIコールを変更?今すぐそれを見てください – JordanHendrix

答えて

0

はresults.channel、あなたは今それを持っているようにヤフーは、クエリ構造を変更し、それを考え出しましたnull:

"data":{"query":{"count":0,"created":"2016-03-30T18:27:42Z","lang":"en- 
US","results":null}},"status":200,"config":{"transformRequest":[null].... 

ここにドキュメントを見てみましょう: https://developer.yahoo.com/weather/

をも照会するには、次の方法に注意してください、あなたはセットアップロジックの多くを持って、そしてあなたのクエリをエンコードする必要はないかもしれません。

<script> 
    var callbackFunction = function(data) { 
    var wind = data.query.results.channel.wind; 
    alert(wind.chill); 
    }; 
</script> 

<script src="https://query.yahooapis.com/v1/public/yql?q=select wind from weather.forecast where woeid in (select woeid from geo.places(1) where text='chicago, il')&format=json&callback=callbackFunction"></script> 

フィドル:

旧フィドルが動作していない、ノートクエリ:http://jsfiddle.net/omarjmh/yFc6J/162/

新フィドルがを作業していて、クエリの解析は、今、あなたはデータが実際に戻っていることを確認することができますいずれかの方法が正しくありません:http://jsfiddle.net/omarjmh/sbwtfap7/

を、私は、コンソールでrepsonseオブジェクトをロギングしています*、それを開いてチェックそれを出す。 アプリで幸運を祈る!

+0

これをテストしたところ、正常に機能しましたか? –

+0

ええ、更新されたFiddlesを見てください – JordanHendrix

関連する問題