As October now uses turborouter / pjax, using the window.onload event to initialize backend signature fields is no longer appropriate. To solve this, we need to catch the page:loaded event and check for any uninitialized signature fields.

Here's my tested (only with 3.x) signature.js. Note that this should be backward compatible but I have not tested with anything other than 3.3.12.

function initSignature () {
    $('canvas.signature-pad').each(function(){
        var sigfield = $("#fld-" + this.id);
        if (sigfield && sigfield.hasClass('sigfield-initialized')) {
            console.log('Skipping already initialized signature field #fld-' + this.id);
            return true;
        }
        sigfield.addClass('sigfield-initialized');
        console.log("Initializing signature field #fld-" + this.id);
        var sigPad = new SignaturePad(this, {
            backgroundColor: "rgba(255, 255, 255, 0)",
            penColor: "rgb(0, 0, 0)",
            onEnd: function() {
                if (!this.isEmpty()) {
                    sigfield.val(this.toDataURL("image/png"));
                }
            },
        });
        if (sigfield.val()) {
            sigPad.fromDataURL(sigfield.val());
        }
        $("#clear-"+ this.id).on("click", function (event) {
            sigPad.clear();
            sigfield.val('');
        });
    });
}

 if (oc.useTurbo && oc.useTurbo()) {
    addEventListener('page:loaded', function() {
        initSignature();
    });
 } else {
    $(window).on("load", function() {
        initSignature();
    });
 }

Last updated 1 year ago