1

I use a local html page as a way to keep track of how many and what shinies i've found. before i made a seperate page with new pokemon's in it if the previous page was full.

What i'm trying to accomplish

Recently i've been changing this system so only one page is used and it loads the image data from a json file. every pokemon inside the json has its own id(eg: id 1, all the way till id 30):

{
    "images": {
        "P1": [
            {
                "id": "1", "name": "snubbull", "size": "small",
                "type": "fairy", "gender": "male_gender",
                "gen": "xy", "huntType": "Soft Resets",
                "lv": "5", "nickname": "none",
                "prevEvo": "none"
            },
            {
                "id": " 2", "name": "granbull", "size": "small",
                "type": "fairy", "gender": "male_gender",
                "gen": "xy", "huntType": "Soft Resets",
                "lv": "5", "nickname": "none",
                "prevEvo": "none"
            }
        ],
        "P2": [
            {
                "id": "1", "name": "zubat", "size": "small",
                "type": "poison_flying", "gender": "female_gender",
                "gen": "xy", "huntType": "Soft Resets",
                "lv": "5", "nickname": "none",
                "prevEvo": "none"
            },
            {
                "id": "2", "name": "golbat", "size": "small",
                "type": "poison_flying", "gender": "female_gender",
                "gen": "xy", "huntType": "Soft Resets",
                "lv": "5", "nickname": "none",
                "prevEvo": "none"
            }
        ]
    }

}

in the above example i made the json a little shorter to prevent this page from becoming super long.

"P1" stands for for Page 1 and "P2" for Page 2(you get the idea).

my problem here is that the page should load "P1" as default, but when i click the previous or next page buttons it needs to unload all of the currently loaded images and load in the next 30 images (in this case from "P2"). 

<script src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript">

    var basePath = "sprites/"
    var baseExt = ".gif"
    function load(){
        $(document).ready(function () {
            var jsonURL = "db.json";
            $.getJSON(jsonURL, function (json){
                var imgList= "";
                    $.each(json.images.P1, function () {
                        imgList += '<a href="dexentries/' + this.name + '.html" target="prev_target"><img src= "' + basePath + this.gen + "ani/" + this.size + "/" + this.name + baseExt + '" class="RESIZER ' + this.gender + ' ' + this.type + '"></a>';
                    });
                $('.pkm_tile').append(imgList);
            });
        });
    }
    load()
        var requestedPage = 1;
        function switchPage(inp){
            if(inp==1){
                requestedPage++;
            }else if(inp==0){
                requestedPage--;
            }

            if(requestedPage >= 1){
                load();
            }else{
                alert("couldn't load page " + requestedPage);
                requestedPage = 1;
                load();
            }

        }


    </script>

so the plan was to put the code that executes the image loading inside a function that is executed at the start, but also re-executed when pressing the Previous/Next Page buttons.

here's the code for the buttons:

<button class="backbutton" onclick="switchPage(0);"><p> ← Previous Page </p></button>
<button class="nextbutton" onclick="switchPage(1);"><p> Next Page→ </p></button>

none of this has actually worked for me, apart from displaying an alert when trying to go lower than page 1.

if anyone knows how to this please let me know, if anyone suggests using something besides jquery to load the data from the json file, i'd be willing to try it out as long as i can still use a json file.

this is my first post on stackoverflow(i dont post many questions on other forums either) so sorry if it's a bit long.

One last note: I noticed that the page that does load only loads in firefox. When I load it in Google Chrome it doesn't even display page 1.

I'm also pretty new to jquery, json files, and JavaScript(on html pages), so you'll probably see a few "nooby" mistakes :P

eman_not_ava
  • 11
  • 2
  • 1
    Since you're staying on the same page, why not just keep a variable that holds the page number? Pressing the next/prev buttons simply changes this number before calling a loading function. When the page is first loaded, you'd set this variable to 1 and call the very same load function. – enhzflep Dec 15 '17 at 14:22
  • hmm that could be an option, i'll try it out and see if it works(i think it would) – eman_not_ava Dec 18 '17 at 11:27
  • but how would i do that: "$.each(json.images.P1, function () {", this is the part that cycles through the image of p1 but i can't do "$.each(json.images.P + imageNumber, function(){" imageNumber would be the variable in this case – eman_not_ava Dec 18 '17 at 11:33
  • Well, P1 and P2 are part of the images object. Iterating through the properties of an object isn't hard. Perhaps you'll find some utility in a question dealing with precisely that: https://stackoverflow.com/questions/8312459/iterate-through-object-properties – enhzflep Dec 19 '17 at 03:59
  • okay so i haven't managed to make it work completely but: https://i.imgur.com/8DpwAZa.png it's a nice start it now looks through each of the objects inside json.images and applies everything from all "P" pages(only 2 right now), next i'll have to fix tit loading everything at once but i liek where this going – eman_not_ava Dec 20 '17 at 14:48

0 Answers0