How to create 5 jQuery AJAX calls using event handlers?

Question

I am developing a registration system for my school / workplace, and instructors need a detailed list of students who fall into 5 separate categories:

• They did not meet and did not register the absence.
• Not met, but recorded after 8 o’clock in the morning.
• Not met, but registered without registration until 8 in the morning.
• Met, but recorded the reason for the absence after 8 o’clock in the morning.
• Met and registered before 8 in the morning.

As the first one (I have not met and not registered) I will upload student data to three databases for verification, so that the data can take some time. I decided instead of loading all the data through PHP, showing a white screen to the user until everything is loaded, instead I will load the page and then get the data using the jQuery AJAX functions.

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 if I statically enter the div value and store the div value in 5 different names (div1, div2, etc.).

To get the data, I have 5 divs that look 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 a unique identifier that AJAX must send via POST in order to receive responsible data. This is why I realized that something about this would be impossible:

$("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()
                });
            });
        });
    });
});

div eventObject.data div PHP. div eventObject, , , , , , .

, :

$(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);
    }
});

, JS JQuery-, , , - . , !

Answer 1

, , , .

, - , JQuery , .

e div

div = e;

5 :

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

, AJAX , :

div = 5
div = 5
...

div, :

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

e-lement, , AJAX, , , , POST.

:

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