Help with my Wikipedia Zip Line!

After trying to fix my wikipedia viewer project for over a week, I’ve decided to give up and throw in the towel. I’ve looked in every nook and cranny, read a bunch about jQuery, JSON, API’s, etc. to no avail. I’ve tried to even copy other people’s code and, even that, didn’t work. I almost punched my laptop, but then I realized it’s all I got. I also blamed it on Codepen, because ITS console didn’t display error messages, when the brower’s console DID. I am now coming to grips with the fact that I believe this is exactly what the creators of this zipline intended. I submit :pensive:. Please check my codepen and let me know where I’m going wrong… I think my AJAX/JSON request is silently failing. Anyways… I better get away from my pc for a few…:rage:
Wiki viewer Codepen Zip Line

Fear not, your problems are easily solved.

  1. <button>s inside of <form>s have a default behavior of triggering the form’s submit event. This reloads the page, and that’s probably the thing you’ve been trying to solve the past week. There are two fixes, both of which you should know and remember.
  • Set the button’s type. <button type="button" class="btn" id="searchButton">. The default type is “submit”.
  • Every event handler gets passed an event object. This object has a method we can use to prevent default behavior. It’s called ahempreventDefault.
function clickHandler(event) {
   //... that's it!
// assign the handler or write inline
  1. jQuery’s $.ajax function doesn’t actually take a callback function as its second parameter. Change that function to $.getJSON and it’ll work right away! Even better, you can use promises (but it’s not required).
    .done(function successHandler(data) {
        // do stuff with data
    .catch(function errorHandler(error) {
        // do stuff with error
1 Like

You’re a life saver… It’s truly always those little things that can throw things off. I can’t say thank you enough!! Thanks!!