Wikipedia Viewer - break code into smaller functions

Wikipedia Viewer - break code into smaller functions


My wikipedia viewer works fine in my codepen. But I have tried to improve the code by making each function do only one thing. In this codepen I try to put the ajax call in a separate function (submitHandlerProcessor) and the code fails. The ajax call doesn’t pick up the url from the form. Any ideas on what is wrong. Am I doing the callbacks wrong.
Second Issue. How do I get all links to not be underlined. I have set text decoration to none for anchor tags in css with no result.


In your submitHandlerProcessor in your $(this) call this is undefined. I think what you want to do is $(’#searchField’) instead.

For links this CSS rule should do the trick:

text-decoration: none;


I have tried both your suggestions. Second issue resolved. Found a typo in my css. No change with first issue although I’ve replaced $(this) with $(’#searchField’) in codepen


When I run the code it does pick up the url. Before I was the change I was getting:


and after:*&search=test


Yes it does pick up the url now. But the ajax call is made even before the form is submitted. Clicking the search icon somehow triggers form submission, So the page doesn’t load in my codepen. What environment are you testing the code in? It definitely does not work in codepen. Thanks for all your help.


When you click on the the Search Icon, your html has the following:


so the createSearchField function executes. Inside this function, you have the following line:

searchField.onsubmit = submitHandlerProcessor(event);

so the submitHandlerProcessor function executes. That is why the AJAX call is made, because it contains the $.ajax function.


Yes but in this codepen in which the code for submitHandlerProcessor function is inside createSearchField function, the mouse click does not trigger form submission. What happens instead is the html for the form is inserted into the document. Only after entering the search term into the form and pressing the ENTER key is the form submitted. I don’t understand how bringing that code out into a separate function breaks the webpage. maybe I didn’t do the callback correctly


Because in this other Codepen, your createSearchField function dynamically creates a form and the following line

$("form").submit(function(event) {

waits for the form to be submitted (when the Submit button is clicked). Once the form is submitted, then it performs the AJAX call.


Let’s call the working and failing codepens working_code and failing_code respectively.


in working_code and

searchField.onsubmit = submitHandlerProcessor(event);

in failing_code both do the same thing: specify code to run when the submit event on the form is triggered. But in failing_code a mouse click on the search icon triggers the form submit event. I have replaced

searchField.onsubmit = submitHandlerProcessor(event);

in failing_code with


failing_code is still not working


The problem with your failing_code is that you are executing the function right away here:


You can test this by putting a console.log('test') inside the submitHandlerProcessor() function; you’ll see the output as soon as you click the search icon. Also, since it’s executed right away, by passing an event, you are actually passing the click event, overriding the submit event you actually want to prevent.

If you want to reference the function inside the .submit() method you’ll need to write it like so:



Thank you. The problem is solved.