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

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


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 = "";
    $.getJSON(url, {
      action: 'query',
      format: 'json',
      generator: 'prefixsearch',
      gpssearch: $("input").val(),
      gpslimit: 10,
      prop: 'pageimages%7Cpageterms',
      piprop: 'thumbnail',
      pithumbsize: 50,
      pilimit: 10,
      redirects: '',
      .done(function(data) {
        $.each(data.query.pages, function(i, item) {
          $("ul").append("<li>" + item.title + "</li>");

and here is my HTML

<!DOCTYPE html>
    <title>Wikipedia Viewer</title>
    <link rel="stylesheet" href=""/>
    <link rel="stylesheet" href="style.css"/>
    <script src=""></script>
    <script src=""></script>
    <script src="scripts.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
      <div id="search-area" class="container">
          <div class="form-group">
            <input id="search" type="text" class="form-control" placeholder="Find some Wikis" />
            <a href="" target="_blank" class="btn btn-info" role="button">Random Wiki</a>
            <button for="search" type="submit" class="btn btn-default">Submit</button>

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…


Prevent the page from reloading on submit.

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

Read the documentation here about .preventDefault().


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


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