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
– Parth Thakkar, Commented May 9, 2012 at 15:13
Parth, no. Bazmega, webhole.net/2009/11/28/how-to-read-json-with-javascript — sears
– sears, Commented May 9, 2012 at 15:17

Okan Kocyigit · Accepted Answer · 2012-05-09 15:49:32Z

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 9, 2012 at 15:49

answered May 9, 2012 at 15:26

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sears Over a year ago

Sorry, not good with coding, what should the value of &cb= be?

shireef khatab Over a year ago

@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?

Okan Kocyigit Over a year ago

@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.

shireef khatab Over a year ago

can u give a hint what would cb look like please?

Okan Kocyigit Over a year ago

@shireefkhatab, here is a simple jsonp request with pure javascript, jsfiddle.net/j8h6jomb/7

|

Quentin · Accepted Answer · 2012-05-09 15:29:19Z

0

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.

answered May 9, 2012 at 15:29

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related