script in modalContent(view('qr-scanner.php')) not working
Hello I am trying to integrate this package into filament action modal
https://github.com/mebjas/html5-qrcode
the console log in the script works only when called from a web.php route. the script doesnt execute when implemented through modalContent(view()). how can i solve this? any ideas would also be helpful. Thank you.
https://github.com/mebjas/html5-qrcode
Actions\Action::make('openModal')
->modalContent(view('filament-custom.qr-scanner'))
->mountUsing(function () {
// Dispatch the custom event to initialize the QR scanner
$this->dispatch('initialize-qr-scanner');
})
->action(function (array $data): void {
// Handle the action when the modal is submitted
// For example, you can process the $data here
}), Actions\Action::make('openModal')
->modalContent(view('filament-custom.qr-scanner'))
->mountUsing(function () {
// Dispatch the custom event to initialize the QR scanner
$this->dispatch('initialize-qr-scanner');
})
->action(function (array $data): void {
// Handle the action when the modal is submitted
// For example, you can process the $data here
}),<div class="border border-primary-500 w-[300px] h-[300px] mx-auto">
<div id="reader"></div>
</div>
<script src="https://unpkg.com/html5-qrcode"></script>
<script>
console.log('asbc')
function onScanSuccess(decodedText, decodedResult) {
// handle the scanned code as you like, for example:
console.log(`Code matched = ${decodedText}`, decodedResult);
document.getElementById("outputData").innerText = decodedText;
}
function onScanFailure(error) {
// handle scan failure, usually better to ignore and keep scanning.
// for example:
console.warn(`Code scan error = ${error}`);
}
document.addEventListener("DOMContentLoaded", function() {
const { Html5QrcodeScanner } = window;
let html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{ fps: 10, qrbox: {width: 250, height: 250} },
/* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
});
document.addEventListener('initialize-qr-scanner', function() {
const { Html5QrcodeScanner } = window;
let html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{ fps: 10, qrbox: {width: 250, height: 250} },
/* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
});
</script><div class="border border-primary-500 w-[300px] h-[300px] mx-auto">
<div id="reader"></div>
</div>
<script src="https://unpkg.com/html5-qrcode"></script>
<script>
console.log('asbc')
function onScanSuccess(decodedText, decodedResult) {
// handle the scanned code as you like, for example:
console.log(`Code matched = ${decodedText}`, decodedResult);
document.getElementById("outputData").innerText = decodedText;
}
function onScanFailure(error) {
// handle scan failure, usually better to ignore and keep scanning.
// for example:
console.warn(`Code scan error = ${error}`);
}
document.addEventListener("DOMContentLoaded", function() {
const { Html5QrcodeScanner } = window;
let html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{ fps: 10, qrbox: {width: 250, height: 250} },
/* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
});
document.addEventListener('initialize-qr-scanner', function() {
const { Html5QrcodeScanner } = window;
let html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{ fps: 10, qrbox: {width: 250, height: 250} },
/* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
});
</script>the console log in the script works only when called from a web.php route. the script doesnt execute when implemented through modalContent(view()). how can i solve this? any ideas would also be helpful. Thank you.
GitHub
A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org
- mebjas/html5-qrcode
Solution
add to the appserviceprovider
public function boot(): void
{
FilamentAsset::register([
Js::make('html5-code-script', 'https://unpkg.com/html5-qrcode')
]);
}public function boot(): void
{
FilamentAsset::register([
Js::make('html5-code-script', 'https://unpkg.com/html5-qrcode')
]);
}