CODEWITHSUNDEEP
javascriptjquery
msmith1114
msmith1114

Reputation: 3229

jquery .append() working then disappearing?

im working on a Wikiviewer for FreeCodeCamp and i've run into a strange issue.

I have just a basic example running right here (it aint pretty at all right now, just proof of concept): http://codepen.io/msmith1114/pen/peBKxM?editors=1111

im appending here(in the JS code, there isn't very much):

$("#links").append('<li><a href="' + arrayLinks[0] + '">' + arrayName[0] + '</a></li>');
      $("#links").append('<li><a href="' + arrayLinks[1] + '">' + arrayName[1] + '</a></li>');
      $("#links").append('<li><a href="' + arrayLinks[2] + '">' + arrayName[2] + '</a></li>');
      })

So this really has 2 issues (and if you try it with console open you'll see)

1st Main issue: The list will show up (3 links) and then disappear...which makes no sense. jquery.append() should leave them there as far as Im aware, since im appending them to the in my html section

2nd issue: It seems like sometimes getJSON will not return anything. I thought wrapping my statements in the .done() section would make sure not to do anything until the Wikipedia API has returned everything would work but sometimes you just don't get anything back. Is this a WikiAPI problem or something else? (BTW if it doesn't work, just keep typing in "cat" or something in the searchbox and hit search again, it'll eventually work until you run into problem 1 above).

Thanks. Im still learning JS/Jquery so im a bit puzzled why this won't work.

Upvotes: 2

Views: 882

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

The first issue is because you've hooked to the click of the submit button. This doesn't stop the form submission, hence the page gets reloaded. Use the submit event of the form element instead and be sure to call preventDefault() on the provided event:

$(".form-inline").submit(function(e) {
  e.preventDefault();

  // the rest of your code here...
});

As for the second issue, it could be a limiting issue. Without seeing an error it's going to be impossible to give you a definitive answer

Upvotes: 5

Related Questions