jQuery cover image reposition after upload - php

Question

Folowing this tutorial i try to implement on my app based on ZendFramework 2.
I create all what author say and when i test image is successfull uploaded and alias is saved in database. But problem is ajax not show reposition after uploading and not show image. I must refresh browser to see new image.
My code:
<script>
$(document).ready(function()
{
/* Uploading Profile BackGround Image */
$('body').on('change','#bgphotoimg', function()
{
$("#bgimageform").ajaxForm({target: '#timelineBackground',
beforeSubmit:function(){},
success:function(){
$("#timelineShade").hide();
$("#bgimageform").hide();
},
error:function(){
} }).submit();
});
/* Banner position drag */
$("body").on('mouseover','.headerimage',function ()
{
var y1 = $('#timelineBackground').height();
var y2 = $('.headerimage').height();
$(this).draggable({
scroll: false,
axis: "y",
drag: function(event, ui) {
if(ui.position.top >= 0)
{
ui.position.top = 0;
}
else if(ui.position.top <= y1 - y2)
{
ui.position.top = y1 - y2;
}
},
stop: function(event, ui)
{
}
});
});
/* Bannert Position Save*/
$("body").on('click','.bgSave',function ()
{
var id = $(this).attr("id");
var p = $("#timelineBGload").attr("style");
var Y =p.split("top:");
var Z=Y[1].split(";");
var dataString ='position='+Z[0];
$.ajax({
type: "POST",
url: "image_saveBG_ajax_bg.php",
data: dataString,
cache: false,
beforeSend: function(){ },
success: function(html)
{
if(html)
{
$(".bgImage").fadeOut('slow');
$(".bgSave").fadeOut('slow');
$("#timelineShade").fadeIn("slow");
$("#timelineBGload").removeClass("headerimage");
$("#timelineBGload").css({'margin-top':html});
return false;
}
}
});
return false;
});
});
</script>
#timelineBackground {
height: 315px;
position: relative;
margin-top: -20px;
overflow: hidden;
background-color:#ccc;
}
#timelineProfilePic {
width: 170px;
height: 170px;
background-color: #ffffff;
position: absolute;
margin-top: -145px;
margin-left: 20px;
z-index: 1000;
overflow: hidden;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#timelineTitle {
color: #ffffff;
font-size: 24px;
margin-top: -45px;
position: absolute;
margin-left: 206px;
font-weight: bold;
text-rendering: optimizelegibility;
text-shadow: 0 0 3px rgba(0,0,0,.8);
z-index: 999;
text-transform: capitalize;
}
#timelineShade {
min-height: 95px;
position: absolute;
margin-top: -95px;
width: 100%;
}
#timelineNav {
background-color: #ffffff;
min-height: 43px;
margin-bottom: 10px;
position: relative;
}
.timelineUploadBG {
position: absolute;
margin-top: 50px;
margin-left: 813px;
height: 32px;
width: 32px;
}
.uploadFile {
background: url('../images/whitecam.png') no-repeat;
height: 32px;
width: 32px;
overflow: hidden;
cursor: pointer;
}
.uploadFile input {
filter: alpha(opacity=0);
opacity: 0;
margin-left: -110px;
}
.custom-file-input {
height: 25px;
cursor: pointer;
}
.bgImage,#timelineBGload
{
width:100%;
}
.headerimage {
cursor: s-resize;
position: absolute;
}
.wallbutton:hover {
text-decoration: none;
}
.blackButton {
background-color: #666666;
border-color: #333333;
}
.bgSave {
position: absolute;
margin-top: 267px;
margin-left: 760px;
z-index: 4000;
}
.wallbutton {
font-weight: bold;
padding: 7px 9px;
background-color: #5fcf80;
color: #fff !important;
font-size: 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
cursor: pointer;
text-decoration: none;
border-width: 1px 1px 3px !important;
border-style: solid;
border-color: #3ac162;
white-space: nowrap;
display: -moz-inline-stack;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.bgSave {
position: absolute;
margin-top: 267px;
margin-left: 760px;
z-index: 4000;
}
.wallbutton {
font-weight: bold;
padding: 7px 9px;
background-color: #5fcf80;
color: #fff !important;
font-size: 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
cursor: pointer;
text-decoration: none;
border-width: 1px 1px 3px !important;
border-style: solid;
border-color: #3ac162;
white-space: nowrap;
display: -moz-inline-stack;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
<div class="image">
<div class="cover-img">
<div id="timelineBackground">
<?php if($cover = getCoverPicture($profile->account_id)): ?>
<?php $cover_image_path = upload_userdata_url() .'/'. $cover->account_id .'/'.'photos/'.$cover->photo_guid .'/'. $cover->photo_name;?>
<img style="margin-top: <?= $cover->photo_bg_position; ?>" class="bgImage" src="<?= $cover_image_path; ?>">
<?php endif; ?>
</div>
<div id="timelineShade" style="">
<form action="photo/uploadCoverPicture" enctype="multipart/form-data" method="post" id="bgimageform">
<div class="uploadFile timelineUploadBG">
<input type="file" original-title="Change Cover Picture" class=" custom-file-input" id="bgphotoimg" name="userfile">
</div>
</form>
</div>
</div>
</div>