Wikipedia Viewer Results disappearing

#1

When I type something into my search bar and hit the submit button I can briefly see that results but then they instantly disappear. Here is my JS:

$(document).ready(function(){ 
  $("#searchBtn").on("click", function(){
    var keyword = $("#search").val();    
    var searchURL = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&prop=extracts&exsentences=1&search="+keyword+"&callback=?";
    
    $.ajax({
    type: "GET",
    url: searchURL,
    dataType: "json",
    success: showData,
    error: function(errorMessage){
      console.log("Error!");
    }
  });
  function showData(data){
    for(i=0; i < 8; i++){
      var entries = '<div class=\"resultBox\"><a href='+data[3][i]+'><h4>'+data[1][i]+'</h4></a><span>'+data[2][i]+'</span></div>';
    $(".searchOutput").append(entries);
      
    }
  }
  });
});

Also ,here is the CodePen project: My CodePen

#2

Because your button is nested form element and you specified type=“submit”, the button tries to submit the form. Your form does not have an action attribute, so the default action is to reload the page. To prevent this, you should take advantage of the event object which is accessible in the ‘click’ event callback function. You can simply specify an argument (i.e. event) and then use the preventDefault method available on the event object like:

  $("#searchBtn").on("click", function(event){
    event.preventDefault();
    var keyword = $("#search").val();

This will prevent the form from submitting and reloading the page.

1 Like
#3

Thank you so much! That worked.