Wikipedia Viewer - Getting JSON from console but page not displaying results

1

The JSON request I send seems to work. If I type in the getJSON function in the console I get a correct response in JSON and also the results display on the page.

However when I try it on the page using the search box and the submit button nothing happens…

Here is my JS:

$(document).ready(function() {
  $("button").click(function() {
    var url = "https://en.wikipedia.org/w/api.php?&callback=?";
    $.getJSON(url, {
      action: 'query',
      format: 'json',
      generator: 'prefixsearch',
      gpssearch: $("input").val(),
      gpslimit: 10,
      prop: 'pageimages%7Cpageterms',
      piprop: 'thumbnail',
      pithumbsize: 50,
      pilimit: 10,
      redirects: '',
      wbptterms:'description',
    })
      .done(function(data) {
        console.log(data);
        $.each(data.query.pages, function(i, item) {
          $("ul").append("<li>" + item.title + "</li>");
      });
    });
  });
});

and here is my HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Wikipedia Viewer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="style.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="scripts.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
  </head>
  <body>
      <div id="search-area" class="container">
        <form>
          <div class="form-group">
            <input id="search" type="text" class="form-control" placeholder="Find some Wikis" />
            <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" class="btn btn-info" role="button">Random Wiki</a>
            <button for="search" type="submit" class="btn btn-default">Submit</button>
          </div>
        </form>
     </div>
     <ul>
     </ul>
  </body>
</html>

Any help would be appreciated …
I have an idea that I might not be sending asynchronous requests because after submitting the whole page reloads… but not sure…

2

Prevent the page from reloading on submit.

.click( function( evt ){
  evt.preventDefault();
  // rest of your code

Read the documentation here about .preventDefault().

3

that get’s the data printed on the console. but the append function still doesn’t work.

4

A list is being added to ul which is correct. The ul still needs to be appended to the dom.