Fix unwanted caching in IE8

core/js/jquery.avatar.js

@@ -15,7 +15,7 @@
  * You may use this on any <div></div>
  * Here I'm using <div class="avatardiv"></div> as an example.
  *
- * There are 3 ways to call this:
+ * There are 4 ways to call this:
  *
  * 1. $('.avatardiv').avatar('jdoe', 128);
  * This will make the div to jdoe's fitting avatar, with the size of 128px.
@@ -30,10 +30,14 @@
  * This will search the DOM for 'user' data, to use as the username. If there
  * is no username available it will default to a placeholder with the value of
  * "x". The size will be determined the same way, as the second example did.
+ *
+ * 4. $('.avatardiv').avatar('jdoe', 128, true);
+ * This will behave like the first example, except it will also append random
+ * hashes to the custom avatar images, to force image reloading in IE8.
  */
 
 (function ($) {
-	$.fn.avatar = function(user, size) {
+	$.fn.avatar = function(user, size, ie8fix) {
 		if (typeof(size) === 'undefined') {
 			if (this.height() > 0) {
 				size = this.height();
@@ -67,7 +71,11 @@
 				if (typeof(result) === 'object') {
 					$div.placeholder(result.user);
 				} else {
-					$div.html('<img src="'+url+'">');
+					if (ie8fix === true) {
+						$div.html('<img src="'+url+'#'+Math.floor(Math.random()*1000)+'">');
+					} else {
+						$div.html('<img src="'+url+'">');
+					}
 				}
 			});
 		});

settings/js/personal.js

@@ -50,15 +50,15 @@ function selectAvatar (path) {
 }
 
 function updateAvatar () {
-	$('header .avatardiv').avatar(OC.currentUser, 32);
+	$('#header .avatardiv').avatar(OC.currentUser, 32, true);
-	$('#avatar .avatardiv').avatar(OC.currentUser, 128);
+	$('#displayavatar .avatardiv').avatar(OC.currentUser, 128, true);
 }
 
 function showAvatarCropper() {
 	$cropper = $('#cropper');
 	$cropperImage = $('#cropper img');
 
-	$cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp'));
+	$cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp')+'#'+Math.floor(Math.random()*1000));
 
 	// Looks weird, but on('load', ...) doesn't work in IE8
 	$cropperImage.ready(function(){
@@ -77,8 +77,11 @@ function showAvatarCropper() {
 }
 
 function sendCropData() {
+	$cropper = $('#cropper');
 	$('#displayavatar').show();
 	$cropper.hide();
+	$('.jcrop-holder').remove();
+	$('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src');
 
 	var cropperdata = $('#cropper').data();
 	var data = {
@@ -220,7 +223,9 @@ $(document).ready(function(){
 
 	$('#abortcropperbutton').click(function(){
 		$('#displayavatar').show();
-		$cropper.hide();
+		$('#cropper').hide();
+		$('.jcrop-holder').remove();
+		$('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src');
 	});
 
 	$('#sendcropperbutton').click(function(){