[Solved] Building a Wikipedia Viewer: have to submit twice to make the searched result appear

Edit: I have solved this issue by adding 'event.preventDefault(); at the end of the $(‘form’).submit(function(event) {


For instance, I input ‘butter’ in the search bar and press the ‘enter’ key, the results appear very shortly below the search bar. But if I submit the ‘butter’ second time, the results show. Any hint for me? What’s going on in my code? Thanks in advance.


Maybe you can remove the form tags and address the input directly. I also added Bootstrap and JQuery through the settings.

I suspect is it the form action="#". But not too sure.


<!-- Bootstrap -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->

<!-- juery -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->

<div class="container-fluid">
  <div class="container">
    <h2 class="text-center">Wikipedia Viewer</h2>
<!--   <form id="search-bar" class="text-center" action="#"> -->
    <input id="usersearch" type="text" placeholder="search...">
<!--   </form> -->
   <div class="result big-box">
<!--    results go here -->


$(document).ready(function() {
  $("#usersearch").on("keypress", function(event) {
    // console.log(event.which);
    if (event.which == 13) {

// seperate functions ......

function getData(val) {
  console.log(val); // test result

 // .ajax to get list of wikipedia articles   
  var url = 'https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ val + '&utf8=&format=json&callback=?';// add &callback=?
  // $("#result").html("<h2>hello</h2");
    type: 'GET',
    url: url,
    dataType: 'json',
    error: function() {
      console.log("error occurred");
      // $(".result").html('<p>error</p>');
    success: function (json) {
      // console.log(json.query);// display the json data once success
      var query_arr = json.query;
      var search_arr = query_arr.search;
      console.log(query_arr); // test
      console.log(search_arr.length); // test
      console.log(search_arr[1]); // test
      var html, title, snippet;
      for (var i = 0; i < search_arr.length; i++)
          title = search_arr[i].title;
          snippet = search_arr[i].snippet;
          html += "<div class='small-box'> <a href='https://en.wikipedia.org/wiki/" + title + "'target='_blank'>"+"<h4>"+title+"</h4>"+"<p>" + snippet + "</p>" + "</a></div>";
    // console.log(search_arr[0]); // test
       // console.log(html); // test result

Thanks for your reply. The reason I added ‘bootstrap’ and ‘jquery’ link to my code is because that, I have to remember to repeatedly add them through ‘setting’ for each project (sometimes forgot and the code doesn’t work). So, to make it convenient to me (at least), I just paste these two links in every project to remind myself of the bootstrap and jquery I’m using now for this project.

Regarding the “action = ‘#’”, after trying to remove it without adding event.preventDefault, same issue occurs as I mentioned in the post. Just adding event.preventDefault, the problem completely solved.

Thanks for the update. I learned something new.