Использование signature_pad с bootstrap модальным и ajax сохранением - PullRequest
Новая
       48

Использование signature_pad с bootstrap модальным и ajax сохранением

0 голосов
/ 26 января 2020

Использование этого кода для вставки блока подписи в форму. При использовании стандартной формы HTML это прекрасно работает (ie, вызов не ajax, но отправка формы по URL).

Но то, что я сейчас пытаюсь сделать, это иметь холст в модальном элементе bootstrap на странице, который изначально скрыт. Затем я устанавливаю модальное отображение и запускаю холст. Затем - когда форма (включая заполненную подпись) отправлена ​​- данные формы сохраняются с помощью ajax (jQuery).

Моя проблема заключается в том, что я продолжаю получать ошибки, связанные с canvas / signaturePad, а не определяется - signaturePad is not defined при запуске ajax сохранить.

Это код подписи, включенный в bootstrap modal: 

 <div id="signature-pad" class="signature-pad">
    <div class="signature-pad--body">
      <canvas></canvas>
    </div>
  </div>

Это jQuery код для запуска модального режима (который работает отлично - я могу подписать на холсте): 

       $("#ModalActionCost").modal('show');

       var wrapper = document.getElementById("signature-pad");
        var canvas = wrapper.querySelector("canvas");
        var signaturePad = new SignaturePad(canvas, {
          backgroundColor: 'rgb(255, 255, 255)'
        });

И этот код при сохранении содержимого формы: 

    $("#trigger").click(function(e){

        var dataURL = signaturePad.toDataURL();   <-- this is the line I get the error on.
        $("#hiddenSignature").val(signaturePad.toDataURL("image/png").replace("data:image/png;base64,", ""));

        var hiddenSignature = $("#hiddenSignature").val();
        // ajax call follows.
        ......
   });

Опять получаю ошибку: signaturePad is not defined

Чтобы попытаться обойти эту ошибку, я подумал, что мне нужно снова запустить холст (вызов var signaturePad...) при сохранении с помощью ajax - это действительно сработало, и значение BLOB-объекта pad было отправлено, - но, конечно, я получаю пустой холст, видимый как он был стерт при повторном определении.

Я собрал упрощенную версию потока jsfiddle - которая вроде бы работает введите здесь описание ссылки , но я не могу понять, почему моя версия выше не работает.

Ответы [ 2 ]

0 голосов
/ 11 апреля 2020

не уверен, что именно радует ваш код, но вот что вы можете сделать, чтобы решить его.

проверьте ваши обертки и переменные canvas, посмотрите, не определены ли они или нет, используя console.log(wrapper); то же самое для canvas. если они на самом деле имеют значения, то в вашем коде переменная signaturePad может быть перезаписана перед триггером щелчка, или она недоступна из события click (вне области видимости).

что я предлагаю решить, это дать идентификатор самому холсту: 

<canvas id="SignaturePadCanvas"></canvas>

, затем сделать это: 

const canvas  = document.querySelector("#SignaturePadCanvas");
const context = canvas.getContext("2d");
const signaturePad = new SignaturePad(canvas, {
          backgroundColor: 'rgb(255, 255, 255)'
        });

$("#trigger").click(function(e){

    if(signaturePad == null || signaturePad == undefined)
    {
        console.log(canvas); //  debuging 
        return alert('signaturePad is undefined');
    }

    var dataURL = signaturePad.toDataURL();   

    if (_signature.isEmpty()) {      
      return alert("cannot get the data of an empty signature");
    }   

    $("#hiddenSignature").val(signaturePad.toDataURL("image/png").replace("data:image/png;base64,", ""));

    var hiddenSignature = $("#hiddenSignature").val();

});
0 голосов
/ 26 января 2020

Мое решение, для других:

Переместите экземпляр создания signature_pad - из функции, открывающей модальный режим - в onload страницы в целом: 

    var wrapper = document.getElementById("signature-pad");
    var canvas = wrapper.querySelector("canvas");
    var signaturePad = new SignaturePad(canvas, {
      backgroundColor: 'rgb(255, 255, 255)'
    });
...