Open snackbar via JS/jQuery? #694

sukhcha-in · 2020-08-07T20:50:35Z

sukhcha-in
Aug 7, 2020

Body with snackbar and it's data:

<body x-data="snackbar()">
    <div class="w-full z-50 bottom-0 fixed" :class="color" x-show="isOpen()"
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-50 transform translate-y-6"
        x-transition:enter-end="opacity-100 transform translate-y-0"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 transform translate-y-0"
        x-transition:leave-end="opacity-50 transform translate-y-6">
        <div class="max-w-screen-xl mx-auto flex justify-between py-3 text-white font-semibold font-body">
            <div x-text="message"></div>
            <i class="icon-cancel-squared cursor-pointer" @click="close"></i>
        </div>
    </div>
</body>

and here is script tag:

function snackbar() {
    return {
        show: false,
        message: '',
        color: '',
        close() { this.show = false },
        isOpen() { return this.show === true },
        showSnackbar(message, color) {
            if(this.show === true) {
                this.show = false;
                // I want to add delay here so user can see old snackbar closing and new snackbar is opening..
            }
            this.message = message;
            this.color = color;
            this.show = true;
        },
    }
}

It's working great via @click method:

<button @click="showSnackbar('My Message', 'bg-purple-500')">Open Snackbar</button>

But can we open this snackbar programatically via Js/jQuery?
and I also want to add Delay inside showSnackbar function.

SimoTod · 2020-08-08T08:02:07Z

SimoTod
Aug 8, 2020
Collaborator

Alpine components are isolated, you can only trigger internal functions using events (well, there's a way to hack into the internal state but it's not documented nor advised since it's an internal api and it could change at any time).
On your component you define a listener on the window object like

<div x-data="snackbar()" @open-snackbar.window="openSnackbar($event.msg, $event.colour)">
  ... 
</div>

and from vanilla JS you just trigger the event

const event = new CustomEvent("open-snackbar", {
  detail: {
    msg: '...', 
    colour : '...' 
  }
});
window.dispatchEvent(event);

There are exemples in old issues and discussions as well.
Jquery is an odd one because it doesn't use standard events so it's probably easier to use vanilla JS or other alpine components like

<button x-data @click="$dispatch('open-snackbar')>open</open>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Open snackbar via JS/jQuery? #694

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Open snackbar via JS/jQuery? #694

Uh oh!

sukhcha-in Aug 7, 2020

Replies: 1 comment

Uh oh!

SimoTod Aug 8, 2020 Collaborator

sukhcha-in
Aug 7, 2020

SimoTod
Aug 8, 2020
Collaborator