livegraphs-django/dashboard_project/static/js/ajax-pagination.js

/**
 * ajax-pagination.js - Common JavaScript for AJAX pagination across the application
 *
 * This script handles AJAX-based pagination for all pages in the Chat Analytics Dashboard.
 * It intercepts pagination link clicks, loads content via AJAX, and updates the browser history.
 */

document.addEventListener("DOMContentLoaded", function () {
  // Initialize AJAX pagination
  setupAjaxPagination();

  // Function to set up AJAX pagination for the entire application
  function setupAjaxPagination() {
    // Configuration - can be customized per page if needed
    const config = {
      contentContainerId: "ajax-content-container", // ID of the container to update
      loadingSpinnerId: "ajax-loading-spinner", // ID of the loading spinner
      paginationLinkClass: "pagination-link", // Class for pagination links
      retryMessage: "An error occurred while loading data. Please try again.",
    };

    // Get container elements
    const contentContainer = document.getElementById(config.contentContainerId);
    const loadingSpinner = document.getElementById(config.loadingSpinnerId);

    // Exit if the page doesn't have the required elements
    if (!contentContainer || !loadingSpinner) return;

    // Function to handle pagination clicks
    function setupPaginationListeners() {
      document.querySelectorAll("." + config.paginationLinkClass).forEach((link) => {
        link.addEventListener("click", function (e) {
          e.preventDefault();
          handleAjaxNavigation(this.href);

          // Get the page number if available
          const page = this.getAttribute("data-page");

          // Update browser URL without refreshing
          const newUrl = this.href;
          history.pushState({ url: newUrl, page: page }, "", newUrl);
        });
      });
    }

    // Function to handle AJAX navigation
    function handleAjaxNavigation(url) {
      // Show loading spinner
      contentContainer.classList.add("d-none");
      loadingSpinner.classList.remove("d-none");

      // Fetch data via AJAX
      fetch(url, {
        headers: {
          "X-Requested-With": "XMLHttpRequest",
        },
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error(`Network response was not ok: ${response.status}`);
          }
          return response.json();
        })
        .then((data) => {
          if (data.status === "success") {
            // Update the content
            contentContainer.innerHTML = data.html_data;

            // Re-attach event listeners to new pagination links
            setupPaginationListeners();

            // Update any summary data if present and the page provides it
            if (typeof updateSummary === "function" && data.summary) {
              updateSummary(data);
            }

            // Hide loading spinner, show content
            loadingSpinner.classList.add("d-none");
            contentContainer.classList.remove("d-none");

            // Scroll to top of the content container
            contentContainer.scrollIntoView({ behavior: "smooth", block: "start" });
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
          loadingSpinner.classList.add("d-none");
          contentContainer.classList.remove("d-none");
          alert(config.retryMessage);
        });
    }

    // Initial setup of event listeners
    setupPaginationListeners();

    // Handle browser back/forward buttons
    window.addEventListener("popstate", function (event) {
      if (event.state && event.state.url) {
        handleAjaxNavigation(event.state.url);
      } else {
        // If no state, fetch current URL
        handleAjaxNavigation(window.location.href);
      }
    });
  }
});