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

Code Feedback
1

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

https://codepen.io/juan-coding/pen/zpgMrB?editors=1111

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.

Best,
Juan

2

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.

html

<!-- 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 -->
   </div>
  </div>
  
</div>

js

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


// 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");
  $.ajax({
    type: 'GET',
    url: url,
    dataType: 'json',
    error: function() {
      console.log("error occurred");
      // $(".result").html('<p>error</p>');
    },
    success: function (json) {
      console.log("success");
      // 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++)
        {
          html="";
          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>";
          $(".result").append(html);
        }
      console.log(html);
  
    // console.log(search_arr[0]); // test
       // console.log(html); // test result
   
  }
});
}
3

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.

4

Thanks for the update. I learned something new.