Troels M. B. Jensen Troels M. B. Jensen - 1 year ago 65
Ajax Question

How do I create 5 JQuery AJAX calls using eventhandlers?

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("tr").each(function (row) {
"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">

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 =;
$.post("/admin_post/getusers", {area: $(div).attr("id")}, function (data) {

div.find("tr").each(function (row) {
"Row": $(this),
"Name": $(this).find("").html()

The function would save the div in question inside the 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 =;
curVal = $(this).val();

if (preVal != curVal) { = 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 Source

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) {

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"));
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download