Интеграция проблемы signaturePad на laravel

Question

Я следовал этому уроку: http://www.lisenme.com/e-signature-pad-using-jquery-ajax-php-digital-signature-pad-submission-form/

Я добавил js-файлы в public / js

В моем head.blade.php я добавил:

    <!-- Bootstrap core CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<!-- Custom styles for this template -->

<link href="{{ asset('css/override.css') }}" rel="stylesheet">


<link href="{{ asset('css/jquery.signaturepad.css') }}" rel="stylesheet">

<script src="{{ asset('js/numeric-1.2.6.min.js')}}"></script>
<script src="{{ asset('js/bezier.js') }}"></script>
<script src="{{ asset('js/jquery.signaturepad.js') }}"></script>

<script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>

<script src="{{ asset('js/json2.min.js') }}"></script>

Тогда, на мой взгляд:

<div class="form-group col-md-8">
                                    <label>Signature électronique : </label>

                                    <div id="signArea" >
                                        <h2 class="tag-ingo"></h2>
                                        <div class="sig sigWrapper" style="height:auto;">
                                            <div class="typed"></div>
                                            <canvas class="sign-pad" id="sign-pad" width="300" height="100"></canvas>
                                        </div>
                                    </div>

                                    <button id="btnSaveSign">Save Signature</button>


                                </div>

И до @endsection

 <script>
            $(document).ready(function() {
                $('#signArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:90});
            });

            $("#btnSaveSign").click(function(e){
                html2canvas([document.getElementById('sign-pad')], {
                    onrendered: function (canvas) {
                        var canvas_img_data = canvas.toDataURL('image/png');
                        var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");

                        //ajax call to save image inside folder
                        $.ajax({
                            url: 'url',
                            data: { img_data:img_data },
                            type: 'post',
                            dataType: 'json',
                            success: function (response) {
                                window.location.reload();
                            }
                        });
                    }
                });
            });
        </script>

Когда я обновляю страницу, я получаю это исключение JavaScript:

UncaughtTypeError: $ (...). SignaturePad не является функцией

Я запускаю Jquery 3.3.1 и в руководстве они используют 1.10.2, может быть, это из-за этого?я делаю в правильном направлении?

Answer 1

Вам не хватает некоторых js, которые вам нужно включить в ваш головной раздел

посетите этот URL http://www.lisenme.com/e-signature-pad-using-jquery-ajax-php-digital-signature-pad-submission-form/

нажмите на демонстрационную версию и просто нажмите Ctrl + U, и вы получите требуемыйJS, которые должны быть включены в вашу голову