Problem with Wikipedia Reader

I am trying to build the wikipedia reader project,here’s what I have got so far (I have done it partially,so check the console for the outputs)

While the code works on codepen , it does not do so on my computer(Ubuntu 14.04).Does anyone have any idea why?

Here’s how I do it on computer


<!DOCTYPE html>
<title>Wikipedia Reader</title>

<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.css">

<script src=""></script>
<script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="source.js"></script>

<div class="container-fluid text-center" style="min-height: 95%;">
	<div class="row">
		<!-- <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div> -->
		<div class="col-xs-4 col-xs-offset-4 text-center">
			<form action="">
				<input id="search-box" type="text" placeholder="search" required>
				<button id="submit-btn" class="btn btn-default btn-md" type="submit">Search</button>
			<button type="button" id="random-article" class="btn btn-default btn-lg">Random Article</button>
		<!-- '' -->
		<!-- <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div> -->



body {
	background-color: #151A4F;
	color: #8122D4;
	font-family: 'Roboto Condensed',sans-serif;

.btn-default ,
.btn-default:active:focus {
	border-color: #8122D4;
	background-color: #8122D4;
	color: white;
	box-shadow: none;
	outline: none;


function getList(query) {
		success: function(json){
		error: function(errorMessage) {
		dataType: "json"

$(document).ready(function() {
	$("#random-article").on("click",function() {'');

	$("#submit-btn").on("click",function() {
		var value = $("#search-box").val();
		if (value==='') {
			alert("enter something into searchbox");
		else {

Try to add this:

$("#submit-btn").on("click",function(e) { // <-- add (e)
  e.preventDefault(); // <-- add this line

Thanks that worked.
From the documentation preventDefault() prevents triggeriing of the event.What exactly is the problem in the code and why is this method necessary?

The default action for a form is to send data to the target in the action attribute and refresh the page.

AJAX request is asynchronous and if you have sent an AJAX call and a refresh of the browser was triggered before getting the AJAX response the AJAX call will be canceled and you get an error response.