We Keep Coding

Lazy loading for Wordpress external api get request

I have an endpoint that takes a long time (about a minute) to give a response. I want to call this endpoint from a Wordpress website while wp_remote_get and wp_remote_retrieve_body are running in the background, but I always get the page loaded only after the request is finished.
Is there a way I can add some lazy process so that the page can be displayed and the user gets a 'loading, please wait..' message until the request content is retrieved? I have seen many methods for image lazy loading but not for an arbitrary php run in the server. I also want to hide the get url from the page source script, all js get solutions seem to expose the url requested.

Here's what you need to do.
Create your page -- maybe in your template -- with some placeholder text. Something like this might work:
<div id="jimmys-lazy-loading">
loading, please wait...
</div>
Extend the WordPress REST API by adding a custom endpoint to the code you're writing (your plugin or theme customizations, maybe). When you hit this REST endpoint from your web page, it will in turn hit that slow endpoint, retrieve the data, and return it.
Write some Javascript that hits your REST API and then replaces your placeholder text with the stuff that you got back.
Or, if your slow endpoint allows itself to be hit directly from your users' browsers, write your Javascript to hit it and replace the placeholder text.
Once you get the basics working, you can make a fancier "wait" display, maybe with a spinner.
It's hard to give more specific advice without knowing a bit more about what you hope to do. Don't hestitate to ask another question if you still need help.

dynamically generate content for a page when clicking on product

everyone. I am making a website with t-shirts. I dynamically generate preview cards for products using a JSON file but I also need to generate content for an HTML file when clicking on the card. So, when I click on it, a new HTML page opens like product.html?product_id=id. I do not understand how to check for id or this part ?prodcut_id=id, and based on id it generates content for the page. Can anyone please link some guides or good solutions, I don't understand anything :(.

It sounds like you want the user's browser to ask the server to load a particular page based on the value of a variable called product_id.
The way a browser talks to a server is an HTTP Request, about which you can learn all the basics on javascipt.info and/or MDN.
The ?product_id=id is called the 'query' part of the URL, about which you can learn more on MDN and Wikipedia.
A request that gets a page with this kind of URL from the server is usually a GET request, which is simpler and requires less security than the more common and versatile POST request type.
You may notice some of the resources talking about AJAX requests (which are used to update part of the current page without reloading the whole thing), but you won't need to worry about this since you're just trying to have the browser navigate to a new page.
Your server needs to have some code to handle any such requests, basically saying:
"If anybody sends an HTTP GET request here, look at the value of the product_id variable and compare it to my available HTML files. If there's a match, send a response with the matching file, and if there's no match, send a page that says 'Error 404'."
That's the quick overview anyway. The resources will tell you much more about the details.

There are some solutions, how you can get the parameters from the url:
Get ID from URL with jQuery
It would also makes sense to understand what is a REST Api and how to build a own one, because i think you dont have a backend at the moment.
Here some refs:
https://www.conceptatech.com/blog/difference-front-end-back-end-development
https://www.tutorialspoint.com/nodejs/nodejs_restful_api.htm

Javascript: get data displayed from another url

I was wondering if I could get some data from another website to get it displayed on mine. The good example can be alexa.com. I need to display Alexa traffic rank and reputation in a div for example on my page, so it will be changed dynamically each time Alexa change its data.
Thank you for your help.

One way is to make an ajax request for the Alexa.com site, once you receive all the html, then you can use jquery or something to scrape it for the div you want.
It feels kinda dirty, but its an easy way to get what you want. Though this is assuming their page content isn't loaded dynamically.
Edit: See this for more info: Request external website data using jQuery ajax

