Using js in edge templates

[marianoweber]

Hello,

is it possible to use javascript in edge templates?

For example:
I render a view with an error in its state. I want to show the error on page load via a 3rd party alert plugin. Not sure how to realize that.
Does anyone have tips on how to make it work?
The view is rendered server-side, but is there anything I can do to trigger client-side js on render?

Thanks!
Mariano

[galaczi]

You have several options to include client side Javascript. You can add it via a script tag or install via NPM and import your scripts in resources/js/app.js. Webpack Encore can bundle it for you.

https://docs.adonisjs.com/guides/installation#configure-webpack-encore
https://docs.adonisjs.com/reference/views/tags/entry-points#document
https://docs.adonisjs.com/guides/assets-manager

[marianoweber]

You have several options to include client side Javascript. You can add it via a script tag or install via NPM and import your scripts in resources/js/app.js. Webpack Encore can bundle it for you.

https://docs.adonisjs.com/guides/installation#configure-webpack-encore https://docs.adonisjs.com/reference/views/tags/entry-points#document https://docs.adonisjs.com/guides/assets-manager

Thank you for your answer, that was fast!

Imported the 3rd party plugin via app.js and that part works as far as I can tell.
My problem is the part where I need to hook into the client-side js from my edge template. How do I get the server-side error message to the client-side js and trigger a js function... any tips on that? Maybe I'm thinking way to complicated

[galaczi]

The common usage is:

edge

    <button id="myButton">Alert</button>

myCode.js

const myButton = document.getElementById('myButton')
myButton.addEventListener('click', showAlert)

import Swal from 'sweetalert2'

function showAlert() {
  Swal.fire({
    title: 'Error!',
    text: 'Do you want to continue',
    icon: 'error',
    confirmButtonText: 'Cool'
  })
}

app.js

import '../css/app.css'

import './myCode'

The problem with passing data from server side is that Webpack bundled scripts are not global, so you cannot reference them. The easy solution is using Alpinejs. You can pass data in the HTML template to Alpine methods.

<div x-data="yourData">
 <button @click="showAlert( {{errorFromServer}} )">Alert</button>
</div>

The more involved solution is looking into this:
https://stackoverflow.com/questions/34357489/calling-webpacked-code-from-outside-html-script-tag

[marianoweber]

Thank you so much for the detailed example! That helps a lot.