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:
undefined?action=opensearch&format=json&origin=*&search=
and after:
https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&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.
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
Let’s call the working and failing codepens working_code and failing_code respectively.
$(“form”).submit(function(event)
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
$(“form”).submit(function(event)
failing_code is still not working
The problem with your failing_code is that you are executing the function right away here:
$("form").submit(submitHandlerProcessor(event));
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:
$("form").submit(submitHandlerProcessor);
2 Likes
Thank you. The problem is solved.