1

I've got a pretty complex webpage which uses alot of Ajax and Javascript. My problem is that this Javascript manipulates the background-picture in a div (scrolling it to the sides). When I hit F5 (mostly in FF) this only causes a "halfway" refresh. The content refreshes, but the background in the div stays in the same position. This causes problems because the offset is calculated wrong (the script thinks the background is at starting-position, but actually, it's moved).

Is there any way of forcing a full refresh to get rid of this problem? I am using jQuery for my Javascript. A workaround would be to check the offset at load, but this would be a pain in the ass to implement at this point.

Any ideas?

EDIT: The picture causing this problem is not loaded using javascript or ajax. It's pure, static html.

OptimusCrime
  • 14,662
  • 13
  • 58
  • 96
  • Maybe you've got some stuff set to be cached that shouldn't be? Maybe check out the headers for the resources your site is using with Tamper-Data firefox plugin. – Oliver Oct 24 '11 at 10:06
  • Rather than checking the offset on load why not explicitly reset it to where you want it at load (or document ready)? – nnnnnn Oct 24 '11 at 10:10
  • Well @nnnnnn, that would be my workaround for this. The thing is that when the page is fully refreshed, this is not a problem. So I just wanted to check if it was possible to have an even-listener on refresh, to make sure it was fully done. – OptimusCrime Oct 24 '11 at 10:25

5 Answers5

3

Try to use "Ctrl + F5", it will force your browser to reload every content in the page.

Marco Pace
  • 3,820
  • 19
  • 38
  • 2
    Although in some situations (I've seen that in CKEditor, when I've changed some JS files in it), you might need to clear all your cache, because CTRL+F5 doesn't apply to self-loaded files (with AJAX or within IFRAMEs). CTRL+SHIFT+DEL > clear all cache. – Yaakov Shoham Oct 24 '11 at 10:07
  • Nice comment, sometimes it is useful if you use a lot of Ajax call – Marco Pace Oct 24 '11 at 10:11
  • 1
    I am aware of that, but for users using this page, they will most likely just hit F5, and this problem occurs. – OptimusCrime Oct 24 '11 at 10:11
1

Add a unique string to the end of your javascript file path e.g. test.js?nocache=99999999. This will make the browser think it's a non-cached file and download a new copy every time.

It's meaning more data transfer, but unless you want to implement a client side fix I don't think there's much choice here.

Steve
  • 3,483
  • 5
  • 21
  • 20
  • So far I think this is the only suggestion that would work. The problem is that the js-file is over 1400 lines long, and I'd like to avoid that option. Unless I go for the workaround, this sounds like a way out of the problem. – OptimusCrime Oct 24 '11 at 10:19
  • It won't "download a new copy every time", only each time you changes the string after the "?". When you changes the JS file content, you just need to add one to the number after the "?", and then the browser will download it again, just once, until you'll change the number again. – Yaakov Shoham Oct 24 '11 at 13:33
  • See here: http://stackoverflow.com/questions/2320500/forcing-cache-expiration-from-a-javascript-file – Yaakov Shoham Oct 24 '11 at 13:43
1

Why don't you just reset the state of the background to it's default when the page loads? Is there a reason why that wouldn't work?

$(document).ready(function(){
  // Set whatever value you're changing to make the background move to it's default
  $('.changing-background').css({
    'left' : ?px,
    'background-position' : ?px ?px
    // Whatever you're using

  })
})
daveyfaherty
  • 4,585
  • 2
  • 27
  • 42
  • You're right, that was the solution I ended up with. The problem I faced was that all position-tracking using jQuery (position().left, css('margin-left')) and such, kept giving me 0. I just forced the position-left to be 0px at load. Fixed my problem. – OptimusCrime Oct 24 '11 at 22:17
0

In Mozilla Firefox, Ctrl+Shift+P starts private browsing and nothing gets cached. or you can set cache:false to your ajax requests like

$.ajaxSetup({
cache:false
});

add no-cache 

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

further information can be found here

Rafay
  • 30,950
  • 5
  • 68
  • 101
  • 1
    I am aware of that, but for users using this page, they will most likely just hit F5, and this problem occurs. – OptimusCrime Oct 24 '11 at 10:12
  • Thanks for your input. But the background-image causing this problem is not loaded using ajax og javascript. The picture is pure static html. I should perhaps clarify that in my first post. – OptimusCrime Oct 24 '11 at 10:17
  • I tired and it did not work, but I solved my problem myself. Thanks anyways. – OptimusCrime Oct 24 '11 at 10:52
0

If you just pressed F5 it will load the contents from the cache.So use " Ctrl+F5 " .It refreshes the browser cache also at the time of reload.

Rohan Patil
  • 2,328
  • 1
  • 16
  • 23