jQuery not executed on page load
Posted
by
Arild Sandberg
on Stack Overflow
See other posts from Stack Overflow
or by Arild Sandberg
Published on 2014-08-19T19:07:47Z
Indexed on
2014/08/20
16:21 UTC
Read the original article
Hit count: 240
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>
© Stack Overflow or respective owner