Trouble with the Wikipedia Viewer Project

Trouble with the Wikipedia Viewer Project
0.0 0

#1

Hi all,

I’ve been working on the Wikipedia viewer and, like others on the forum it would seem, I have been having plenty of trouble with the dreadful docs on the MediaWiki API site.

However, I have persevered and have got my viewer working… well, occasionally. And when it does work, it doesn’t work right.

I’m experiencing two problems that are baffling me. The first is that the API calls only seem to want to work sporadically. As part of my development process I have littered my code with console.log statements and I find that when I try to perform a search I am only meeting with a success maybe 1 in 5 attempts. This doesn’t seem to happen on any of the other projects that I have looked at - has anyone else encountered this problem?

My second problem is that when I do get a successful request, my app is writing the data to the page, but then the page refreshes (I’m assuming it’s an AJAX refresh, but I could be wrong) and the data is lost. It’s incredibly frustrating, because I can see for a split second that my app is working, but then all is lost.

I’d appreciate any thoughts on the issues, as I am very eager to put this one to bed! My code is over at http://codepen.io/lordchancellor/pen/YWwwyq/

Many thanks!


#2

Well, it took me almost an hour to figure out what was wrong (a combination of tenaciousness and lack of coffee in the morning), but I got it. The crux of the issue is that your button is performing a normal button action after you click, but before it executes the handler you assigned it. Before I get into the solution, let’s talk about a few other lines of code, starting on line 96…

function setupPage() {
	var searchBtn = document.getElementById('searchBtn');
	var randBtn = document.getElementById('randBtn');

	if (window.addEventListener) {
		searchBtn.addEventListener('click', function() {
			getData(document.getElementById('searchTerm').value);	
		}, false);
	} else {
		searchBtn.appendevent('onclick', function() {
			getData(document.getElementById('searchTerm').value);
		});
	}
}

You’re 1) using jQuery and 2) not doing anything with the random button, so this whole block can (should) be rewritten thusly:

function setupPage() {
	$('#searchBtn').click(function() {
			getData($('#searchTerm').value());	
		});
}

Much of the code can be changed to the jQuery way. It’s not inherently bad to mix jQuery and vanilla JS like that, but because of the solution, it wouldn’t make sense not to tell you. Here’s the fix:

function setupPage(event) {
    event.preventDefault();  //Stops the button from submitting
    $('#searchBtn').click(function() {
	  getData($('#searchTerm').value());
	});
}

The button was submitting, which reloads the page by default. You may find some other issues once you have the response you’re expecting, but this will get you a JSON response back from the wikipedia API. Everything else looks great, by the way. If you refactor it to use jQuery selectors, it’ll be much more readable, but otherwise, well done!


#3

Wow. Thank you so much for taking the time to look over my code (for so long!) and for helping me out with this fix. I had no idea that having a button in play would be the thing that was causing all of this woe!

I also really appreciate your comments on the code - it’s great to have an experienced pair of eyes go over it! I’ll confess, the reason I’ve used some jQuery, but not much, is that I’m not a massive fan and tend to avoid it where possible (even though I realise that there are times when this could be slowing down my coding time.) In the case of this project, I just could not get an XMLHttpRequest to work with the API, so I used jQuery which I must (somewhat begrudgingly) admit makes life quite a bit easier in this respect.

PortableStick - thank you again. I hope that somewhere down the line I will be able to help some folks on the forum in the same way that you’ve helped me today.