Wikipedia Search Simple Pagination

I want to add pagination to my Wikipedia Search project. I do not want to use any sort of plugins or other dependencies. What I want to do is display one result at a time and have a next and previous button to browse through the results. I’m getting stuck on building the functionality of the back and next buttons. Here’s my pen:

WikipediaSearch -https://codepen.io/totage/full/bMjjOw

Related topic: Displaying results for Wikipedia Viewer

You certainly don’t need to use any plugins or dependencies for this. My suggestion (only what I can immediately think of) is to use a variable outside the XHR to cache the results, perhaps something like this:

var cachedResults;
var currentResult = 0;

function getResults() {
  // ...
  var obj = JSON.parse(this.responseText);
  
  cachedResults = obj;

  // Implement code that displays the previous/next button here.

  // ...
}

function handlePaginationButtonClick(val) {
  // val = 1 for next page, -1 for previous page
  // Implement error checking here so that the user doesn't go
  // outside of the range of 0 to cachedResults.length - 1

  // Code that shows the next entry by using cachedResults
}

I hope that helps!

1 Like

Ah! Gotta think outside the box.

I’ve implemented your code. Now I just have to add the code for the buttons and result handling, and what not,that’s where I’m having trouble, but I think the above code helps to get there, thanks.

Update:

I tried using the code above with code I found at https://forum.freecodecamp.org/t/wikipedia-search-simple-pagination/192912/2, but now I don’t get any results.

It appears that there are too many issues with the code to get to the problem immediately. I should have remembered to suggest that you should move everything between the <script></script> tags to the JavaScript panel in your Pen earlier—there are some minimal highlighting functions, and tools for some formatting/error checking there.

Before moving onto the issues, here are things to learn from this:

  • Appropriate code editor helps you write better code that is less prone to error. This is a very broad topic and I won’t go into this, but if you are making your projects on CodePen, at least use the appropriate panels for type of code/markup (HTML in the HTML panel, CSS in the CSS panel, JavaScript in the JavaScript panel
  • Use comments to organise and, where necessary, describe your code. It helps yourself and others looking over the code to quickly identify problematic code
  • Test your code often. After every substantial change (it varies depending on your project—it’s your judgement to make) you should test that other functionalities are not affected and so that you can catch bugs earlier and at a smaller scale

For future reference, while I think Codpen is fine for a hundred or two lines of code, you should consider using a code editor for anything larger. With the right plugins, and the framework/libraries, you will get the benefits of autocomplete, automated testing… etc., and a lot of the problems we see here would not have come up in the first place. There is a bit of learning to this, though, and it’s (mostly) not magic that happens just by installing things, so just focus on finishing this project first.

Here is the list of things that need to be fixed:

  • Move everything between the <script></sciript> tags in your HTML to the JavaScript panel
  • xmlhttp.onreadystatechange = function() { is not closed, it should close after cachedRes = Obj;
  • if (this.readyState == 4 && this.status == 200) { is also not closed, add another } after cachedRes = Obj;. At this point there should be two }s after cachedRes = Obj;:
            // ...
            cachedRes = Obj;
        }
    }
    
  • getResults() is not properly closed. If I’m not mistaken it’s missing two }'s before the function declaration function prevPage() { /* ... */ }
  • I think the following lines should be inside the getResults() function and just before it closes
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
    
  • If you haven’t already, remove the random } after xmlhttp.send();

At this point you should comment out out everything after the getResults() function and check that you the search function is working (it should, if not, see the code snippet appended—please go through the process above first before you look at the snippet).

I won’t go through the rest of it for you, but here are a few things you should consider (there are just suggestions, there are many way to do this):

  • getResults() is still parsing all of the data to #results but you only want one. Before doing anything else, you should write a function for parsing just an entry of the data stored in cachedRes, something like this perhaps:
    function parseEntry(index) {
        // Parse cachesRes[index] to #results
    }
    
  • You can use parseEntry() in prevPage() and nextPage() by replacing changePage() (I think changePage() is currently too complicated because it’s doing too many things that can be separated into different functions
  • The UI changes for showing the prev and next page “buttons” doesn’t need to be complicated—you actually just need to write a function that shows them and call it at the beginning of getResults(). This UI change will actually only occur once the first time getResults() is pressed. You could consider something similar to:
function showPaginationUI() {
    // Code for showing pagination UI
}

// Then inside getResults():

function getResults() {
    if (cachedRes) {
        showPaginationUI();

        // You should also reset current_page here
    }
}

That’s it form me for now, I hope that helps! :smile:

2 Likes

@honmanyau thank you very much for your input, yes I knew better than to put the javascript in the wrong panel, didn’t know that Codepen had any sort of error checking for the javascript, that does help a bit. At this time, I’m going to rewrite the whole thing, taking what I’ve learned and rewriting it .

Update:

So, now I have the pagination from here and the parser from here. I can’t figure out how to add the search results to the pagination though.

1 Like