CODEWITHSUNDEEP
javascriptjqueryhtmlapigetjson
CodingerSK
CodingerSK

Reputation: 31

$.getJSON() call throwing error

I can't figure out why .getJSON is throwing an error when the call to the parent function is made via a conditional statement. When the if statement is commented out, there does not seem to be an issue and .getJSON gets called. However, I want the user to complete their input (indicated by pressing enter).

The HTML

<div class="text-center searchBar">
  <form action="">
    <input type="text" id="searchText" />
  </form>
</div>

<div class="container displayResults"> </div>

The Javascript:

$(document).ready(function() {
   $('#searchText').keyup(function(e) {
     var searchItem = $('#searchText').val();
     var link = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&gsroffset=&format=json&formatversion=2&callback=?&gsrsearch=' + searchItem;

     if(e.which == 13) { //if user returns enter key
      wikiCall(link);
     }    
   });
});

function wikiCall(wikiLink) {  
  $.getJSON(wikiLink, function(searchResults) {      
    for (var i = 0; i < searchResults.query.pages.length; i++) {
      $(".displayResults").append("<div class='searchResultsContainer'><span style='font-weight:bold; font-size:150%; margin-bottom:100px;'>" + searchResults.query.pages[i].title + "</span><br></br>" + searchResults.query.pages[i].extract + "</div>");
      $(".displayResults").append("<br>");
    }
  }).fail(function(jqxhr,textStatus,error){
    alert(textStatus+": "+error);
  });
}

Upvotes: 0

Views: 240

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

I tested your software and I get only one mistake: keyup instead of keypress plus stop propagation.

In the following your code:

function wikiCall(wikiLink) {
  $.getJSON(wikiLink, function(searchResults) {
    for (var i = 0; i < searchResults.query.pages.length; i++) {
      $(".displayResults").append("<div class='searchResultsContainer'><span style='font-weight:bold; font-size:150%; margin-bottom:100px;'>" + searchResults.query.pages[i].title + "</span><br></br>" + searchResults.query.pages[i].extract + "</div>");
      $(".displayResults").append("<br>");
    }
  }).fail(function(jqxhr,textStatus,error){
    alert(textStatus+": "+error);
  });
}
$(function () {
  $('#searchText').keypress(function(e) {
    var searchItem = $('#searchText').val();
    var link = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&gsroffset=&format=json&formatversion=2&callback=?&gsrsearch=' + searchItem;

    if(e.which == 13) { //if user returns enter key
      wikiCall(link);
      e.preventDefault();
    }
  });
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>


<div class="text-center searchBar">
    <form action="">
        <input type="text" id="searchText" />
    </form>
</div>

<div class="container displayResults"> </div>

The sequence of events when you type a character is: keydown , keypress, keyup .

For the first two events you have the possibility to prevent, while you cannot prevent the character typed on keyup event.

The keyup event is the last event for which you listen and you can only say: ok, this is the character I take an action but I cannot prevent the effect of this charcter, like form submitting.

When you type new line the results of the three events are:

keydown keyCode=13 which=13 charCode=0

keypress keyCode=13 which=13 charCode=13

keyup keyCode=13 which=13 charCode=0

Upvotes: 2

Related Questions