Многошаговая форма Livewire с помощью JS Signature Pad ⇐ Php

[Anonymous]

Я создаю систему KYC, которая состоит из нескольких этапов для получения информации о клиенте
Я использую vildanbina/livewire-wizard для многошаговой формы
она работает нормально
но на На последнем шаге я создал панель для подписи Javascript, которая позволяет пользователю рисовать свою подпись, а затем сохраняет ее как base64
Проблема в том, что когда я прохожу этапы, код Javascript панели подписи не работает ( пользователь не может рисовать)
но когда я дохожу до этапа подписи и обновляю страницу, код JavaScript работает, и пользователь может подписать
это функция, называемая на компоненте Livewire, когда я делаю шаги

Код: Выделить всё

public function setStep($step): void
{
$this->callHook('beforeSetStep', $this->activeStep, $step);

if ($this->hasPrevStep($step)) {
$this->stepsValidation($this->prevStep($step));
}

$this->getCurrentStep()->callHook('onStepOut');

$this->activeStep = $step;

$this->getCurrentStep()->callHook('onStepIn');

$this->callHook('afterSetStep', $this->activeStep, $step);
}

и это кнопка каждого шага

Код: Выделить всё

это вид панели для подписи

Код: Выделить всё

Click to sign

{{--                        --}}
{{--                        
[img]data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7[/img]
--}}





مسح

حفظ التوقيع

и, наконец, это JavaScript-панель для подписи

Код: Выделить всё

// Wrap your JavaScript code inside a function to initialize the signature pad
var wrapper = document.getElementById("signature-pad"),
clearBu
tton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
canvas = wrapper.querySelector("canvas"),
signaturePad;

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
var ratio =  window.devicePixelRatio || 1;
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}

resizeCanvas();

signaturePad = new SignaturePad(canvas);

clearButton.addEventListener("click", function(event) {
signaturePad.clear();
$("#save-btn").prop("disabled", false);
$("#save-btn").attr("class", "focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800");
$("#img-data").val('');
});

saveButton.addEventListener("click", function(event) {
event.preventDefault();

if (signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
var dataUrl = signaturePad.toDataURL();
var image_data = dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");

// Set the value of the input field with id 'img-data' to the image_data
$("#img-data").val(image_data);

// Check if img-data is not null
if ($("#img-data").val() != null) {
// Disable the button with id save-btn
$("#save-btn").prop("disabled", true);
$("#save-btn").attr("class", "py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700");

} else {
// Enable the button with id save-btn
$("#save-btn").prop("disabled", false);
}

$.ajax({
url: '/save-signature',
type: 'POST',
data: {
image_data: image_data,
},
}).done(function() {
//
});
}
})

Я пробовал использовать livewire:navigated в javascript, но это не сработало, потому что мастер livewire, который я использую, не использует Wire:navigate, вместо этого он использует Wire:click

Подробнее здесь: https://stackoverflow.com/questions/784 ... nature-pad