Initiate an Ajax request solely for the elements currently visible on the screen

I am currently facing an issue that requires a solution.

Within our template, there are multiple divs generated with the same classes. Each div contains a hidden input field with the ID of the linked target site.

My task is to utilize this ID to make ajax rest calls for each div in order to retrieve the number of comments on the linked site.

My current approach involves using jQuery's each function to iterate through the divs and send a rest call for each one containing the respective target ID. I then append the comment count from the target page.

However, due to the large number of divs that could potentially be on the page, the client has requested that only the rest calls for the visible divs should be triggered as the user scrolls down.

Is there a way to achieve this?

IMPORTANT NOTE: I am restricted to using jQuery 1.7 and it must be compatible with IE8! -.-

Warm regards

Additional information: All divs rendered by the template are initially visible, so checking for :visible is not an option. I need a method to determine if they are within the viewport. I have attempted to use some inview-plugins, but they require specific IDs to track elements coming into view. Since all my elements share the same class and lack individual IDs due to being generated by the same template, I am facing difficulties implementing this functionality.

javascriptjqueryhtmlajaxrest

Answer №1

One possible solution is to use $('.element').is(":visible")

http://example.com/jsfiddle

Please note that this method has not been tested in IE8.

Answer №2

Make sure to retrieve the window position and the offset top of each individual element...

$(document).ready(function(){
    var windowHeight = $(window).height();
    console.log("Window height: " + windowHeight);
    $(".test").each(function(){
        var topOffset = $(this).offset().top; // top position of the element
        if(topOffset < windowHeight){
            console.log($(this));
            // perform your ajax request here
        }
    });
});

JSFiddle Demo: http://jsfiddle.net/m2wnbp2c/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

Description While navigating on mobile browsers, I'm facing a challenge with keeping an element centered as I scroll due to the browser window minimizing. I've experimented with different solutions such as utilizing the react-scroll library and ...

javascriptcssreactjsnext.js

Efficiently Filtering User Input and Other Things

Imagine I have a setup for organizing a television guide like this: <div class="day"> <p>A Date</p> <div class="time"> <p>A Time</p> <div class="show"> <p>A Show</p> ...

javascriptjqueryhtmlcss

Numerous perspectives of the TradingView Widget

I am facing an issue with the real-time chart component from tradingview.com. The chart is rendering twice at the start and every time I make a change in my code, it renders again. This results in multiple renders as shown in the image below. If anyone k ...

javascriptreactjsfrontendmemo

How can I trigger a PHP function by clicking a button on a PHP page that has already been loaded?

While I've come across a variety of examples, I haven't been able to make them work for the simple task I need to accomplish. The code in these examples seems overly complex compared to what I require. In essence, I have a form that processes dat ...

javascriptphp

Navigate to a different page using a sliding transition

Currently, I am working on a project using jquery-mobile where I need to redirect to another page after clicking on an image with a delay. This is what I have done so far: setTimeout(function(){ window.location.href = "myPage.html"; }, 1000); While t ...

jqueryhtmljquery-mobile

How can I use jQuery to navigate through list items using the up and down keys while maintaining the cursor position?

Hello everyone, I need help with a specific scenario: http://jsfiddle.net/cKf5b/ When you focus on the text field and use the UP and DOWN arrow keys, you can navigate through the list items below. This is the code snippet in question: //set cursor posit ...

jqueryiteration

What are the steps to making a textfield editable with JavaScript and HTML?

My textfield is currently populated with values from the database and is functioning perfectly. I would like to implement a checkbox feature that, when clicked, will clear the textfield of the database values, allowing the user to input new values. If t ...

javascriptphpjqueryhtml

Does the user need to download the scripts from Google API multiple times during the insertion process?

Concerned about the potential need for multiple downloads of a script from an unknown location on the user's computer, I would like to explore options to mitigate this issue. Specifically, I am considering creating a condition to check the download st ...

javascriptphpjqueryajaxgoogle-api

Guide to running a NextJS app alongside an Express server backend on the same localhost port

I'm working on hosting my NextJS app, which is built with React, on the same localhost port as my express api-server backend. Within my express server API settings, I have configured my API server to listen on: http://localhost:3000/graphql How can ...

javascriptreactjsexpressnext.js

Is there a way to utilize Java and the Rest API to upload PDF documents in Egnyte?

In order to transfer the PDF files stored on the local drive (D:), I am looking to utilize Rest API in Java to upload them to Egnyte. ...

javarestapiseleniumegnyte

In TypeScript, there is a curious phenomenon where private properties seem to be mimicking the

Here is an example of an issue I encountered while working with private properties in TypeScript. I expected that only the public properties would be visible in my object output, similar to normal encapsulation. My aim here is to include the property wit ...

javascripttypescriptoopproperties

Issue: Unable to locate element with the specified selector: #email

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://discord.com/register'); await page.screenshot({path: 'b.png ...

javascriptnode.jsdiscordpuppeteer

Make the text area occupy the full width of the remaining screen space

I've been struggling to make the text area fill the remaining width of the screen. Everything is set up nicely, but I just can't seem to find a solution to get it to expand and occupy the rest of the available space. I intentionally refrained fr ...

htmlcssformstextareaflexbox

Unable to close expanded grid item using close button

Currently, I am working on a simple 3 column grid where each grid item consists of an image and a close button. The functionality I want to achieve is that when a grid item is clicked, the image should expand and the close button should become visible. Th ...

javascripthtmlcsscss-gridevent-listener

What is the method to switch between radio buttons on a webpage?

Here is an example of HTML code: <input type="radio" name="rad" id="Radio0" checked="checked" /> <input type="radio" name="rad" id="Radio1" /> <input type="radio" name="rad" id="Radio2" /> <input type="radio" name="rad" id="Radio4" /& ...

javascriptjqueryhtml

angular 6's distinctUntilChanged() function is not producing the desired results

I have a function that retrieves an observable like so: constructor(private _http: HttpClient) {} getUsers(location){ return this._http.get(`https://someurl?location=${location}`) .pipe( map((response: any) => response), ...

javascriptangulartypescriptrxjsrxjs6

Text aligned at the center of the Y and X axis

I am looking to center my content along the Y axis instead of only on the X axis. To prevent the page from expanding beyond its current size, I have applied the following CSS: html { overflow-y: hidden; overflow-x: hidden } What I want to achieve is havi ...

javascriptjqueryhtmlcss

The functionality of AJAX in WORDPRESS may be affected when the page or post name is set to be the permalink

Encountering an issue with AJAX in WordPress. When the permalinks are set to default, AJAX functions without any problems. However, when I change it to postname, the AJAX response throws a 404 status error. Below is the HTML and JavaScript code making the ...

ajaxwordpress

The path specified as "react-native/scripts/libraries" does not exist in the file

I've been troubleshooting an error on Github - https://github.com/callstack/react-native-fbads/issues/286. After cloning the repository and running it, I discovered that the error persisted. I am currently updating packages to investigate why this rec ...

javascriptnode.jsreactjsreact-nativenpm

Text input field for username not visible on screen

https://i.stack.imgur.com/2UUQl.png After designing the login page for my current project, I seem to have accidentally hidden the username text input. Can anyone explain why this is happening and provide guidance on how to make it visible again? ...

htmlcss