Livewire with SweetAlert2

Hello @snapey. I am using a livewire component in my blade file (a blog index page, for example). On that page, I have a link to create a new post. When I click on this link, it takes me to a page where I'd create a new post and after this, I redirect back to the index page with sweetalert toast success. Usually, this works, but because I have a livewire component on that page, the sweetalert doesnt work. Anyway you could help suggest a workaround for this? Thanks.

it is not working for me.

installed sweetalert

used the codes u posted

in view file

<script>
  window.addEventListener('swal',function(e){
        Swal.fire(e.detail);
    });

</script>

in component class file

$this->dispatchBrowserEvent('swal', [
'title' => 'Feedback Saved',
'timer'=>3000,
'icon'=>'success',
'toast'=>true,
'position'=>'top-right'
]);

in master layout file

@include('sweetalert::alert')

but still not working

@Snapey dispatchBrowserEvent is deprecated. I am not sure how to display confirmation dialog using sweetalert2 and delete record by passing id to component from livewire frontend. I am spending a lot of time with this. No any useful document on google. Weird. I can't find it. Please help me, thank you.

@LongSu from the docs

In Livewire 2, Livewire had two different PHP methods for triggering events:

emit()
dispatchBrowserEvent()

Livewire 3 has unified these two methods into a single method:

dispatch()

So I expect my example to simply change dispatchBrowserEvent to just dispatch with the same parameters

@Snapey Awesome, that works perfectly! Thank you for your help.

Can you please help me with this problem? It makes me crazy. This is a link to what I am asking. I am using wire-element-modal package.

https://laracasts.com/discuss/channels/livewire/livewire-google-maps-api-why-is-my-collection-empty?page=1&replyId=928109

Thank you again.

@LongSu You have to fire an event to sweetalert as described above, and then when the user confirms using the sweetalert confirmation, catch the event that sweetalert fires and forward it back to Livewire.

Don't overlook the simple option of using Livewires built in confirmation alert. https://livewire.laravel.com/docs/wire-confirm

@Snapey , thank you. Do you know this ?

I am trying to load google map api link in livewire modal component, but I assure that it's just asset link. So, I added it in @assets directive , after that , I created callback function which will be calling from google map api. I am using wire-element/modal package from github. So something like this. This is a modal component blade file.

<div>
    <div>
        <x-input-label for="geoAddress" :value="__('Search Address for Map')" />
        <input wire:model.blur="geoAddress" type="text" id="geoAddress" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full px-4 py-2 mt-2" required />
    </div>
    <div wire:ignore>
        <div id="address-map-container" class="mt-2 w-full h-[100px]">
            <div style="width: 100%; height: 100%" id="map"></div>
        </div>
    </div>
</div>

@assets
<script src="https://maps.googleapis.com/maps/api/js?key={My google map api key}&callback=initAutocomplete&libraries=places&v=weekly" defer></script>
@endassets

@script
<script>
function initAutocomplete() {
	// my code here.
}
</script>
@endscript

But when I open a modal, error is showing with "Uncaught (in promise) InvalidValueError: initAutocomplete is not a function". I know this error why. It's because initAutomcomplete() function will be defined after fully loaded links in @assets. Livewire 3 document mentions that @script directive will be loaded after fully loaded links in @assets.

So, I tried to put google map api link like this. But I know this will not work.

@script
<script>
function initAutocomplete() {
	// my code here.
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={My google map api key}&callback=initAutocomplete&libraries=places&v=weekly" defer></script>
@endscript

Then, I assume , there is no way to load google map api link. Please help me how to load api link or let me know if there is any google map api package that I can use with livewire 3. Thank you so much!

@LongSu what has this to do with sweetalert?

@Snapey Thank you for your reply. Sweetalert issue was resolved, but I am having an issue related to google map api. Can you please help me? I asked it above in detail. Thank you so much!.

Ok, I found a solution using https://www.npmjs.com/package/@googlemaps/js-api-loader

@LongSu No. You should remove this totally different question from this thread.