Wikipedia Viewer - prepend to ul not showing up, but loads to console

Wikipedia Viewer - prepend to ul not showing up, but loads to console
0

#1

Okay, not sure why this is, but even though my code works when I display results in the console, my attempt to prepend these results to my unordered list just show nothing. Also, at times when I have entered a new word into the search bar, I have seen the prepended results show up for a split second and then disappear again. Is it my code or is it the code editor?

This is what came up when I logged my search “cat” in the search bar and hit the search button. Also the relevant code is at the top.

Just to clarify, when I replace “console.log” with “(“ul”).prepend”, nothing displays below my search bar. I’ve also tried giving the element an ID of “output”, and using “(”#output").prepend" or “(”#output").html" both give me nada.

Anyone?


#2

Can you either post all of your code or post a link to your Codepen? It makes it easier for us to see the entire solution which could offer clues to why things are not working as you think they should.


#3

Here you go, m8. Thanks!


#4

OK, you have a few issues.

#1) You have an error showing in the console (Ctrl+Shft+J in Chrome), because you must add jQuery before Bootstrap. In fact, you must also add popper.js before Bootstrap 4 for everything to work appropriately and get rid of the warnings. So your Codepen settings for the JS module should look like:

#2) You need to prevent the form from submitting with button is clicked. The default behavior of a single button in a form when clicked is to submit the form based on the action attribute of the form. If nothing is specified (which you don’t want to do anyway), it basically just refreshes the page. To stop that behavior, you will need to change the following:

 $("#searchButton").click(function(){
   var input = $("#input").val();

to

 $("#searchButton").click(function(event){
   event.preventDefault();
  var input = $("#input").val();

#3) Now to the for loop. I would suggest using just adding this line inside the for loop:

$("ul").append("<li><a href=" + data[3][i] + "</a> \n" + data[1][i] + "\n" + data[2][i] + "</li>");

#5

This all worked amazingly! Thank you so much! I had no idea I would need to prevent the button’s default anything from happening when I loaded the page, or that an action like that was even possible. Plus, the popper.js thing is completely new to me. What is Popper.JS for, anyway? I Googled it but it still doesn’t make sense to me.