I have this slider, I created a panel so you can upload there the images and modify the order of display, but you can upload the image to the server and the changes do not appear unless you clear cache-
the problem is that the webpage requires live updates, for example if the user deletes an image from the gallery I'm making it refresh but the image is still there (but not in the server or database) so its kind of frustating having to delete the cache, I'm even by jquery making a location.refresh(true) but it doesnt work, I have to f5 two or 3 times to make it dissapear/appear (the image)
You can use AJAX for this.
Have a look at this thread, it might help you. Have a nice day :)
Using AJAX / jQuery to refresh an image
You can change the url to trick the browser.
For example instead of having a url like this :
https://mydomain/myimage.png
you can add a parameter so that the browser see a new url.
https://mydomain/myimage.png?v0.0.1
In this example i used a version tag, and you can change it manual on demand (so that you do keep using cache but in your way). When you change that parameter, the browser will see a new url, so it will load the image again.
You can also use a timestamp instead of a version tag.
Edit (some more info)
Adding the time on the url will "force" the browser to get the image every time.
Example
https://mydomain/myimage.png?date=2017-04-28_10-06-00
Also, in the developing state, you can use on your browser ctrl+F5 to clear the page's cache and reload the page.
Cache is something helpful and you should try to use it, so disabling it completely is not a good solution.
Some relative answers including php solutions can be found here :
PHP force refresh image
Related
How do IHeartRadio and 8Tracks keep the music playing without pause even when you go to a different url without any Pause?
My initial thought was that they would use something like Ajax to load content - but the fact that the browser favicon reloads makes me think it may be something else.
There are questions like this one that ask how is it possible to do so at all - but my question is how do established sites like IHeartRadio.com and 8Tracks.com do this?
If this question is not within StackOverflows scope, please let me know and I will remove it.
They are using ajax obviously.
8Tracks
Screen shot shows a browser loading 8Tracks's About us page. See initiator column (red mark) which is a javascript/xhr which means ajax.
To trigger the default browser is loading event: See:
How to have AJAX trigger the browser's loading indicator
For example When I enter into my Gmail account I see changes every once in a while and those changes are effective without updating with ctrl+f5 (without cache data), the opposite happens with my web apps where the user has to press ctrl+f5 to see changes.
How can I achieve the same as other web apps that I see changes without the need to clear cache or update.
This issue is not with data but with html content. I load every section (js, css & html) with requireJS according to the AngularJS route, for example if I call index.php#/users/edit I load users/edit.html and so on, so when I make a change or add an HTML/CSS/JS file the changes are not visible even when pressing f5, the user needs to delete cache or press ctrl+f5
Assuming I understood your question correctly, what I usually do is append a 'version' parameter to the URL used to get page content.
Hence, instead of calling users/edit.html , you would request users/edit.html?v=123
You could have your version in a dedicated variable which you set either manually or at build time.
If you want to ignore the cache altogether you could append a random value using something like Math.random()
What I have is a MVC framework that I am manipulating the DOM via JavaScript and jQuery. Which to a point is a mute reference to this question. Through the MVC if I go to
domain.com/page/
I land on a default page with recent info, updates, etc. However through the MVC if I go to something like
domain.com/page/ref1/ref2/ref3
We can handle that on the backend to do what we want. When its gone to directly. So the thought here for this question is, can I mimic the behavior cross browser up to at least up to IE 6/7+, Firefox 3.x+, Chrome. And by mimic I mean manipulate the URL/URI like I would the DOM itself. This way when someone comes along and navigates to sections via the methods we manipulate the DOM and find something they want to share all they have to do is go up to the browsers URL bar, and then copy and paste it to a message.
What would be even nicer is a method that can work with the back and forth history buttons on browsers as well. All without having to reload/refresh the page.
have you tried
window.location.replace(URL)
This function doesn't load any pages.If you change your current location like this , when you redirect to somewhere , your last address will be the non-modified address.It doesnt write new URL to the browser history.So it would be like as if you just give the key to what the user wants to share.
Have you considered modifying the anchors in the URL? While on this page:
http://www.google.com/
Changing the URL to this:
http://www.google.com/#foo
... won't trigger a page refresh. So you could use (read/modify) the contents of the URL after the anchor all you want and the page won't get reloaded. Should be able to build on that idea.
I am out of my own "ideas" going through this.
I have a album viewer. When you click next I want the adressbar to hang with it, e.g if you start on ?photoid=1, and click next (next picture appends and stuff), and then i want it to say ?photoid=2.
Now I cant make it say ?photoid=2 without changing/manipulating, and this you cant do without HTML5.
I have made a script in HTML5 that works fine, but then I need to take care of those who dont have HTML5(only chrome, ff4 etc supports html5)
Made the script from this( https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history )
I thought of adding #photoid=2 so, ?photoid=1#photoid=2 and then check if theres anything in # then use that instead of the $_GET.. But apparently you cannot do that as # is client side handled and never sent to the server.
So what should I then do?
Any suggestions please to make a workaround this? I checked facebook, what they did to IE users, and I could hear that it "clicked" (the annoying click sound from IE) twice.. the first was to get to the next picture, the second click sound changed the adressbar?!(how?).
And then I also thought hey, html5 is only supported in ff4, and I got ff3.6, and they manipulate the adress bar url when you browse through the album photos, exactly like how I wanted (and what I have written for but it only works in Chrome and ff4..?). How could they do that?
The hash is the only way to change out the url bar without automatically refreshing the page you're on. That's why it's an anchor tag (the hash) historically. Everything else tells your browser to go to a different page. If you don't want it to forward, throw in a hash and then read that hash with javascript and do what you want that way. It's easy with jQuery, or you could dig into Asual's swf address js library or jQuery's Hash Tag Change Listener plugin if you want to use your browsers back/forward button to go through your history states.
I'm not quite sure if understood your quite right, but here's what I came up with for a similar problem.
Why don't you just set the url by editing the location.hash just like you said to make it look something like this: www.mydomain.com/photos/#photoid=2.
Now when somebody calls this url the browser will try to load www.mydomain.com/photos/ and will get the necessary markup but not the photo and what you can do now is read the location.hash (which will return photoid=2) and load the picture via AJAX by sending a request to the server with a path like "www.mydomain.com/photos/" + location.hash
I am making a greasemonkey script and i would like a link to go forward and modify the current html and allow the user to click back to go to the original page.
How might i do this? using jquery + greasemonkey + javascript. Targeting firefox mostly.
-edit- http://jsfiddle.net/ seems to do it. If you write random html in the html section, hit run, change the html and hit run again. You'll be able to click back/forward to see the output change (however the html input box stays the same). I am using firefox to view this. Thats the effect i want.
it appears the magic is done on line 91. Is this submitting a form in a frame (perhaps the results frame?) and that is causing the movement in history?
88 run: function(e) {
89 e.stop();
90 Layout.updateFromMirror();
91 document.id(this.options.formId).submit();
92 this.fireEvent('run');
93 },
I don't know if that is possible at all because it is the browser itself that takes care of the navigation history. A new history item is added only when you visit a new page.
If I am not wrong you would like the user to turn on/off the changes you make to the page without enabling/disabling greasemonkey and reloading the page.
The only solution I see for this is to take care of it yourself. Save any changes you make to the page so that you can restore it and add some UI to the page to make the user turn on or off your changes.
EDIT 1:
It seems that jsfiddle.net loads a new page to do that. Using firebug you can see it is not doing any AJAX request to run the code, it is just loading a new page (maybe the same page, with different parameters, but nevertheless it is loading a page.)
EDIT 2:
Yes, maybe it is loading the page in a frame. As you can see from the HTML:
<iframe name='result' frameBorder='0'></iframe>
But this does not change your situation. If you want your logic to be in your greasemonkey script you can't load a new page. Otherwise you should upload a web page somewhere and make it load in an iframe passing it the HTML you want to modify: this is definitely not what you want to do.
It sounds like you want to use a history manager. You could either track the changes you make and undo them when the user goes back, or possibly call a page refreshing function.