yahoo yql... (instead of a php? proxy serverside script)..
I have a sneaky suspicion you do not own/control the external link site, so getting content from a different site, would fall under cross-domain security restrictions (to a modern browser).
So in order to regain 'power to the user', just use http://query.yahooapis.com/.
jQuery would not be strictly needed.
EXAMPLE 1:
Using the SQL-like command:
select * from html
where url="http://stackoverflow.com"
and xpath='//div/h3/a'
The following link will scrape SO for the newest questions (bypassing cross-domain security bull$#!7):
http://query.yahooapis.com/v1/public/yql?q=select%20title%20from%20html%20where%20url%3D%22http%3A%2F%2Fstackoverflow.com%22%20and%0A%20%20%20%20%20%20xpath%3D%27%2F%2Fdiv%2Fh3%2Fa%27%0A%20%20%20%20&format=json&callback=cbfunc
As you can see this will return a JSON array (one can also choose xml) and calling the callback-function: cbfunc.
Indeed, as a 'bonus' you also save a kitten every time you did not need to regex data out of 'tag-soup'.
Do you hear your little mad scientist inside yourself starting to giggle?
Then see this answer for more info (and don't forget it's comments for more examples).
Good Luck!

Refreshing page without losing checkboxes information in cakephp

I'm developing a website with CakePhp.
I have a view to select some items on a list, via checkboxes in a form, and each item has a "more info" link which refreshes the page with additional information of this item.
The problem is that if I click any "more info" link, I obviously lose the data about what checkboxes were selected before. The only thing I come up with is updating $this->Session each time a checkbox is changed, but I need to trigger a function in a controller when this happens.
Is there any other solution?
I've been searching everywhere and I've found some things about Javascript and JQuery, but I have no idea of how to do it this way neither.
Thanks in advance.

If you don't mind sending all the text it's quite easy:
<div class='article'>
<div>short textmore info</div>
<div class="more hidden">long text</div>
</div>
jquery part
$(".article").on('click', '.morebtn', function(){
$(this).parents('.article').find('.more').removeClass('hidden');
});
css
.hidden { display: none }
Here is a fiddle
The better solution is to use ajax request. Also not that hard to implement.
Here is a fiddle showing the very basic request. You could use the full $ajax request too if you want need to do more advanced requests.
note that the example of the ajax request does not work due to invalid url. The url need to be from the same origin as the current page (same protocol, domain and port) to make it work. There are work arounds but that's a different issue

Read up on AJAX, it's a really cool technology which will make it very simple to do what you need. Outline:
When the button is clicked, the browser sends an AJAX request to the server for the text to display somewhere on the page.
When the response (some HTML fragment from the server) is received by the browser, a function is called which looks like so:
function(data) {
$('#description').html(data);
}
Doing AJAX requests is 5-10 lines of code (mostly configuration + building the URL).
The main work is on server side where you need to write a controller which provides the texts.
Since the page is never reloaded, there is no need to preserve the form values.
To learn AJAX, start with this tutorial.

Show animation in a jsp page while waiting for server to respond

What would be the best way to display an animation while waiting for server-side processing of a jsp page to complete.Basically, the server side request can take more than a minute to process and until then I would like the user to have some way to get an update of how his request is getting along.I require an animated gif and a line stating that x% has been completed.
One of the methods I came across while surfing the net was to have an intermediate page that shows the animation while loading the actual page using javascript (location.href).So ,I figure use a couple of ajax calls from the intermediate page to a servlet to get the feedback.Problem is it works fine in IE 6/7 and Firefox 3.But the ajax callbacks dont seem to be getting executed in case of Chrome and Opera (The location.href part seems to mess it up and the callbacks never get executed).
If this approach is flawed how should I go about it?.And if not how can i fix this issue?
Thanks in advance

The simple way I've done this is to go to a JSP that displays a "X % completed" page (image, whatever) that reloads periodically. And when the request is complete, it redirects to an appropriate page to indicate completion. A lot simpler than AJAX, if not as fancy, and requires nothing that is browser-specific.

Try window.location='URL'. Also document.location='URL' works, but I think is deprecated.
Also to be opinionated I do think that a non-reloading web page is much saucier than just being forwarded.