How do I create 5 JQuery AJAX calls using eventhandlers?

Question

I am developing a registry system for my school/workplace, and the instructors need a thorough list of the students who fall into 5 seperate categories:

• Have not met and have not registered abscence
• Have not met but registered abscence after 8 am
• Have not met but registered abscence before 8 am
• Have met but registered reason for abscence after 8 am
• Have met and registered before 8 am

As the first one (Have not met and not registered) will be loading student data across 3 databases for checkup, getting the data might take some time. I figured instead of loading all the data through PHP, displaying a white screen to the user untill everything is loaded, instead I would load the page and then get the data using JQuery AJAX functions.

The AJAX loading and displaying works using this code:

//Not met and not registered
div1 = $("#not-met-not-registered");
    div1.find(".text").html("<img src='' class='loader'>");
    $.post("/admin_post/getusers", {area:"not-met-not-registered"}, function(data) {
        div1.find(".text").html(data);

        div1.find("tr").each(function (row) {
            datatable1.push({
                "Row": $(this),
                "Navn": $(this).find("td.navn").html()
            });
        });
    });

However, this only works as I staticly input the div value, and save the div value in 5 different names (div1, div2 etc.).

To recieve the data, I have 5 divs looking like this:

<div id="not-met-not-registered" class="list">
    <label>Students who have not met and not registered abscence</label>
    <img src="/images/search.png" class="search">
    <input type="text" class="search">
    <div class="text"></div>
    <input type="button" value="Print">
</div>

Each div has the unique id that AJAX should send via POST to get the liable data. Which is why I figured something along the lines of this would be ablicable:

$("div.lists div.list").each(function() {
    $(this).on("ready", {div: this}, function (eventObject) {
        div = eventObject.data.div;
        $.post("/admin_post/getusers", {area: $(div).attr("id")}, function (data) {
            div.find("div.text").html(data);

            div.find("tr").each(function (row) {
                datatable.push({
                    "Row": $(this),
                    "Name": $(this).find("td.name").html()
                });
            });
        });
    });
});

The function would save the div in question inside the eventObject.data array, and use the id of that div as search criteria on the PHP page. By saving the div as a value in the eventObject, I would be able to use the same name other places I figured, since, as seen below, that idea worked for my search function using eventhandlers.

Each table is given their own search opportunity using a functional eventhandling code, though not yet built for the full purpose:

$(this).find("input[type=text].search").on("change", {preVal: ""}, function (eventObject) {
    preVal = eventObject.data.preVal;
    curVal = $(this).val();

    if (preVal != curVal) {
        eventObject.data.preVal = curVal;
        alert(curVal);
    }
});

I am aware that I am not a very skilled JS or JQuery coder, and perhaps I am going way out of best practice or missing something very obvious. I really hope you can help me out anyway though!

Answer 1

I managed to find out what the fault was, and figure I would post it here.

So, for some reason, when you call a function in JQuery and save a variable in it, the next time you call the same function and save a new value in the variable, the new variable is saved in the old function call.

Right now I save the element e in div

div = e;

When I call it 5 times:

div = 1
div = 2
div = 3
div = 4
div = 5

Then, when the AJAX returns, what it sees is this:

div = 5
div = 5
...

By removing the div part of it, I made it work:

function load_in(e, link, target, data)
{
    $.post(link, {data:data}, function(data) {
        $(e).find(target).html(data);
        enable(e);
        setCount(e);
    });
}

This function takes the e-lement, the link you AJAX to, the Target that you want your result to go into and whatever data you wish to send as POST data

Callable with this:

load_in(this, "/admin_post/getusers", "div.list", $(this).attr("id"));