How to initialize the alpine component AFTER an event.

[JuanDeLeon]

I'm trying to use the google maps API, and setting some initial Markers on page load.
I have my component defined like this.
<div x-data="getData()" x-init="initMarkers">...</div>

On x-init, I call my initMarkers method to create some markers:
user.marker = new google.maps.Marker({...})

However, at this point the google api script may not be loaded yet. And I get a "google is not defined" message.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap"> </script>

So, my thought was to initialize the Alpine component inside the initMap() function, which is called after google is done. I'm not sure if this is even possible though. Any input appreciated.

[ryangjchandler]

@JuanDeLeon There's no native way to defer the registration of an Alpine component at the moment, but similar discussions have been had before.

You could work around it by including the x-data attribute on your component, then adding it inside of the initMap() function. This is super hacky though, and probably not too stable.

You could also set a timeout for a second (hopefully gmaps has loaded by then) and run your code then.

[SimoTod]

Other 2 options:

• go fully async. in initMap you can dispatch a custom event (let's call it map-ready), your component need to set a listener (@map-ready.window) and, when it gets the event, populate the variable you need.
  Since you don't know if that map in ready, you need to check in x-init and call the same function if google exists.
• go fully sync and remove the async defer attributes from the Google script (i would not do it, it's going to slow down your page).

[ryangjchandler]

Ah yeah, events would be the best shout.

[JuanDeLeon]

Awesome, thanks a lot guys.
I tried both the fully sync and fully async (event) ways, and they both work.
Here's the example in case it helps anyone:

<div x-data="getData()" x-init="initMarkers" @map-ready.window="initMarkers">

function initMap(){
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11,
      center: { lat: 25.684411, lng: -100.317283 }
    });
    var mapReadyEvent = new CustomEvent('map-ready');
    window.dispatchEvent(mapReadyEvent);
  }

[bomshteyn]

Hi @JuanDeLeon would you be able to post the full example? Am trying to do the same thing and am running into issues.

[JuanDeLeon]

@bomshteyn Well there's not much more to add. I just declare the global 'map' variable and dispatch the mapReadyEvent once the map is loaded.

So my initMarkers method will be called once on x-init (this may actually be unnecessary), and once again when the event is dispatched (notice I check first if 'google' is defined).
Then I just start putting some markers on it.

var map;

function initMap(){
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11,
      gestureHandling: 'greedy',
      center: { lat: 25.684411, lng: -100.317283 } 
    });
    var mapReadyEvent = new CustomEvent('map-ready');
    window.dispatchEvent(mapReadyEvent);
}

initMarkers(){
        if(google != undefined){
          (...)
                user.marker = new google.maps.Marker({
                  position: e.position,
                  map: map,
                  icon: '/img.png'
                });
      }
}

[bomshteyn]

Thank you, was just missing the nitMarkers function :-)

[gauravmak]

Thanks to the suggestion from @SimoTod, we could solve a small challenge. Just published a blog post for future reference.

[Shashank-Bhatt1]

Hi Guys, I am having some issues when using alpine data inside the table column where jQuery datatable plugin has been used. I am not able to take advantage of x-data if I initialize datatable for the table.

Sorry I have not created fiddle yet but here is some code. So basically here x-data and active functionality is not working if I initialize datatable plugin as it modifies DOM after alpine attaches events.

<table id="usersTable" class="table table-hover table-vcenter" style="width: 100%">
    <thead>
        <tr>
            <th>{{__('User')}}</th>
            <th>{{__('Customer Group')}}</th>
            <th>{{__('Price List')}}</th>
            <th>{{__('Orders')}}</th>
            <th class="text-end">{{__('Action')}}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Jane Doe
            </td>
            <td>
                <div class="dropdown" x-data="{active: ''}">
                    <button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                        {{__('Default')}}
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a :class="active === 'Default'? 'active':''" @click="active = 'Default'" href="javascript: void(0)" class="dropdown-item d-flex align-items-center">
                                {{__('Default')}} <i x-show="active === 'Default'" class="far fa-check ms-auto"></i>
                            </a>
                        </li>
                        <li>
                            <a :class="active === 'Main Customer'? 'active':''" @click="active = 'Main Customer'" href="javascript: void(0)" class="dropdown-item d-flex align-items-center">
                                {{__('Main Customer')}} <i x-show="active === 'Main Customer'" class="far fa-check ms-auto"></i>
                            </a>
                        </li>
                        <li>
                            <a :class="active === 'Main Clients'? 'active':''" @click="active = 'Main Clients'" href="javascript: void(0)" class="dropdown-item d-flex align-items-center">
                                {{__('Main Clients')}} <i x-show="active === 'Main Clients'" class="far fa-check ms-auto"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </td>
            <td>
                <div class="dropdown" x-data="{active: ''}">
                    <button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                        {{__('Inherit Group')}}
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript: void(0)" :class="active === 'Default' ? 'active':''" @click="active = 'Default'" class="dropdown-item d-flex align-items-center">
                                {{__('Default')}} <i x-show="active === 'Default'" class="far fa-check ms-auto"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript: void(0)" :class="active === 'Inherit Group' ? 'active':''" @click="active = 'Inherit Group'" class="dropdown-item d-flex align-items-center">
                                {{__('Inherit Group')}} <i x-show="active === 'Inherit Group'" class="far fa-check ms-auto"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript: void(0)" :class="active === 'Loyalty Sale' ? 'active':''" @click="active = 'Loyalty Sale'" class="dropdown-item d-flex align-items-center">
                                {{__('Loyalty Sale')}} <i x-show="active === 'Loyalty Sale'" class="far fa-check ms-auto"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </td>
            <td>3</td>
            <td class="text-end">
                <div class="btn-group">
                    <button data-bs-toggle="modal" data-bs-target="#b2bUsersEdit" class="btn btn-sm btn-outline-primary"><i class="far fa-edit"></i></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(function(){
        let table = $('#usersTable').DataTable({
        });
    })
</script>