How to dispatch event from common js file to method of component ?

[sergeynilov]

Hello,

in my Laravel 8 / tailwindcss 2 / Alpinejs 2.8 app
I added datepicker from https://jsfiddle.net/alr3id/8pLh9cze/ fiddle.

As in some cases I need more 1 datepicker on the form I modified showDatepickerClick
function with name parameter. Also I want to have 1 functions showDatepickerClick, isToday...
defined in common js file and I failed to dispatch method from common.js and catch it in my blade.php file.

I have in test2.blade.php :

@extends('layouts.app')

@section('content')

    <div class="flex items-center justify-center">

        <div class="antialiased sans-serif">

            <div x-data="app()" x-init="[initDate(), getNoOfDays()]"  x-cloak>
                <div class="container px-4 py-2 mx-auto md:py-10"  @custom-show-datepicker="customShowDatepicker($event.detail)" >

                    <div class="w-64 mb-5">

                        <fieldset class="my-3 bordered">
                            <legend>test1</legend>
                            selectedDatepickerElem::<span x-text="selectedDatepickerElem"></span><br>
                            datepickerValue1::<span x-text="datepickerValue1"></span><br>
                            showDatepicker::<span x-text="showDatepicker"></span><br>
                            <label for="datepicker" class="block mb-1 font-bold text-gray-700">Select Date 1</label>
                            <div class="relative">
                                <input type="hidden" name="date" x-ref="date1">
                                <input type="text" readonly x-model="datepickerValue1"
                                       id="date_picker_1"
                                       @click="showDatepickerClick('date_picker_1', getRrefs(), getParentRef())"
                                       @keydown.escape="cancelDatepickerClick()"
                                       class="w-full py-3 pl-4 pr-10 font-medium leading-none text-gray-600 rounded-lg shadow-sm focus:outline-none focus:shadow-outline"
                                       placeholder="Select date">

                                <div class="absolute top-0 right-0 px-3 py-2">
                                    <svg class="w-6 h-6 text-gray-400" fill="none" viewBox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                </div>

                            </div>
                        </fieldset>

                        <fieldset class="my-3 bordered">
                            <legend>test1</legend>
                            datepickerValue2::<span x-text="datepickerValue2"></span><br>
                            <label for="datepicker" class="block mb-1 font-bold text-gray-700">Select Date 1</label>
                            <div class="relative">
                                <input type="hidden" name="date" x-ref="date2">
                                <input type="text" readonly x-model="datepickerValue2"
                                       id="date_picker_2"
                                       @click="showDatepickerClick('date_picker_2', getRrefs(), getParentRef())"
                                       @keydown.escape="cancelDatepickerClick()"
                                       class="w-full py-3 pl-4 pr-10 font-medium leading-none text-gray-600 rounded-lg shadow-sm focus:outline-none focus:shadow-outline"
                                       placeholder="Select date">

                                <div class="absolute top-0 right-0 px-3 py-2">
                                    <svg class="w-6 h-6 text-gray-400" fill="none" viewBox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                </div>

                            </div>
                        </fieldset>
...

@section('scripts')
    <script>

        function app() {
            return {
                ...
                getParentRef() {
                   return this
                }, 

where in @custom-show-datepicker I try to catch event in method customShowDatepicker

and in common.js :

function showDatepickerClick(elemId, $refs, parentRef) {
    let datePickerElem = document.querySelector('#' + elemId);

    let datePickerElemStyleHeight = document.querySelector('#' + elemId).getBoundingClientRect().height;
    let datePickerElemStyleTop = document.querySelector('#' + elemId).getBoundingClientRect().top;
    let datePickerElemStyleLeft = document.querySelector('#' + elemId).getBoundingClientRect().left;

    let datepickerArea= $refs.datepickerArea
    datepickerArea.style.top = datePickerElemStyleTop + datePickerElemStyleHeight + 6;
    datepickerArea.style.left = datePickerElemStyleLeft - 12;

    parentRef.$dispatch( 'custom-show-datepicker', { elemId: elemId, visible : true } )
//     const event = new CustomEvent('custom-show-datepicker', { elemId: elemId, visible : true });

} // showDatepickerClick

To dispatch event from showDatepickerClick I tried 2 ways:

1. To set parentRef from app component, but I got
   parentRef.$dispatch is not a function
   error
2. as I read in alpinejs docs :

$dispatch is a shortcut for creating a CustomEvent and dispatching it using .dispatchEvent() internally. There are lots of good use cases for passing data around and between components using custom events. Read here for more information on the underlying CustomEvent system in browsers.

in showDatepickerClick above I uncommented line :

// parentRef.$dispatch( 'custom-show-datepicker', { elemId: elemId, visible : true } )
    const event = new CustomEvent('custom-show-datepicker', { elemId: elemId, visible : true });

```but customShowDatepicker is not triggered.
What is wrong and which is valid way ?

Thanks!

[KevinBatdorf]

Try using your custom event, make sure the event bubbles to the window, and update this:

@custom-show-datepicker.window="customShowDatepicker($event.detail)"

[sergeynilov]

Thanks!

With custom event definition :

   <div class="container px-4 py-2 mx-auto md:py-10"  @custom-show- datepicker.window="customShowDatepicker($event)" >
...


     customShowDatepicker(eventDetail) {
          alert('customShowDatepicker eventDetail::')
          console.log('customShowDatepicker eventDetail::')
          console.log(eventDetail)
     },

and triggering event

    const event = new CustomEvent('custom-show-datepicker', { elemId: elemId, visible : true });
    window.dispatchEvent(event)

customShowDatepicker is triggered but in its parameters eventDetail I did not find custom values :
{ elemId: elemId, visible : true }

: https://imgur.com/a/oW06usq
How to get it ?

[HugoDF]

$event.detail

[sergeynilov]

$event.detail equels null. That is visible on my printscreen

[sergeynilov]

Looks like valid format :

    const event = new CustomEvent('custom-show-datepicker', { bubbles: true, detail: { elemId: elemId, visible : true } });
    window.dispatchEvent(event)

Thanks for help!

[HugoDF]

oh right, yes 👍 glad you found a solution