jQuery not executed on page load

Question

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>

Answer 1

You're incorrectly loading Guillotine twice, before and inside the onload handler.

You should initialize Guillotine after the image is loaded and just once:

var picture = $('#sample_picture');

picture.on('load', function(){
  picture.guillotine({
    width: 400, 
    height: 300,
    eventOnChange: 'guillotinechange'
  });

  ...
});

If after fixing this you still get any troubles, be aware that if an image is already loaded the onload event never gets triggered, even if the image is not present but cached it might load before you set the handler for onload.

It's not that jQuery doesn't execute on page load but possibly that the onload event never gets triggered.

To prevent this you can force the image to be loaded, place this after setting the onload handler:

// Force reloading if completed or if undetermined.
if (picture[0].complete !== false) {
  // 1x1 gif
  gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
  // Save original src, replace with the gif and reload the original src
  src = pic.src; pic.src = gif; pic.src = src
}

I hope this solves your problem, don't lose your faith in Guillotine ;)

Answer 2

Thanks for the respond guys, but i was unable to solve it. As soon as I wrapped any function around the jQuery function, the functions within it stopped working. I ended up using Jcrop instead of Guillotine, and built a rotating function that can be used before cropping. Now everything is working well.

Link to Jcrop: http://deepliquid.com/content/Jcrop.html

Answer 3

Make sure both the DOM-tree and the script is loaded.

var script = document.createElement('script');
script.src = "guillotine-master/js/jquery.guillotine.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
script.onload = function () { 

jQuery(function() { 
        var picture = $('#sample_picture');

        picture.guillotine({
          width: 240,
          height: 300
        });

        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_img.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]); }
          });


        });

    });
};