How to add an HTML button - html

I'm building a web app (well at least one page on it) that shows the results of pings to different IPs.
I have no probs on Go displaying them on an HTML page. The simple thing I can't do (and I read so many tuto/threads that I'm lost and don't know what to do....) is to create a button "Refresh" that could just call back the "pingip" function i created in Go file.
Anyone has a concrete/"easy" example on how I could do this?

Assuming you have a HTTP Handler for your Go program, which is what is serving the page - then you can have the button simply do a window.reload() through JavaScript, which will reload the page in the browser and re-invoke the Go script.
If you want this to happen without a reload, then you'd have to create a different HTTP Route and use AJAX (look up the fetch method in JavaScript), get the results over the network (maybe as JSON) and then update the data in the frontend.

Related

Location.Replace and Clear cache Typescript

Problem:
Chrome caches too much data, so when i create entries like Post and Comment in my db, its isn't loaded, but all the existing entries are being displayed.
Chrome refuses to run through my script, and just displays it from cache, and therefor not showing the new entry.
I can solve this problem partly by using
Location.reload(true);
But when i create a post i route back to the overview of all posts, which isnt loaded properly from my API, since the new post isnt showing.
I route back to the overview with
Location.replace('../nyheder');
How do i clear cache while routing to another page?
I rather think it is an issue with your HTTP -mainly response- headers. The headers will tell Chrome whether to fetch new data or use its cache.
You should use
If-none-match
and
ETag
Headers.

web app on top of a REST API - how to persist data between page requests?

I'm starting with web development these days and I would prefer so called client side rendering. In practice that ajax request needed data and add them to the html file ( which has already the static content, and dynamic data is added via 2nd request ). I like this approach, cause of a clean seperation between client and server. You just need to define an API and you can seperate the work.
So if you don't create the dynamic content on server side, how dou you persist data between page requests.
For example, you are on a overview for a list of adresses. You can click a button to edit a specific adress with id "25". That will requiere a new html file for that task, which will be loaded and rendered. How does the javascript included in that html file know, which adress should be loaded. How can it access the id "25"?
Approach 1. You don't persist anything on the client and simply reload everything as you go back and forth between the list page and the editor page. Editor page gets the id "25" and loads corresponding item either using AJAX, as you want, or on the server.
Approach 2. You do everything on the same page (SPA). You use JavaScript and probably some framework like Angular to maintain your page state.

Force download via AJAX

I'm looking for a way to POST data to a backend script, use it to generate a temporary file on the fly (temporary in that it's dynamically generated and not saved to disk on the server), and then offer it to the client as a download.
I have the backend script functioning fine. The problem is that I haven't yet found a way to get the download prompt via an AJAX call.
If I weren't POSTing data, I would just use something like:
window.location.href = 'path/to/my/script.php';
Is what I'm after even possible? Can it be done without resorting to "hacks" like dynamically injecting a form into the DOM and submitting it, or opening up another browser window, etc.?
make POST request;
create the resource;
answer with the resource path;
window.location.href = resourcePath.
[optional] want to secure such resource from third part download? Attach a CSRF token, and make the resource available only if CSRF check is passed - otherwise congratulations, you just won a 403 puppy!
If the resource has proper headers, the browser will ask you to save / open it with specific app. / an so.
You can't do that without a classic form submit unless you can somehow make the download available via GET.
However, doing that would be a good idea anyway since download managers etc. often don't work well with POST - so simply make your script generate a temporary URL and then redirect to that URL using the JavaScript you already posted in your question.

Use the locally stored version of the page instead of another request

