Here is the code snippet I am working with:
function loopCalendar() { // function to loop through calendar elements
var labels = loopDivs('calendarDiv', 'btn_'), // loop through calendar buttons
arrows = loopDivs('calendarDiv', 'icon_'), // loop through calendar arrows
content = loopDivs('calendarDiv', 'content_'); // loop through calendar content
for (var i = 0; i < labels.length; i++) {
var l = labels[i],
a = arrows[i],
c = content[i];
(function(l, a, c) {
// add event listener on click and touch events
On(document.getElementById(l), ['click', 'touch'], function(e){
// display the content of the clicked div
showContent(c, a);
// loop through calendar availabilities
loopAvailabilities(c);
});
})(l, a, c);
}
}
The function loopDivs() retrieves all the ids from a given div with a specified id.
In essence, this script iterates over a calendar and retrieves the id of each month, the id of each arrow representing an open/close icon for the respective month, and the id of the content containing booking availabilities for the month. After completing the iteration, it displays the content of that month and then proceeds to loop through the days of that month using loopAvailabilities(). In loopAvailabilities(), there is another similar script that adds an AJAX GET request to each day to fetch their availabilities when clicked.
While everything functions correctly initially, an issue arises when I close and reopen a month causing the AJAX REQUEST associated with a particular day to make multiple calls. Subsequently, if I repeat the process of opening and closing the month, the AJAX requests multiply accordingly.
What measures can be taken to prevent the repetitive calls of the AJAX request?
If you require additional parts of the script, please inform me as it contains extended code with similar functionalities along with AJAX calls.