How to disable signaturePad (canvas) after ajax success

Question

I am using this plugin.

My application submits signature with ajax call. On a succesful ajax return I want to disable any signature changes by user. The last thing I tried is a following, but the signature pad is still active and drawing lines (listeners afe not detached):

   function showResponse(itemJson, statusText, xhr, $form) {

    if (itemJson.status == 'success') {

        debugger;

        $($form.find('.clearButton')).remove();
        $($form.find('button')).remove();

        $form.find('input').attr('readonly', 'readonly');

        var api = $form.signaturePad();
        var sig = api.getSignatureString();

        api.updateOptions({displayOnly: true})
//        $form.signaturePad({displayOnly: true}).regenerate(sig);

    }
}

Does anyone know how to update existing signaturePad, so it turns into disabled mode ?

The following change of option works: $sigPadElem.signaturePad({ penColour: '#FF0000' }).regenerate($sigPadElem.find('.output').val()); — Luke Wenke, Oct 12 '16 at 03:47
Do you mind sharing what solution you ended up using? Thanks. — Marklar, Nov 04 '17 at 08:04
I ended up removing the signature pad recently. But before that, I used approach to check if the signature exists then load inactive pad with signature. There should be an example how to show existing signatures. — vlr, Nov 08 '17 at 20:03

score 6 · Answer 1 · answered Oct 25 '18 at 11:43

6

Usually i use:

api.off();

It works in my software

answered Oct 25 '18 at 11:43

Fabio Ottaviani

61
1
4

score 2 · Answer 2 · answered Sep 10 '20 at 14:24

2

For anyone finding this thread while using the React package react-signature-canvas; you can disable it by calling padRef.current.off().

Here's a basic example of a pad that displays a given signature (sigValue) and is disabled

const SignatureDisplay = ({ sigValue }) => {
  const padRef = useRef({})

  useEffect(() => {
    padRef.current.fromData(sigValue || [])
    padRef.current.off()
  }, [])

  return (
    <SignaturePad
      ref={padRef}
      canvasProps={{
        height: 200,
        width: 400
      }}/>
  )
}

answered Sep 10 '20 at 14:24

Mark Potter

302
1
8

1

A little out of topic, but how did you get the padRef.current available in the useEffect? Mine always throws undefined when trying to call fromData – Luan Scudeler Oct 14 '20 at 23:26
1

@LuanScudeler bit of a cheat but if you pass an argument to useRef that will be the initial value, in the above code I have set it to an empty object which stops it from blowing up in the useEffect. Alternatively you could just add a guard clause to the useEffect eg `if(!padRef.current) { return }`. Sorry for not getting back sooner, hope this helps. – Mark Potter Nov 02 '20 at 11:15

score 0 · Answer 3 · answered Oct 12 '16 at 04:30

Added to jquery.signaturepad.js:

  $.extend(self, {
    /**
     * A property to store the current version of Signature Pad
     */
    signaturePad : '{{version}}'
...
    , disableCanvas : function () { disableCanvas() }    

    , clearAndDraw : function () { drawIt() }
...

To use it:

$sigPadElem.signaturePad().disableCanvas();

or:

$sigPadElem.signaturePad().clearAndDraw();

I wonder if this functionality can be done without modifying the plugin? (BTW I am unable to give the bounty to myself...)

score -2 · Answer 4 · edited Nov 30 '15 at 13:02

-2

Try this

$('.sigPad').signaturePad('disable');

edited Nov 30 '15 at 13:02

i'm PosSible

1,373
2
11
30

answered Nov 30 '15 at 12:36

Lineesh

106
1
1
6

How to disable signaturePad (canvas) after ajax success

4 Answers4