Signature Pad and DOMPDF used in e-signature plugin for CRM platform

I have created a plugin which must generate a signed PDF. Before generating the PDF, you will need to input your name in a box and draw a signature using the pad.

I tried to do like in this question, but I get an error: Uncaught TypeError: $(...).signaturePad is not a function. Beside this error, the CSS is not loading, not JS too and the page where you need to sign looks like this: , but if I open the sign.html file in PC, it looks normal, like this:

I get this on every CSS and JS file that I have:

So, what I want to do is to solve the error from the signaturePad function and load the CSS & JS files properly, then after clicking Sunt de acord cu termenii si conditiile! to go to /templates/contract.php page and generate the PDF file with the signature that I have made on the sign.php file.

This is the code of sign.php file:

<?php chdir(__DIR__); ?>

<!DOCTYPE html>
<html lang = "EN">
    <head>
        <meta charset = "UTF-8">
        <meta http-equiv = "X-UA-Compatible" content = "IE=Edge">
        <meta name = "viewport" content = "width=device-width, initial-scale=1">
        <style>
            body {  font: normal 100.01%/1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;    }
        </style>
        <link href = "<?php __DIR__ . '/assets/jquery.signaturepad.css' ?>" rel = "stylesheet">
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    </head>

    <body>
        <form method = "post" action = "<?php __DIR__ . '/templates/contract.php' ?>" class = "sigPad">
            <div class = "sigPad">

                <label for = "name">
                    Introdu numele in casuta de mai jos:
                </label>
                <input type = "text" name = "name" id = "name" class = "name">

                <p class = "typeItDesc">
                    Previzualizeaza semnatura
                </p>
                <p class = "drawItDesc">
                    Deseneaza semnatura
                </p>

                <ul class = "sigNav">
                    <li class = "typeIt">
                        <a href = "#type-it" class = "current">
                            Scrie
                        </a>
                    </li>

                    <li class = "drawIt">
                        <a href = "#draw-it" class = "current">
                            Deseneaza
                        </a>
                    </li>

                    <li class = "clearButton">
                        <a href = "#clear" class = "current">
                            Sterge
                        </a>
                    </li>
                </ul>
                
                <div class = "sig sigWrapper">
                    <div class = "typed"></div>
                    <canvas class = "pad" width = "198" height = "55"></canvas>

                    <input type = "hidden" name = "imgOutput" class = "output" />
                </div>
                
                <button type = "submit">
                    Sunt de acord cu termenii si conditiile!
                </button>

            </div>
        </form>

        <script src = "<?php __DIR__ . '/assets/jquery.signaturepad.js' ?>"></script>
        <script>
            $(document).ready(function() {
                $('.sigPad').signaturePad();
            });
        </script>
        <script src = "<?php __DIR__ . 'assets/json2.min.js' ?>"></script>
    </body>
</html>

JavaScript
​x
 
<?php chdir(__DIR__); ?>​<!DOCTYPE html><html lang = "EN">    <head>        <meta charset = "UTF-8">        <meta http-equiv = "X-UA-Compatible" content = "IE=Edge">        <meta name = "viewport" content = "width=device-width, initial-scale=1">        <style>            body {  font: normal 100.01%/1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;    }        </style>        <link href = "<?php __DIR__ . '/assets/jquery.signaturepad.css' ?>" rel = "stylesheet">        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>    </head>​    <body>        <form method = "post" action = "<?php __DIR__ . '/templates/contract.php' ?>" class = "sigPad">            <div class = "sigPad">​                <label for = "name">                    Introdu numele in casuta de mai jos:                </label>                <input type = "text" name = "name" id = "name" class = "name">​                <p class = "typeItDesc">                    Previzualizeaza semnatura                </p>                <p class = "drawItDesc">                    Deseneaza semnatura                </p>​                <ul class = "sigNav">                    <li class = "typeIt">                        <a href = "#type-it" class = "current">                            Scrie                        </a>                    </li>​                    <li class = "drawIt">                        <a href = "#draw-it" class = "current">                            Deseneaza                        </a>                    </li>​                    <li class = "clearButton">                        <a href = "#clear" class = "current">                            Sterge                        </a>                    </li>                </ul>                                <div class = "sig sigWrapper">                    <div class = "typed"></div>                    <canvas class = "pad" width = "198" height = "55"></canvas>​                    <input type = "hidden" name = "imgOutput" class = "output" />                </div>                                <button type = "submit">                    Sunt de acord cu termenii si conditiile!                </button>​            </div>        </form>​        <script src = "<?php __DIR__ . '/assets/jquery.signaturepad.js' ?>"></script>        <script>            $(document).ready(function() {                $('.sigPad').signaturePad();            });        </script>        <script src = "<?php __DIR__ . 'assets/json2.min.js' ?>"></script>    </body></html>​

Answer

Now CSS and JS files are loading.

I’ve added:

<style>
   <?php include __DIR__ . '/assets/jquery.signaturepad.css' ?>
</style>

JavaScript
 
<style>   <?php include __DIR__ . '/assets/jquery.signaturepad.css' ?></style>​

and

<script>
   <?php include __DIR__ . '/assets/json2.min.js' ?>
</script>

JavaScript
 
<script>   <?php include __DIR__ . '/assets/json2.min.js' ?></script>​

Advertisement

Answer