My site has an avatar upload feature that lets users upload an avatar. The problem is, if the user tries to upload another avatar, their browsers cache keeps showing their previous avatar until they do a hard refresh (Ctrl + F5) or clear their browser's cache.
Currently, this is what I do to display an avatar:
<img src="{{ secure_asset('storage/avatars/' . $user_id . '/avatar.png') }}" />
How can I refresh the cache for the avatar after the user uploads a new one so that it shows their latest avatar instead of their old one?
You could leverage "cache-busting". When you save the image, you can save a version number to the users table. So the first time a user saves an avatar, set a avatar_version column to 1. Increment the version number when uploading a new avatar. So when you grab it you can call
<img src="{{ secure_asset('storage/avatars/' . $user_id . '/avatar.png')."?version=".$user->avatar_version }}" />
If the GET parameter changes, it wont affect the file but the browser will recognize it as a different image and grab this new one.
caching is done by the browser and from the server side you don't have any control over browser caching functionality so you can not update users browser cache from the backend.
you can explicitly tell browser not to cache that specific web page by passing appropriate http headers. so that that particular page will always be loaded from the server rather than the cache.
for php you can use below headers
header('Cache-Control: no-cache');
header('Pragma: no-cache');
you can also do this with HTML as well
<meta http-equiv="Expires" content="Tue, 14 Aug 2017 12:12:12 GMT">
<meta http-equiv="Pragma" content="no-cache">
Related
Running a URL through the Pinterest URL Debugger, and it appears to be caching have old data. Is there a way to force a refresh similar to Facebook's debugger?
I would attempt to clear your browser cache (I'm assuming it's ran in browser).
Maybe it's also using an old cookie, so log out, clear your browser cache/history, then close and open it again. You could also try a different browser to access it.
You could also try changing some old data to see if there is a pinterest db process that's using old data, and an update might refresh it.
Otherwise, you may want to reach out to pinterest support.
OK so it turns out that it was NOT holding on to old information, but rather I was using the incorrect tags for price and currency.
should be og:price:amount and og:price:currency
full documentation for the product type of rich pins: https://developers.pinterest.com/docs/rich-pins/products/
from above, minimum requirements:
<meta property="og:title" content="Name of your product" />
<meta property="og:type" content="product" />
<meta property="og:price:amount" content="1.00" />
<meta property="og:price:currency" content="USD" />
The problem:
I am using Jquery UI tabs. The tabs display data that is stored in a database. Lets say the tabs are on home.com. In order to edit data in the database, you are taken to a new page where you can edit the data (e.g home.com/edit). Once you go back to home.com the new data should be displayed. This is the case in google chrome and firefox, but not in Internet explorer.
The weirdness:
I can set $.ajaxSetup({cache:false}); and now the data is reloaded. Which makes me think it is an ajax issue with internet explorer (ignoring get requests). The trouble is that I don't want the cache to be set to false. I only want the tab to load once when the tab is click(styles, javascript, data, etc. do not need to be reloaded.). i.e. the tab should only be reloaded when you go to a different page and then come back, not each time you click the tab.
Also, When all of the IE windows are closed, and then navigate back to home.com, the updated data is displayed. Data is being refreshed on the site, but just not on pages where ajax calls are made. It seems like the behavior should be that ajax Get requests that are made should be ignored unless the whole page is refreshed, but the behavior appears to be that ajax Get requests are ignored unless the session is refreshed.
Hope that makes sense.
Any help is greatly appreciated!
Here is an example of what the code would look like:
html:
<div id='tabs'>
<ul>
<li><a href='Home.php?viewIsActive=true&tab=true'> Active </a></li>
<li><a href='Home.php?listAll=true&tab=true'> List All </a></li>
</ul>
</div>
Javascript:
$("#tabs").tabs();
Switching between tabs should cache, but reloading the page should reload the tabs as well.
Got it figured out!
Most information out there says to either use Jquery:
$.ajaxSetup({cache:false});
Or html header
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
The problem is that both of these get ride of caching altogether. In my situation I only wanted the ajax caching off, and only on page reloads, not within the page.
$.ajaxSetup({cache:false}); will add a timestamp to the ajax get url. The trouble is that each time you click the tab, a new timestamp is added, making IE think it's a new URL, and reloading all of the information.
Solution:
Add the timestamp to the server side. This way each time the page is reloaded and the server is contacted, there is a new timestamp. But when you are clicking around on the client side, IE doesn't reload the url since it is the same and only changes on page reloads/navigating away and back.
php:
$time = time();
$tabs = "<div id='tabs'>
<ul>
<li><a href='Home.php?viewIsActive=true&tab=true&timeStamp=" . $time . "'> Active </a></li>
<li><a href='Home.php?listAll=true&tab=true&timeStamp=" . $time . "'> List All </a> </li>
</ul>
</div>"
So, for ajax requests that you only want loaded once per page refresh/navigation, use server side timestamp, for ajax requests that you never want cached, use the jquery client side timestamp.
Every time I do I search on this I get information about how to disable the browser cache.
Never anything about enabling it.
How do I get the back button to use the cache and not regenerate the page?
As far as I know you can control to force a browser to reload the data by means of these meta tags:
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="0">
but you cannot force it to read from cache. The browser itself will do that for you if you don't explicitly specify to ignore the cache, and the page data are in fact cached and not expired.
This does not depend on CodeIgniter because it's client-side, but you might want to use the meta() function included in CI's html helper, which will simply output the corresponding meta tag. e.g:
echo meta('Cache-control', 'no-cache', 'http-equiv');
would generate the second code line above.
Note:
The 1st meta tag is specified for http/1.0 while the 2nd one is for http/1.1 but both are used to allow backwards compatibility.
If you're using xhtml instead of html remember to close the meta tags with />
Browser caching has nothing to do with codeigniter. You can use html meta tags to instruct the browser specifically not to cache pages or you can set a cache expiry for an individual page like so:
<meta http-equiv="expires" content="Mon, 10 Dec 2001 00:00:00 GMT" />
You could use a bit of php to drop tomorrows date in there. The browser (depending on settings) will usually pull as much as it can from the cache automatically, including when clicking the back button - the cache for the back button will work the same as if you were coming in from any other link.
You could set expires headers through your htaccess using something like the following on an apache server (you would have to ask about how to do this on other server types) to tell the browser that is should cache certain types of content for a given periods of time:
ExpiresByType text/html "access plus 60 seconds"
This will tell the browser to store anything of mime type text/html for 60 seconds (this includes codeigniter output) BUT DONT DO THIS if your dealing with dynamic content It will stop any dynamic page content being loaded and will stop any changes to your content being loaded by returning visitors (Obviously this second part is not such an issue with a 60 second cache).
The key thing to realise is that Your page is not one thing, it's made up of lots of parts, some of these parts should be called from cache (js, css, images, etc.) some should not (often html will fall into this category).
The browser will automatically call all the parts of your page from the cache where the cache has not expired.
Usually you would use .htaccess (or similar method) to cache your css, images, etc. (using versioning in filenames to force a reload when they change).
You should also take advantage of server side caching - codeigniter does this for whole pages but I dont tend to find this very helpful for any kind of dynamic site so I would take a look at for using phil sturgeons partial caching library for ci if you are interested in ss caching:
https://github.com/philsturgeon/codeigniter-cache
This wont stop a request being sent to the server but will mean that request requires less processing and can be served as one or several pieces of static content.
I wanted to know how can I use Facebook Like button on my Ajax web application, that will capture changes in the Open Graph tags for both the og:title and the og:url. I already created a Facebook app and got an API ID.
What I want to know is the code that I need to put on my website in order for Facebook to capture the changes that I've made to the meta tags which contains that title and url information (ie. og:title, og:url).
I followed the instructions on Facebook without success. Furthermore, I want to know how can I locally test the Like button to see that it grabs the data from the Open Graph tags properly.
Also worth mentioning that I've a JQuery code that automatically alters the Open Graph meta tags to include the relevant information for the current Ajax changed page.
Thanks.
You will need to have a separate url for each different page that you want to allow people to like. I would recommend actually pointing the like button to the physical pages you're trying to return via the og:url tag. To refresh the data that Facebook stores about a given url, pass that url into the linter at http://developers.facebook.com/tools/lint.
i created a rotator file for facebook share on my dynamic ajax website.
rotator.asp code sample:
<html>
<% lang=request("lang")
id=request("id")
..some sql to get data...
ogTitle=....
ogImage=....
originalUrl=....
%>
<head>
<meta property="og:title" content="<%=ogTitle%>" />
<meta property="og:image" content="<%=ogImage%>" />
.....
......
<meta http-equiv="refresh" content="0; url=<%=origialUrl%>" />
//dont use redirect.. facebook dont allow 302...
</head>
<body></body>
</html>
for example xxx.com/#!/en/153 page will share xxx.com/rotator.asp?lang=en&id=153
Maybe it has been asked somewhere, but I am trying to find my question and I am not able to find any answer.
Here's my question:
I am developing a web application and because of some major JavaScript issue in IE8, I need the user to run "Google Chrome Frame" (To enhance the speed of the web page). I was impressed that my page was working 100% fine until the time it was supposed to be refreshing and it wasn't refreshing (Ajax getJSON request using jQuery).
The problem is that it does not request the new data on the server, but it looks like it goes in the cache for the answer of that request and then return the same thing every time instead of new data.
I don't really know how to explain it, but it just does not update. Also, when I hit F5 on the page, it does not update the page, it keeps the old page (even if I hit CTRL-F5 or any other normal force-refresh button). To have the changes, I actually need to close the browser (IE8) and re-open it so it can take the new changes.
Is there anyone who know how I could disable the cache when Google Chrome Frame is active?
The meta tag I use is :
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<META HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="CHROME=1">
If you need any more details, don't hesitate to ask.
An old CGI trick would have been to encode the date as a parameter onto the request so the URL changes with each request. That generally stops any caching on the URL.
So you'd have url?01102010134532 if you encoded date and time down to miliseconds.
If I understand your requirement properly, you'd have to do this in JQuery / JS and would need to modify the parameter on the URL after each AJAX request was made, so the next one would be different to the previous