HTML file has table with two columns (first column hard coded text) and second column gets filled with data from returned from API call
JS calls PHP file using fetch and this PHP file calls two external API’s using curl.
What I am finding is that when page is loaded first column is loaded right away and second column that gets data from API calls stayed blank for second or two and then populates. Is there a way to fox this so both columns are rendered at the same time?
Style the first column as hidden, then have your JS remove the hidden attribute when the data for the second column arrives and is displayed. Maybe have “collecting data” or similar displayed rather than blank, while you’re waiting for the return from the API.
It is never a good idea to not show the user that something is happening in the background and therefor he must wait. Let’s assume the internet connection of the user is bad (a mobile phone with only edge). Then it might take 10 or even 30 seconds before your request in php is done.
I would show the first row with the column headers and in the second row I would show one column (colspan = number of header columns) and show something like
„Loading data“
In it. When the data arrives in JS I would remove the second row and create a new one in JS which contains the real data,
Thank you both. This brings me to another questions. My table actually has multiple rows and one of those rows will show whether the call agent is online of offline in a way of green or red dot.
Say the user lands on that page at X time while agents are offline. At this time the dot will be red but 30 seconds later agent might come online but the dot will still be red and wont change to green unless user refreshes the page.
I see this functionality on some sites where these status changes (red to green) and wondered how do you refresh the page without user action or without anything changing in the browser window beside that little dot.
The way I’d do it would be a Javascript timer that calls some PHP to check the agent status every ‘x’ seconds, and update the status display if required.
I suspect there may be a better way of doing stuff like that “these days”. It’s not really a PHP question, though, so you might get more information by asking in the Javascript section of the forum.
Is the data in that second column static, in that it does not change on the page following the initial load?
Or does it alter over time, or with user interaction?
If it is the first case, amybe it would be better to have PHP do all the pre-processing from the start, rather than loading the page, have JS call more PHP to do the API call, etc. Just dish it all out in one go from the start.
If the data is changeable after load, then you need the JS.
Well to be fair, it’s a JS question backed by PHP, as what will happen is as droop outlines; every X seconds, a fetch is made by JS to the PHP page. Probably, the PHP returns a JSON, which the JS parses out and uses to create/update the page data.
Well, there are websockets and SSE, but unless it is critical your site is updated immediately when something changes, I wouldn’t take on the extra complexity to get either of those working and stick with Intervalled fetch requests.
that’s what I came up with as well. Waiting for the owner of the API endpoint to suggest how often I can send API request. Its not super critical but as the same time I don’t want the user to land on the page while agent status is offline and then 40 seconds later due to lack of refresh not to see the new online status.