Trouble with JQuery $.getJSON and Wikipedia API

Question

So I'm trying to access the Wikipedia API for a Free Code Camp project. I tried using the standard Ajax interface, and it didn't work - I tried using .getJSON, and I still can't get it to work. The problem isn't my buttons, or the link, or the function - the button logs to the console, the link, when entered in-browser, returns JSON data, and the function is currently a console log that isn't logging. Occasionally, the screen goes completely blank.

Additionally, neither CodePen's nor my browser's console logs the "worked" message, but Stack Overflow just did. It's driving me crazy, because this is super basic.

What am I doing wrong? The JS, CSS, and HTML are below, and this is a link to the CodePen.

//ready
$(document).ready(function() {
  //jquery onclick
  $("#search").on("click", function() {
    var term = $("#term").val();
    console.log(term);
//request
$.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&search=" + term + "&callback=?",
      function(json) {
        console.log("worked");
      }); //end getJSON
  }); //end onclick
}); //end docready

@import url('https://fonts.googleapis.com/css?family=Arimo');

#well{
  background-color:#ededed;
}

body{
  background-color:#6b6b6b;
  text-align:center;
}
h1{
  font-family: Times, Georgia, serif;
}

h5, form{
  font-family: 'Arimo', sans-serif;
}

.result{
  background-color: WHITE;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div id="well">
  <header>
    <h1>Wikipedia Viewer</h1>
  </header>

  <body>
    <br>
    <div id="select">
      <h5><a href="https://en.wikipedia.org/wiki/Special:Random" title="Random Wikipedia Article" target="_blank">Click for a random article</a></h5>
      <br>
      <form>
        <input type="text" id="term" name="search" placeholder="What article?">
        <button id="search">Search</button>
      </form>
      <br>
      <h5>Or search above for a specific one</h5>
    </div>
    <ul id="results">
      
    </ul>
  </body>
</div>

Works just fine, you just have to prevent the form from submitting, and build the response — adeneo, Nov 08 '16 at 15:54
Y'all, it was just that Firefox was being weird and Chrome had cached my page. Thanks kindly, though! — naregjan, Nov 08 '16 at 18:24

Mamdouh Saeed · Accepted Answer · 2016-11-08T18:56:18.630

UPDATE: Sorry it was browser cache issue as mentioned after i posted this answer in a comment that wasn't my thought. the question is not clear enough.

it was just that Firefox was being weird and Chrome had cached my page.

Parse wikipedia response array json you called in callback.

json[0] is search term.
json[1] array are titles.
json[2] array are descriptions.
json[3] array are links.

I misunderstand why downvote!

Here is full working example.

$(document).ready(function() {
  $("#search").on("click", function() {
    var term = $("#term").val();
    //request
    $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&search=" + encodeURIComponent(term) + "&callback=?",
      function(json) {
        $("#results").html("");
        $("#results").append("<span>" + json[1].length + " Search results for \"" + term + "\"</span>");
        for (var i = 0; i < json[1].length; i++) {
          $("#results").append("<li><h3><a href='" + json[3][i] + "'>" + json[1][i] + "</a></h3><p>" + json[2][i] + "</p></li>");
        }
      }); //end getJSON
  }); //end onclick
}); //end docready

@import url('https://fonts.googleapis.com/css?family=Arimo');
 #well {
  background-color: #ededed;
}
body {
  background-color: #6b6b6b;
  text-align: center;
}
h1 {
  font-family: Times, Georgia, serif;
}
h5,
form {
  font-family: 'Arimo', sans-serif;
}
.result {
  background-color: WHITE;
}
li {
  list-style: none;
  text-align: left;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div id="well">
  <header>
    <h1>Wikipedia Viewer</h1>
  </header>

  <body>
    <br>
    <div id="select">
      <h5><a href="https://en.wikipedia.org/wiki/Special:Random" title="Random Wikipedia Article" target="_blank">Click for a random article</a></h5>
      <br>
      <form>
        <input type="text" id="term" name="search" placeholder="What article?">
        <button id="search">Search</button>
      </form>
      <br>
      <h5>Or search above for a specific one</h5>
    </div>
    <ul id="results">
    </ul>
  </body>
</div>

Ha I was just asking about getting it to run - it turns out I just needed to clear my cache. Thanks for going over the next steps, though! — naregjan, Nov 08 '16 at 18:24

Trouble with JQuery $.getJSON and Wikipedia API

1 Answers1