Detailed explanation of JQuery pop-up window and AJAX paging loading TAB classification data

This article will explain in detail how to use JQuery to implement the pop-up window of clicking buttons and load the data corresponding to the TAB classification ID through AJAX, and automatically load the next page data when each TAB scrolls to the bottom. The code provided in the question has a key flaw: every time the TAB is clicked, the previous loaded data is not cleared, causing the content of different TABs to be mixed together. The following will improve the code and explain the implementation details.

First of all, we need to understand that the core of the problem is how to correctly manage the AJAX requests and data corresponding to each TAB. The problem with the original code is that in the loadCategoryData function, the scroll event listener always acts on the same .tab_item element, causing data of different categories to interfere with each other. The solution is to set independent variables and state management for each TAB's data loading process.

The improved code is as follows, and the actual AJAX request is replaced by simulated data for easy understanding and testing:

 



  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tab_p {
      display: flex;
    }

    .tab_item {
      height: 300px;
      overflow: auto;
    }

    .tab_item img {
      height: 50px;
      object-fit: cover;
    }
  </style>



  <div class="btn">Click on my pop-up window and load Classification 1 data</div>

  <div class="tab_p">
    <p data-id="1">Category 1</p>
    <p data-id="2">Category 2</p>
    <p data-id="3">Category 3</p>
  </div>
  <div class="tab_content">
    <div class="tab_item">
      <!--Classified content loading area-->
    </div>
  </div>

<script src="./jquery.min.js"></script>
<script>
  // There is no need to have a total number of pages, because the total number of pages is returned by the backend. The frontend does not need to know the total number of pages, but only needs to know the current page number // Initialize the classification ID currentPage total 
  let categoryId = 1, currentPage = 1, total = 0;
  // Is it loading let isLoading = false;

  $(document).on(&#39;click&#39;, &#39;.btn&#39;, function () {
    loadCategoryData(categoryId, currentPage);
  })

  $(&#39;.tab_p p&#39;).click(function () {
    currentPage = 1;
    categoryId = $(this).data(&#39;id&#39;);
    // Load the corresponding classification data loadCategoryData(categoryId, currentPage);
  })

  function loadCategoryData(id, page) {
    $(".tab_item").html(&#39;Loading...&#39;);
    $(this).addClass(&#39;cur&#39;).siblings().removeClass(&#39;cur&#39;);
    loadPageData(id, page);
  }

  // Listen to the scroll event $(&#39;.tab_item&#39;).scroll(function () {
    console.log(&#39;scroll...&#39;, $(&#39;.tab_item&#39;).scrollTop(), $(&#39;.tab_item&#39;).innerHeight())
    if (isLoading) {
      return;
    }
    // Determine whether to scroll to the bottom distance 150px Load more const scrollTop = $(this).scrollTop();
    const scrollHeight = $(this).prop(&#39;scrollHeight&#39;);
    const containerHeight = $(this).outerHeight();

    if (scrollHeight - scrollTop - containerHeight < 150) {
      // The distance to the bottom is less than 150px to load more data currentPage;
      if (currentPage <= total) {
        loadPageData(categoryId, currentPage);
      }
    }

  });

  // Simulate a function to load data on a certain page function getData(categoryId, page) {
    console.log(&#39;getData...&#39;, categoryId, page)
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // Randomly return page data const list = [];
        // Return 20 pieces of data each time for (var i = 0; i < 20; i ) {
          list.push({
            title: &#39;Category:&#39; categoryId&#39;,Title:&#39; i,
            img_url: &#39;https://picsum.photos/200/300?random=&#39; i
          });
        }
        resolve({
          list, // The data page of the current page, // The current page number totalPages: 100 // The total number of pages returned by the backend});
      }, 1000);
    });
  }

  function loadPageData(categoryId, page) {
    // Determine if (isLoading) {
      return;
    }
    isLoading = true;
    getData(categoryId, page).then(({ list, page, totalPages }) => {
      // Total number of updated pages total = totalPages;
      let html = "";
      for (var i = 0; i < list.length; i ) {
        html = &#39;<div><img  src="&#39; list[i].img_url &#39;" alt="How to use JQuery to implement pop-up windows, AJAX paging to load TAB classified data and solve the problem of data confusion?" ><span>"&#39; list[i].title &#39;"&#39;;
      }
      $(".tab_item").append(html);
    }). finally(() => {
      isLoading = false;
    });
  }
</script>

This code avoids duplicate requests through the isLoading variable, and uses Promise to handle asynchronous operations to ensure the order and correctness of data loading. At the same time, by judging the distance from the bottom in the scrolling event, the loading of the next page is triggered to improve the user experience. It should be noted that in actual applications, the /ajax.php?mod=tab interface needs to be replaced according to actual conditions. In addition, the data returned by the backend should include the total number of pages information so that the frontend can accurately determine whether the next page data needs to be loaded.

The above is the detailed content of How to use JQuery to implement pop-up windows, AJAX paging to load TAB classified data and solve the problem of data confusion?. For more information, please follow other related articles on the PHP Chinese website!