I'm workin' on a web project where performance is a very important issue.
EDIT:
The situation:
I wanna add some details about the user's workflow:
The user visits the welcome page of my website http://example.org/ .
He clicks a link in order to visit the page http://example.org/mypage
onclick-Handler of the link's executed.
The handler loads data usin' XHR.
The handler creates http://example.org/mypage dynamically.
The handler saves mypage locally usin' FileSystem API at filesystem:http://example.org/mypage. EDIT: ( filesystem:http://example.org/mypage is a local ressource stored in the FileSystem at the client side)
The handler extends the history and changes the URL of the location bar usin' History API from http://example.org/ (URL of the welcome page) to http://example.org/mypage (the page which the user wants to see) .
The user vists another page in the meantime.
Later on, the user types http://example.org/mypage directly into the location bar.
The browser shows/loads filesystem:http://example.org/mypage (which is the locally stored version of http://example.org/mypage) instead of http://example.org/mypage. That means: The browser doesn't create a new request, it uses the local stored copy of http://example.org/mypage .
How can I get the browser to use the locally stored version of the page instead of creating a new request? EDIT: - That's what I want to do in #10 of the list above.
EDIT:
My Question:
A client-side has already created/generated http://example.org/mypage in #2 to #7 of the list above. I don't need to create that page some other time. That's why I don't want the browser to create a request for http://example.org/mypage.
That's what I wanna do:
If filesystem:http://example.org/mypage has already been created (respectively if the user has already visited http://example.org/mypage):
Use filesystem:http://example.org/mypage instead of http://example.org/mypage.
Otherwise:
Send a request for http://example.org/mypage
Tries to solve:
I can't use the Fallback section of the manifest file to do something like: EDIT: (aside from the orgin)
FALLBACK:
http://example.org/mypage filesystem:http://example.org/mypage
In order to get the browser to use the local version stored in the FileSystem because Fallback directives are just used if the user is offline, otherwise they are ignored. EDIT: But I want to use filesystem:http://example.org/mypage instead of http://example.org/mypage, even if the user's online.
I know that I can use the Expire field in the response header of a server-generated page in order to not create a new request and to use the cached version.
But what if I create an page dynamically on the client side using JS and XHRs. EDIT: (I described that case in The situation) When create a page at the client side there's no way to get the client to cache that page. That's why I "cache" the page manually usin' FileSystem API to store it on the client side.
In order to improve the performance I'm trying to store any page which the user has already visited locally. When the user visits a page again then I show him the old, locally stored version of the page and my script creates an XHR to find out if the page changed in the meantime.
But how can I get the browser to use the local version of the page?
I can save the generated page locally on the client side using the FileSystem API and I can choose an URL for the generated page to display it at the browser's location bar using the History API.
When the user now visits another site and then presses the back button I can catch the onPopState event by an event handler.
And that event handler can load the dynamically created file using the FileSystem API.
But what should I do if the user doesn't use the back button and if he types the URL, which I have registered using the History API, directly into the location bar?
Then the browser wouldn't use the locally stored version of the page, the browser would create a request to load the page from the server.
Don't put dynamic data in the application cache. If you want to put dynamic data in your pages then get it from the server with AJAX, store the data in Local Storage, and populate the page with the data from storage through JavaScript (you can hook into the History API for this).
By the way, this won't work because fallback entries have to be on the same domain:
FALLBACK:
http://example.org/mypage filesystem:http://example.org/mypage
Once your page is in the Application Cache (ie. it is locally stored) the browser will always use the version from the Application Cache until the manifest is updated or the user deletes the cache. It doesn't really matter what expiry headers you put on the page, except if you put a long expiry and you frequently update the manifest then it's likely the Application Cache will be populated from the browser cache rather than refreshed from the server. This is why the stuff you put in the Application Cache should be static files. Get your dynamic stuff with AJAX.
You might use URLs that encode the actual link within your hierarchy, e.g. "mypage", in the anchor part of the URL, i.e. http://example.com/#mypage. Then you can use window.location.hash to obtain the string after the # and do whatever magic you want. Just make sure your root (or whatever you want in front of the #) is in AppCache.

Trigger a web page refresh

I am working on an android application that will show an html page that contains only some text on a tablet device. The device will be on and showing this page for long periods of time(several hours). The text on this page will get changed from time to time.
To change the text on the page I've made a separate second page that contains a form to enter the new strings into and a submit button that uses ASP to generate a new version of the first page and save it over top of the original copy. This is set up and working great, but it means that I have to refresh the page very frequently in order to ensure I am always showing the latest message.
I am looking for a way that I could trigger a refresh only when a new message is saved. That way I will not have to refresh the page every minute but the new message will still get shown in a timely manner.
No dice, HTTP is built as a stateless, pull-only (ignoring file uploads) protocol. The server can't push data to the client, the client has to actually poll the server for new information.
However, you can minimize the overhead of this by using an AJAX call with JSON as the transport protocol instead of generating entire web pages and update your page on the client side. The overhead should be minimal for almost any application.
If you were just a web-app, I would suggest looking into the various Comet frameworks.
http://www.google.com/search?q=comet+framework
But, since you have an Android shell around it, you can make a Socket connection back to your server and have the server signal when it's time to refresh. It's essentially the same, but you don't need to code up the push in JavaScript if you're more comfortable in Java.