Trying to search wunderground locations with javascript, jquery, and html

Question

The code below doesn't work. Trying to search weather locations. When I search nothing happens.

<input type="text" id="query" /><button>search</button><br />
<div id="results">

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var url='http://autocomplete.wunderground.com/aq?format=JSON&query=';
var query;
    $('button').click(function(){
        query=$("#query").val();
        $.getJSON(url+query,function(json){
            $.each(json.results,function(i,location){
               $("#results").append('<p>'+location.name+'</p>');
            });
        });
    });
});
</script>

FYI I am very inexperienced at coding (copied script from another website)

is autocomplete.wunderground.com the domain of the same site from where your page is served? — Parth Thakkar, May 09 '12 at 15:13
Parth, no. Bazmega, http://webhole.net/2009/11/28/how-to-read-json-with-javascript/ — sears, May 09 '12 at 15:17

Okan Kocyigit · Accepted Answer · 2012-05-09T15:49:32.840

4

If you want to make cross domain request, you have to that with JSONP, and you should append callback function for JSONP request as mentioned here in wunderground.com, try this.

$(document).ready(function() {
    var url = 'http://autocomplete.wunderground.com/aq?format=JSON&query=';
    var query;
    $('button').click(function() {
        query = $("#query").val();
        $.getJSON(url + query + '&cb=callbackfunc', function(json) {
            $.each(json.results, function(i, location) {
                $("#results").append('<p>' + location.name + '</p>');
            });
        });
    });
});

UPDATE:

At first you should learn what is JSONP.

cb parameter is for JSONP callback function in wunderground API as you can see here in documentation.

If you still doesn't understand why you need to use jsonp callback function,

open these two links, and you will see what is the differences between them.

without cb paramater

with cb paramater

edited May 09 '12 at 15:49

answered May 09 '12 at 15:26

Okan Kocyigit

13,203
18
70
129

Sorry, not good with coding, what should the value of &cb= be? – sears May 09 '12 at 15:35
@ocanal, Thanks a lot for the information above, the links to [without cd, with cb] are the same really, can u tell what is the difference please? – shireef khatab Nov 23 '16 at 12:20
@shireefkhatab yes, there is just only one difference, json is wrapped with `mycallbackfunc` when you use callback parameter. that means function is called when jsonp request done. if you have a mycallbackfunc in your page, that will be called with a json parameter. jquery handle jsonp request so you don't need to worry about that. – Okan Kocyigit Nov 23 '16 at 12:29
can u give a hint what would cb look like please? – shireef khatab Nov 23 '16 at 12:50
@shireefkhatab, here is a simple jsonp request with pure javascript, http://jsfiddle.net/j8h6jomb/7/ – Okan Kocyigit Nov 23 '16 at 14:56
Apprecisted!, I`m trying to pull the data through $http with angularjs, and i get this error: XMLHttpRequest cannot load https://autocomplete.wunderground.com/aq?query=London. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access. Note: i use live-server or browser-sync as a server – shireef khatab Nov 23 '16 at 15:33
@ocanal Thank you very much! – shireef khatab Nov 23 '16 at 16:01

score 0 · Answer 2 · answered May 09 '12 at 15:29

You can't pull data from remote sites using JavaScript for security reasons (see the same origin policy).

Work arounds involve CORS (limited browser support, not supported by that service), JSON-P (not obviously supported by that service) and using a proxy on your own server.

Trying to search wunderground locations with javascript, jquery, and html

2 Answers2

Linked