Problem with Wikipedia Reader

1

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)

https://codepen.io/subhan95/full/VmKbYR/

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

(wikireader.html)

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="source.js"></script>

</head>
<body>
<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">
		<br>
		<br>
			<form action="">
				<input id="search-box" type="text" placeholder="search" required>
				<br>
				<br>
				<button id="submit-btn" class="btn btn-default btn-md" type="submit">Search</button>
			</form>
			<br>
			<br>
			<button type="button" id="random-article" class="btn btn-default btn-lg">Random Article</button>
		</div>
		<!-- 'https://en.wikipedia.org/wiki/Special:Random' -->
		<!-- <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div> -->
		
	</div>
</div>

</body>
</html>

(custom.css)

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

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

(source.js)

function getList(query) {
	$.ajax({
		url:"https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&origin=*&srsearch="+query,
		success: function(json){
			console.log(json);
		},
		error: function(errorMessage) {
			console.log('error');
		    console.log("https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch="+query);
		},
		dataType: "json"
	});
}

$(document).ready(function() {
	$("#random-article").on("click",function() {
	window.open('https://en.wikipedia.org/wiki/Special:Random');
	});

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

Try to add this:

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

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?

4

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.