Getting jSignature to work (repeatedly) with Bootbox

[donluz]

Hello. I am using Bootbox for my modal method in Bootstrap 3. I am initializing jSignature and when I click my button, the modal appears and the signature pad is inside it; I capture the signature and the modal closes. All works fine.

However, without a page refresh, once that modal closes and I click the button (to open the modal) again, the signature pad is NOT inside it - the entire body section is empty whereas the first time, it contains the signature pad.

Any ideas what might cause this? I'm open to using BS3's modal method instead of Bootbox and have tried it, but received the same results. A complete working example would be helpful.

Here is my JS code:

function resetSignature() { $sigdiv.jSignature("reset"); // clears the canvas and rerenders the decor on it. }

function getSignature() { var theImgUrl = "/images/icons/stopwarn32x32.png"; var box = bootbox.dialog({ onEscape: function() {}, closeButton: true, message: $('#signature'), title: ' SIGNATURE CAPTURE', buttons: { reset: { label: "RESET", className: "btn-danger", callback: function() { resetSignature(); return false; } }, danger: { label: "CANCEL", className: "btn-warning", }, success: { label: "ACCEPT", className: "btn-success", callback: function(result) { saveSignature(); } } } }) .on('shown.bs.modal', function() { $sigdiv = $("#signature"); $sigdiv.jSignature(); resetSignature();

    adjustModalMaxHeightAndPosition();
})

}

function saveSignature() { if (!$sigdiv.jSignature("isModified")) alertBox("ERROR","Please provide a signature."); else { gsJs_datapair = $sigdiv.jSignature("getData","base30");

    //alertBox("RESULTS",gsJs_datapair.toString());
}

}

HTML CODE (partial):

 

[zevero]

I use jSignature repeatedly. I only initialize once

$sigdiv = $("#signature");
$sigdiv.jSignature();

when I hide and show and reset the Signature Box I get the same result as you (i.e. height is not correct and I cannot sign). Resizing the browser window helped. So I now trigger a resize Event after show:

window.dispatchEvent(new Event('resize'));

and everything is fine!

You may also want to include this in your css to control the height if necessary.

 canvas.jSignature { height: 270px; }

[donluz]

I truly appreciate your trying - but unfortunately this did not do the trick.

I even tried the CSS setting and the height was not altered - the 2nd time I opened the bootbox dialog with the jSignature element in it. It's as if the element is not getting created again or being included in the DOM of the bootbox (hope that terminology is about right).

Like I said, the first time I open the bootbox dialog, the jSignature is there complete with... my signature. I close the bootbox dialog, click the button to open it again (with no page refresh or anything else) and while the dialog box opens, there's nothing in it. The bootbox title is set properly every time I open it, first or other, but there's nothing in the body area.

Other thoughts?

I did change from the bootbox to the plain BS modal, but got the exact same results - signature there first time, nothing in body area 2nd.

[donluz]

More info which might be useful...

I went back and inspected the HTML for the 1st showing of the bootbox dialog and also the 2nd. The 1st had the "jSignature" div and the signature showed on-screen as expected. I closed the dialog (ESC or the "x" at top-right, or "ok" at bottom-right doesn't seem to make a difference).

Then I clicked the button to open the dialog again... an inspection this time shows no jSig div; the body section is completely empty in the HTML.

Then I inserted an "alert" within the "on('shown.bs.modal...". The 1st load - the alert showed and I clicked past it to then close the bootbox dialog. 2nd load... NO alert box showed!

UPDATE: I had to move the "alert" line to the top of the function and it indeed is getting called on the 2nd execution. But... for whatever reason, initializing / configuring the jSig element on the 2nd call gives an error (see bottom).

Here's the code again:

    sigDialogBox = bootbox.dialog({
        onEscape: function() {},
        closeButton: true,
        message: $('#signature'),
        title: '<img src="'+theImgUrl+'">&nbsp;<strong>RECORDED SIGNATURE</strong>',
        buttons: {
            success: {
                label: "Ok",
                className: "btn-info",
                callback: function(result) {
                    return true;
                }
            }
        }
    })
    .on('shown.bs.modal', function() {
        alert("test"); 

// THE JSIG STUFF WORKS FINE ON THE 1ST CALL AFTER A FRESH PAGE LOAD. THE 2ND CALL (AND THEREAFTER) ON THE SAME PAGE (WITHOUT ANOTHER REFRESH) FAILS, GIVES AN ERROR (SEE BOTTOM) AND SHOWS AN EMPTY BOOTBOX (OR BS MODAL) DIALOG.

    $sigdiv = $("#signature");
        $sigdiv.jSignature();
        $sigdiv.jSignature("setData", "data:"+pcSigData);
        $sigdiv.jSignature("disable");    // set to read-only

        window.dispatchEvent(new Event('resize'));

        adjustModalMaxHeightAndPosition();
    })
  .modal('show');

---

On the 2nd load, I get an error "Cannot read property 'settings' of undefined". This is happening on the jSig calls, not sure which line.

[ianpogi5]

I'm facing the same problem using bootstrap modal. I think a destroy api would solve the problem.

Were you able to solve your problem?

[donluz]

I've not been able to resolve it. I'm happy that someone else is seeing it though - but nothing personal of course. I'm figuring if others are experiencing it, perhaps someone in "the know" can find resolution.