Question

just imagine your profile on facebook. when changing your avatar, you select a new picture, crop it and then safe it. after that, the new avatar is displayed in your profile.

on my website i want do provide the same service – which allready works.

but: i am not able to display the new and(!) cropped avatar right after creating it (with php). i can only display the new, but uncropped one. after refreshing my site, every thing works fine.

$("div#button2").click(function() {


//Thumbnail is created externally with php
    //the name of the new cropped avatar is the same like the uncropped one
    //i just change the picture, but the url is the same!
$.post("upload_thumbnail.php", {
    bild: bild,
    format: format,
    x: x,
    y: y,
    w: w,
    h: h
});

//delete the old avatar
$.post("upload_loeschen.php", {
    bild: bildalt
});

//save the url of the new cropped avatar in the database
$.post("upload_update.php", {
    bild: bild,
    laden_nr: "1"
});


//close my imageeditor
$("div#bildeditor").hide();

jcrop_api.destroy();
$("#cropbox").attr("src", "");
$("#preview").attr("src", "");

    //If there is a new avatar, display it!!! -> and here only the uncropped is displayed
    if(bild != "") {
    $("img#logo").attr("src", bild);
    bild = "";      
}
    });

I just don’t know how the site is able to display the uncropped avatar, because it isnt there any more. it was replaced by the cropped one.

Thank you very much!

Benjamin

Answer 1

the problem is that your avatar pic got cached, so try to add an random parameter with the image name

on load var i=1;
On avatar change i++;
and set the img src ="imgpath?random="+i