Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Trevor Johnson
Trevor Johnson
14,427 Points
Posted by Trevor Johnson
Trevor Johnson
14,427 Points

API Help

Hey there, I am doing a project on freeCodeCamp and I am having trouble with my API. It does not always return a value for me. I am testing it in the console and sometimes it returns, and sometimes it won't. It is not consistent at all.

Here is my project: https://codepen.io/tsjohns9/pen/yXRwwE?editors=1011

And here is the challenge from FCC: https://www.freecodecamp.com/challenges/build-a-wikipedia-viewer

2 Answers

Michael Liendo
Michael Liendo
15,326 Points
Michael Liendo
Michael Liendo
15,326 Points

Hey Trevor, looks like you just about solved it, nice work following the docs! What's happening now is that when the form is submitted, the default behavior is to send that data to a server, and refresh the page...but that's typically not how web apps are made this days. What you want to do is prevent that default behavior and just have the requested information display, without a page refresh.

To accomplish this, the line 

$('#lookUp').submit(function() {

also takes in an event object as a parameter: 

$('#lookUp').submit(function(event) {

and just below that, you want to include the line event.preventDefault() That will stop the page from refreshing (thus removing the info from wikipedia) and everything should display nicely in the console.

Trevor Johnson
Trevor Johnson
14,427 Points
Trevor Johnson
Trevor Johnson
14,427 Points

Thank you Michael it's showing up now!

Michael Liendo
Michael Liendo
15,326 Points
Michael Liendo
Michael Liendo
15,326 Points

Hey Trevor, your JS is setup with an event listener on your button...and only your button. The problem is that since you're in a form element, the user can both hit enter after typing text--doesn't work, or click the button--works.

A (wrong) solution, would be to add another event handler that does the exact same thing, but assign it to the input field. The nice thing about form elements however, is that they come with a handy onSubmit method that will do both: listen to when the enter key is pressed on the input, or any nested buttons are clicked. I'll let you find the way to implement this ;) but chances are you've heard of this method before. Good luck!

Trevor Johnson
Trevor Johnson
14,427 Points
Trevor Johnson
Trevor Johnson
14,427 Points

Awesome man thank you! I'll reach out if I have more questions, and I'll best answer this once I get it

Trevor Johnson
Trevor Johnson
14,427 Points
Trevor Johnson
Trevor Johnson
14,427 Points

Hey Michael, I am still struggling here. Check out what it is updated to now. It should be right based off of the documentation for the submit method. It is still randomly displaying the requested JSON regardless of if I hit enter or click. If I made a mistake in understanding how to use the submit method let me know and i'll take care of that.