appendTo shows strange behaviour

Question

What I am trying to do (for now) is query the Wikipedia API with a search string,

$(document).ready(function() {
  $(".search").on("click", getArticles);

  function getArticles() {
    var searchTerm = $("#wiki-search").val().trim();
    console.log(searchTerm);
    var url = "http://en.wikipedia.org//w/api.php?callback=?";
    $.getJSON(url, {
      action: "query",
      format: "json",
      list: "search",
      srprop: "snippet",
      srlimit: 10,
      srsearch: searchTerm
    }, displayArticles);

and from the returned JSON object, display the value of a particular property (snippet in this case) by appending it to a div element:

function displayArticles(wikiJSON) {
  if(wikiJSON.query.searchinfo.totalhits === 0) {
    // resultsDiv.innerHTML = "No results found";
    $("<h3>No results Found</h3>").appendTo("#resultsID");
  }
    else {
      $(wikiJSON.query.search[0].snippet).appendTo("#resultsID");
    }

But as seen in this pen, the snippet value is flashed momentarily on the screen and is gone. Could anyone please explain what's going wrong with my code?

HTML:

      <form role="form">
        <div class="input-group">
          <input class="form-control" id="wiki-search" type="text" placeholder="Enter search string...">
          <span class="input-group-btn">
            <button class = "btn btn-default search">
              <i class = "glyphicon glyphicon-search"></i>
            </button>
          </span>
          <span class="input-group-btn">
            <button class = "btn btn-default random">
              <i class = "glyphicon glyphicon-random"></i>
            </button>
          </span>
        </div>
      </form>
  <div class= "row result-group">
    <div class = "col-xs-12 col-sm-8 col-sm-offest-2 col-md-6 col-md-offset-3">
      <div class = "results" id = "resultsID">


    </div>

I don't see the HTML in the question (my work blocks codepen, which is why SO asks everyone to include all code in the question itself). Do you use a submit button perhaps? It's probably submitting the form, which loads the page again. — Heretic Monkey, Aug 16 '16 at 22:17
yes, actually. I have now updated the qn with the HTML (after removing some enclosing tags which is present in the pen) — snow, Aug 16 '16 at 22:25

score 2 · Accepted Answer · edited May 23 '17 at 12:08

2

There are two issues.

First, your button is implicitly submitting the form (its default type is submit).

So you need to add type="button" to your button elements.

Secondly, the returned html cannot be sent to the jQuery constructor because it is not syntactically correct according to the jQuery constructor. There is a logged error message: "Uncaught Error: Syntax error, unrecognized expression". The result should be sent to the .html() function.

$("<div>").html(wikiJSON.query.search[0].snippet).appendTo("#resultsID")

Working pen

edited May 23 '17 at 12:08

Community

1
1

answered Aug 16 '16 at 22:21

Travis J

81,153
41
202
273

umm... although your answer makes sense, and your pen has removed the error, it still isnt displaying anything to the screen. Nothing is being printed in the console either (there are 4 `console.log` statements). – snow Aug 16 '16 at 22:31
@snow - Did you actually interact with the form? http://i.imgur.com/5VgvDiA.png It does nothing at first *by your design*... – Travis J Aug 16 '16 at 22:33
huh sorry, your corrections are working fine on clicking the button. (I was hitting the ENTER key) – snow Aug 16 '16 at 22:36
As there is no enter key bound to an event it defaults to submitting the form (which reloads the page). An alternative is to simply remove the form since this is all ajax anyway, or to attach the event to the submit of the form and return false. – Travis J Aug 16 '16 at 22:38
why wouldn't detecting the occurrence of an enter key and triggering a click event work? – snow Aug 16 '16 at 22:47
@snow - That would work, but it would be a little excessive. There are many angles you can take to tackle that aspect. – Travis J Aug 16 '16 at 22:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121109/discussion-between-snow-and-travis-j). – snow Aug 16 '16 at 22:56

appendTo shows strange behaviour

1 Answers1