Display div in HTML on demand - html

I have a javascript which fetches thousands of records from some http server. These records are then displayed in HTML by adding div. Now, instead of fetching and adding all the records on initial pageload, I want to load them as and when user scrolls down. So, initially as many records are fetched and displayed as there is space on the window. And, when user scrolls down, more divs are added and previous divs are removed (or reused) and so on. How can I do this? Any suggestions are welcome.

Well first you need a plugin/script to do infinite scroll
then build a query for your http server which only return the requested number of records and call it with ajax. What Else?

Related

React history - is there a way to remove duplicate entires when going back?

Currently for my back button I'm using window.history.back() which, in itself is working properly. My issue is with an iframe that I have for refreshing sessions, example
<iframe src="https://example.com/some/path?gcp-iap-mode=SESSION_REFRESHER" style="width:0;height:0;border:0; border:none;"></iframe>
Path in my project represents current url, so it keeps changing every time I change locations. Now, with the source the iframe has, it keeps throwing 404 and getting into my history so instead of clicking back button once, I have to do it at least two times - first times it fails as it tries to reach randompath?gcp-iap-mode=SESSION_REFRESHER and then it goes to proper path.
My question is, is there a way for me to check the "back" value, to see if the "back" value has a specific query (for example gcp-iap-mode part), or check if it's the same as a current location (duplicate) so I can skip that entry (and couple of back steps) and go back to a different path in history stack?
Seems an issue like this is common in iframes. I tried looking at it from a wrong perspective, by looking for ways to change history where the only thing that needed to be changed is the iframe itself.
Basically when we only change the src attribute of the iframe it gets rendered again and again and the src gets pushed to history stack. What we needed here was the iframe to unmount and the soultion to all of that was pretty simple - add a key prop to the iframe.
This is a blog page that helped me, so if somebody wants to read more:
https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/

How to parse html for a specific <div>?

I'm trying to write a very simple client application for iOS to go to a website with three buttons. Each of these buttons load a different webpage and run a command in an application on the server, takes the results from that command and displays them on a map on the very same page that the button loaded.
What I'm trying to achieve is to be able to do the following:
Click on one of the three buttons.
Have it then run the query.
JUST PULL THE DIV WITH THE MAP TO SHOW THE DATA instead of the entire page, which is what I currently have happening.
I was going to go about this by parsing the html with "libxml2" and "hpple" but I thought that I would ask here before I got started instead of spending a few days on this to realise that I am going about it the wrong way.
So with all of that said I guess my main questions are:
Is this possible?
Is the way I'm going about it correct?
2a. If the way I am going about it is wrong, how best should I go about it?
Normally on the webpage the map, that I am trying to pull, updates dynamically every second or so. In order to make the map dynamic in my application will I have to poll the site every time I want the map to update? or will it automatically update?

Do AJAX calls make DOM heavier in size?

I have a 3 column structure for my site.
Links are shown at Left hand side layout.
User clicks a link, and I trigger an AJAX call to load middle column of layout. I load a complete template file in the middle column.
My question -
When user clicks another link, I make another AJAX call to load middle column.
After each sub sequent ajax call, does my DOM gets heavier in size, as I am loading different htmls in middle column, without refreshing whole page ?
No. If you are replacing the data with new data then the old data is discarded.
Well, yes your DOM as you say is technically bigger and you are dynamically injecting HTML. However, this should not be an issue, and certainly not on the client. Size is only of concern if you are downloading the whole page.

Download certain part of HTML code

I am trying to make a push notification about Internet page update, but downloading the full page (700k) again every minute is quite troublesome for users. Is there is a way to download only a specific part of page?
As far as I have read there isn't any way to get delta information about the page. Is there a method which allows that? I haven't found one for a day (if there is, how can I locate the certain byte where my information is placed in the first place?
What you want to do is learn some basics in AJAX calls.
You set an auto timer to reload div contents on whatever needs to be updated.
You could use a Range header like this:
Range: bytes=0-1000
This will obviously get you the first 1000 bytes.

GWT HTML Report Printing

I am currently working on a GWT application that requires report
printing. The use can select report parameters from a screen, and
upon clicking print we would like to display the file as it is being
generated. Currently we have server side code that is generating HTML
and writing it to a file. When the user clicks print, an RPC is being
made to pass the report parameters to the server and begin the
report. A second RPC is made after the report has started to obtain
the report's URL. From here, we are creating a Frame and setting the
URL to be the URL retrieved by the second RPC.
The issue I am running into, is that when setUrl gets
called, it only displays as much HTML that was contained in the file
at the time of the call. What would be the best way to refresh just
the frame containing the HTML report? It appears making subsequent
calls to setUrl passing in the same Url each time would do the trick,
but it actually doesn't seem to contain the additional content that
would've been written since the last call. It is also resetting the
vertical scroll bar's position each time back to the top of the bar
which is something else I would like to prevent.
Is there a better way to go about doing this?
I think it would be better to request HTML in chunks from GWT and render them as they arrive. Doing this with ajax instead of wholesale refreshes will enable better behavior with the scrollbar, eliminate flashing, get around caching problems, and will also let you add some feedback like a progress bar, estimated time remaining, etc.
There's a lot more infrastructure required for this, but your suggested solution doesn't seem quite appropriate for the task.