0

I am working on a simple form-based invoice/receipt web app that requires obtaining a customer signature using signature_pad . My app utilizes Laravel 5.4 due to familiarity and the built-in user authentication scaffolding.

As proof of concept, I've tried embedding code from the signature_pad example into my Blade template without luck - drawing does not take place. Additionally, actions / event listeners associated with the buttons do not work either.

A straight html file variation of the code results in a functional signature_pad (see below), so I know that the code as written works just fine - the issue seems to be with either Laravel, Vue, Blade, or the way JS is handled inside of the template.

Any insight or expertise on using signature_pad within a blade template in Laravel 5.4 or similar is appreciated. Thank you.

<!DOCTYPE html>
<html>
 <head>
  <title>Testing</title>
 </head>

 
 <body>
  <div class="wrapper">
         <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
     </div>
     <div>
         <button id="save">Save</button>
         <button id="clear">Clear</button>
     </div>
 </body>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>


 <script>
  var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
    backgroundColor: 'rgba(255, 255, 255, 0)',
    penColor: 'rgb(0, 0, 0)'
  });
  var saveButton = document.getElementById('save');
  var cancelButton = document.getElementById('clear');

  saveButton.addEventListener('click', function (event) {
    var data = signaturePad.toDataURL('image/png');

  // Send data to server instead...
    window.open(data);
  });

  cancelButton.addEventListener('click', function (event) {
    signaturePad.clear();
  });


 </script>

</html>
scott_p
  • 57
  • 11

1 Answers1

0

The problem arises from the boilerplate template created by Laravel out of the box. By default, the template layout (views/layouts/app.blade.php) comes with a script tag for app.js, due to the Vue2.0 tie-in I suppose. Removing this call fully enables the signature_pad JS to work.

scott_p
  • 57
  • 11
  • I have created a Laravel package that abstracts all this out for you: https://github.com/GeneaLabs/laravel-casts. You may or may not find it helpful, just wanted to share so you don't have to reinvent the wheel. :) – mike.bronner Jan 04 '18 at 05:19