I'm building an ajax upload with an editing function (rotate, zoom and crop), and I'm using guillotine by matiasgagliano (https://github.com/matiasgagliano/guillotine) for this. My problem is that after upload the user get redirected to the editing page through ajax, but when landing on that page I always have to refresh the page in browser for the image to load.
I've tried auto-reloading, both through js and php, but that doesn't help, neither does adding a button to load the same url again. Only refresh from browser button (tested in several browsers) works. I've tried implementing jquery.turbolinks, but that stopped guillotine functions from working.
I'm loading the guillotine.js in head section after jQuery, and have the function in bottom before body tag.
Any tip or help would be appreciated. Thx
Here is some of the code:
HTML:
<div class='frame'>
<img id="id_picture" src="identifications/<?php echo $id_url; ?>" alt="id" />
</div>
<div id='controls'>
<a href='javascript:void(0)' id='rotate_left' title='<?php echo $word_row[434]; ?>'><i class='fa fa-rotate-left'></i></a>
<a href='javascript:void(0)' id='zoom_out' title='<?php echo $word_row[436]; ?>'><i class='fa fa-search-minus'></i></a>
<a href='javascript:void(0)' id='fit' title='<?php echo $word_row[438]; ?>'><i class='fa fa-arrows-alt'></i></a>
<a href='javascript:void(0)' id='zoom_in' title='<?php echo $word_row[437]; ?>'><i class='fa fa-search-plus'></i></a>
<a href='javascript:void(0)' id='rotate_right' title='<?php echo $word_row[435]; ?>'><i class='fa fa-rotate-right'></i></a>
</div>
Js:
<script type='text/javascript'>
jQuery(function() {
var picture = $('#id_picture');
picture.guillotine({
width: 240,
height: 180
});
picture.on('load', function(){
// Initialize plugin (with custom event)
picture.guillotine({eventOnChange: 'guillotinechange'});
// Display inital data
var data = picture.guillotine('getData');
for(var key in data) { $('#'+key).html(data[key]); }
// Bind button actions
$('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
$('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
$('#fit').click(function(){ picture.guillotine('fit'); });
$('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
$('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
$('#process').click(function(){
$.ajax({
type: "POST",
url: "scripts/process_id.php?id=<?php echo $emp_id; ?>&user=<?php echo $user; ?>",
data: data,
cache: false,
success: function(html)
{
window.location = "<?php echo $finish_url; ?>";
}
});
});
// Update data on change
picture.on('guillotinechange', function(ev, data, action) {
data.scale = parseFloat(data.scale.toFixed(4));
for(var k in data) { $('#'+k).html(data[k]); }
});
});
});
</script>
