i have an image in my page, the image is cached in the browser.
now i have deleted the image, however Because it was cached, the request does not go to the server, And it appears again.
so How can I delete it from the browser cache?
No you cannot physically delete cached file. Instead you can generate link to the file dynamically, for example
<script type="text/javascript">
document.write('<img id="without-cache" src="image.jpg?v=' + new Date().getTime() + '" />');
</script>
and eventually change the source with different ?v= when you want to reload it without loading it from cache.
$("#without-cache").attr("src", "image.jpg?v=" + new Date().getTime());
Related
I have a function in express that updates a user in the database. The current url where this function is run, is at localhost:3000/users/specuser?key=<MY USER'S KEY HERE>. When I update the user in the database, the webpage should change to load the new db value (which is accessed in the view). I tried this code at the end of the function to try to reload the page.
res.redirect(302, '/users/specuser?key=<MY USER'S KEY HERE>');
return;
But the page doesn't reload. I'm assuming that's because express sees the same url that the user is currently navigated to and ignores it? How do I reload the page so that the view sees the new user data and changes?
It's worth noting that when I change the end of this function to:
res.redirect(302, '/');
return;
The website does navigate to the root directory
It might also be worth noting that my views are written in pug js.
I fixed it in the client side. In my pug view I have a script tag script(type='module' src='/javascripts/specuserexists.bundle.js') which links to a webpack compilation of a simple js file where my function is run that called the update to the user. At the end of this update the user function, I added location.reload(); and then it worked.
According to Htmx doc for hx-push-url:
The hx-push-url attribute allows you to push a URL into the browser location history. This creates a new history entry, allowing navigation with the browser’s back and forward buttons. htmx snapshots the current DOM and saves it into its history cache, and restores from this cache on navigation.
This causes previous pages to just get restored and not reloaded and If I remove hx-push-url, navigation doesn't match with user's expectation. Almost all of my page navigations are with Htmx and I sometimes want pages to reload on navigating back. Is there a way achieve this with Htmx? Or could be that I'm misusing Htmx?
HTMX does not provide an official way to prevent this behavior, yet. However with a little manual work we can force HTMX to make a full page refresh. HTMX stores the page in the localStorage under htmx-history-cache key. So we can use the htmx:pushedIntoHistory event (~ the page has been saved to the history) to delete this key completely, forcing HTMX to make a new request to the server.
<script>
document.body.addEventListener('htmx:pushedIntoHistory', (evt) => {
localStorage.removeItem('htmx-history-cache')
})
</script>
However, by default HTMX will make an AJAX request instead a full page reload. To force a full reload, we also need to set refreshOnHistoryMiss to true:
<meta name="htmx-config" content='{"refreshOnHistoryMiss":"true"}' />
Problem Set: Client .posts image from form action='/pages/contact/image/something' to node.js and I .putItem to AWS S3. On the success response I would like to send the image url back to the client without refreshing the screen and update the location they wanted to add the image with the new src url.
If the page refreshes I lose the location where they wanted to upload the image. Open to any suggestions, I have looked at res.send, res.end, res.json, res.jsonp, res.send(callback): all of which overwrite(refresh) the client webpage with the array, text or context in general I am passing back to the client . Code below:
myrouter.route('/Pages/:Page/Image/:Purpose')
.post(function (req, res) {
controller.addImageToS3(req, res)
.then(function(imgurl){
//res.json({imgurl : imgurl});
//res.send(imgurl);
//res.end(imgurl);
//res.send(req.query.callback(imgUploadResponse(imgurl)))
<response mechanism here>
console.log('Image Upload Complete');
}, function (err){
res.render('Admin/EditPages', {
apiData : apiData,
PageId : PageId
});
});
});
Ideally there could be a passed parameter to a javascript function that I could then use: Example:
function imgUploadResponse(imgurl){
// Do something with the url
}
You, as a developer, have full control over the s3 url format. It follows a straightforward convention:
s3-region.amazonaws.com/your-bucket-name/your-object-name.
For example:
https://s3-us-west-2.amazonaws.com/some-random-bucket-name/image.jpg
While I would recommend keeping those details in the back-end, if you really want to avoid using res.send, you can basically make the front-end aware of the url formatting convention and present the url to the user, even before the image was actually uploaded (just need to append the name of the image to the s3-region.amazonaws.com/your-bucket-name)
Also, I'm not sure why your page would refresh. There are ways to refresh content of your page without refreshing the whole page, the most basic being AJAX. Frameworks like angular provide you with promises that allow you to do back-end calls from the front-end.
Hope this helps!
I am trying for hours to solve the following caching problem.
My application has the following structure (simplified):
index.php - main page (contains various input fields, submit button and an iframe for dispaying PDF content with the help of TCPDF)
generate.php - generates PDF file based on the supplied POST parameters and stores the file to the filesystem
viewer.php - Displays the PDF document (TCPDF libraries). The iframe loads this script to show the pdf file
The workflow is pretty simple - the user chooses some options and clicks the submit button on the main page. The selected parameters are sent per AJAX by POST to the generate.php script. The script generates the PDF file and stores it to the filesystem. At the end it returns the newly created/edited filename. The filename is fetched in the AJAX callback function, which then refreshes the iframe with the new/edited filename:
viewer.php?filename=NEW_OR_EDITED_FILENAME
Everything is working, but when the file is being replaced, sometimes (NOT ALWAYS), the browser shows the old pdf file, although the new version is on the hard drive. I tried the following solutions:
Add Meta tags to disable cache to the generated HTML by index.php and viewer.php
Disabling cache for jQuery AJAX calls by: jQuery.ajaxSetup({cache: false});
Adding some random string to the the filename parameter:
viewer.php?filename=FILENAME_RANDOMSTRING
The RANDOMSTRING is then removed from the script and the filename is extracted.
None of these solutions worked for me. Tested browsers are: Chrome 25.0.1364.152 and Firefox 19.0. Can someone help me with this?
Thanks in advance
Just had the same problem but after adding a random string it works perfect:
<iframe src="file.pdf?=<?=time();?>"></iframe>
After many hours of trying, the solution I found is to really generate a new file each time (Solution 3 from the question without removing the random string at the end of the file). As a result it was necessary to update the database and to delete the old files on every change. My initial intention was to avoid these actions, but unfortunately no other solution was found
I want to save my special web pages after document loaded into special file name via all url and links convert to absolute url such as wget -k.
//phantomjs
var page = require('webpage').create();
var url = 'http://google.com/';
page.open(url, function (status) {
var js = page.evaluate(function () {
return document;
});
console.log(js.all[0].outerHTML);
phantom.exit();
});
for example my html content somthing like this:
page
must be
page
It's my sample script but how can i convert all url and links such as wget -k using phantomjs?
You can modify your final HTML so that it has a <base> tag - this will make all relative URLs working. In your case, try putting <base href="http://google.com/"> right after the <head> on the page.
It is not really supported by PhantomJS is more than just an HTTP client. Imagine if there is a JavaScript code which pulls a random content with image on the main landing page.
The workaround which might or might not for you is to replace all the referred resource in the DOM. This is possible using some CSS3 selector (href for a, src for img, etc) and manual path resolve relative to the base URL. If you really need to track and enlist every single resource URL, use the network traffic monitoring feature.
Last but not least, to get the generated content you can use page.content instead of that complicated dance with evaluate and outerHTML.