0

My webpage uses ajax requests to fetch info of different items in my store. However, as of now, everytime you click an item (even the same item) it will reload the data, which is unnecessary as the data is somewhat static. So I tried to fix the problem like so;

var loaded = {}; //save loaded items in dictionary, so it is not necessary to load them again.

    function loaditem(item){
        if(item.text() in loaded){
            postdata = {
                item: item.text()
            };
            $.ajax({
                type: "POST",
                url: "iteminfo/fetch.php",
                data: postdata,
                dataType: "json",
                success: function(data) {
                    loaddata(data);
                    loaded[item.text()] = data; //item.text() is the name of the item in this case
                },
                error: function() {
                    console.log('Something went wrong');
                }
            });
        } else {
            loaddata(loaded[item.text()]);
        }

So to explain the function: the function gets item, which is iniated by html like so: <li onclick="loaditem($(this))">item</li>. The function checks if the name of the item is in loaded (key checking) and if it isn't, it will load the data and save it into loaded.

Problem statement: however, when an item is clicked I get this error:

Uncaught TypeError: Cannot use 'in' operator to search for 'itemname' in undefined

So I searched the web, including StackOverflow, for an answer but I stumbled upon this answer which doens't even give a bloody answer (only an explanation) to the question! How can I access the global var 'loaded' from my function?

Community
  • 1
  • 1
Thomas Wagenaar
  • 6,489
  • 5
  • 30
  • 73
  • what is the content type of the loaded array? you should use $.inArray – Felix Cen Dec 31 '15 at 16:17
  • Elaborate? I am new to jQuery. – Thomas Wagenaar Dec 31 '15 at 16:19
  • Do you use the variable name `loaded` anywhere else? It seems to think that variable is empty. – TbWill4321 Dec 31 '15 at 16:25
  • It is empty at first, when an item is loaded it is saved in `loaded` (see the `success` part in the `ajax` call). Am I saving it correctly? But the problem lies at the `if` part, when an item doesn't exist it should perform the ajax. – Thomas Wagenaar Dec 31 '15 at 16:27
  • Is the code above a true representation of your code? The error you're getting would seem to indicate that `loaded` isn't in the scope of `loaditem`. – James Thorpe Dec 31 '15 at 16:28
  • Yes, that's exactly the error I'm getting. I want to know how to fix that, as `loaded` is declared outside the function. – Thomas Wagenaar Dec 31 '15 at 16:29
  • Being declared outside the function is fine. Whether it's in the scope of the function or not is the issue, hence why I asked if it's a _true representation_ of what you've _actually_ got, or if `loaded` is perhaps hidden away inside the scope of another function. – James Thorpe Dec 31 '15 at 16:29
  • Yes, it is. https://gyazo.com/6d72fe2ffb86fbc891c4a2932f271f50 – Thomas Wagenaar Dec 31 '15 at 16:31
  • You are saying if it is in the array then load it from the server is that correct? if(item.text() in loaded)? – Felix Cen Dec 31 '15 at 16:39
  • @ThomasWagenaar, your link does not illustrate where `loaded` is defined (and initialised). – jcaron Dec 31 '15 at 17:06
  • 1
    Also, of course, your `if` test is inverted. You need to add a `!` (you want to load it if it is **not** already in your cache). That would not resolve the issue here, of course. – jcaron Dec 31 '15 at 17:07

0 Answers0