signature pad doesn't work well inside modal window

[sbingram]

So I setup signature pad inside of a modal window inside a form. Form elements are loaded via jQuery from a key value each time the modal opens. I'm dynamically loading either the drawOnly or displayOnly div based on whether the form has been previously signed or not. Everything works perfectly the first time the modal is opened, however, any subsequent load fails with the canvas not properly reactivated for drawing input. This even occurs if the same unsigned modal is opened after not signing the form. I'm guessing this has something to do with the canvas element not performing well inside of a modal window. I've tried triggering the clear button (and pushing it manually for that matter) without any success. Obviously a complete page load resolves the issue, but is there a way to reset the signature pad function to eliminate the issue or am I just missing something in the application of this code?

[mockdeep]

Hey @sbingram you should be able to call $(signaturePadElement).signaturePad().regenerate(drawnSignature) in order to get the signature to redraw.

[sbingram]

Yes @mockdeep that's what I'm doing and it works, but only on the first modal open. After that, the entire div with the signature pad is locked and doesn't either allow for a new signature or display a signature. It's like it's in some indeterminate state and will no longer function. I've seen mention of problems with rebinding the events when editing the DOM, but since all that code exists in a separate script, I'm not sure how I could make that happen.

[mockdeep]

@sbingram I'm not aware of anything in SignaturePad that would cause this sort of issue. Can you provide code that demonstrates the issue?

[sbingram]

Sure. Here's the HTML from the modal:
`

-

Clear Signature Accept and Submit `

And then, here's the jQuery code:
if(!entry.checkin) { $('.drawItDesc').text('Please draw your signature to indicate your agreement'); $('#sig_area').replaceWith('<div id="sig_area" class="sig sigWrapper"><canvas class="pad" height="200" width="380"></canvas><input type="hidden" id="signature" name="signature" class="output"></div>'); $('.sigPad').signaturePad({drawOnly:true, lineWidth:0, lineMargin:0, lineTop:180}); $('#clear').trigger('click'); } else { $('.drawItDesc').text(''); $('#sig_area').replaceWith('<div id="sig_area" class="signed sigWrapper"><canvas class="pad" height="200" width="380"></canvas></div>'); $('.sigPad').signaturePad({displayOnly:true}).regenerate(entry.signature); }

So you can see the DIV tag inside the DOM is being replaced depending on the state of entry.checkin (either not signed or signed). I can see that the replacement is working because the drawItDesc does change, however, the signature area is frozen to a non-functional state where it won't allow any input, nor will it display a saved signature. Again, all of this works on the first open of the modal, but not on subsequent opens. It has to be some sort of state issue where the canvas is not properly activated on subsequent modal opens.

[sbingram]

Sorry @mockdeep, I just now noticed that the HTML code didn't come through here. I have corrected that now so you can see.