Closed ineffablesam closed 4 months ago
It is really hard to say what is going on. Because I don't know how you have set things up or how you are mixing it.
All the maryUI demos uses wire:navigate
and there is no issue on loading components.
https://mary-ui.com/docs/demos
There is no way to start anything, because maryUI does not use javascript. It is just blade components.
Yep even i have went through the code of mary-ui website and the only difference is you are using volt and im using standard Livewire component
here is the code for endpoint https://erp.vitap.app/all-events
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Event;
use DateTime;
use Livewire\Attributes\Url;
class AllEvents extends Component
{
public $events = [];
#[Url(keep: true, history: true)]
public $search = '';
protected $queryString = ['search'];
protected function formatStartDate($event)
{
// Get the event start timestamp
$startTimestamp = $event->event_starts_on;
// Convert the timestamp to a DateTime object
$startDate = new DateTime($startTimestamp);
// Format the date as required
return $startDate->format('D, M d • h:i A');
}
public function render()
{
$searchString = implode('%', str_split($this->search));
// Fetch paginated featured events
$events = Event::where('is_published', 1,)
->where('status', 'APPROVED')
->where('title', 'ilike', '%' . $searchString . '%',)
->with('dates')
->with('dates:event_starts_on')
->select('thumbnail', 'title', 'location', 'category_id', 'slug')
->with('category:id,name')
->get();
$this->events = $events;
return view('livewire.all-events', [
'events' => $this->events
]);
}
}
HTML/Blade
<section>
<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
<span class="flex items-center">
</span>
<x-header title="All Events" subtitle="Explore our events" class="py-6">
<x-slot:middle class="!justify-end">
<x-input wire:model.live="search" icon="o-magnifying-glass" placeholder="Search..." />
</x-slot:middle>
</x-header>
@if ($events->isEmpty())
<div class="flex items-center justify-center h-96">
<div class="flex flex-col items-center">
<x-lucide-search class="w-16 h-16 text-gray-400" />
<h2 class="text-2xl font-bold mt-4 text-gray-900">No events found</h2>
<p class="text-gray-500">We couldn't find any events matching your search{{ $search }}</p>
</div>
</div>
@endif
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:items-stretch">
<div class="lg:col-span-2 lg:py-4">
<ul class="grid grid-cols-2 gap-4">
@foreach ($events as $event)
<li wire:key="{{ $event->id }}" class="">
<a wire:navigate class="cursor-pointer"
href="{{ route('event.details', ['slug' => $event->slug]) }}">
<div
class="mx-auto flex w-96 flex-col justify-center bg-white rounded-2xl hover:shadow-xl hover:shadow-slate-300/40 transition">
<!-- img -->
<div class="relative mx-3 mt-3 flex h-60 overflow-hidden rounded-t-xl"
href="#">
<img loading="lazy" placeholder="blur"
class="hover:scale-105 ease-in duration-150 w-96 rounded-t-2xl object-cover object-center"
src={{ '/storage/' . $event->thumbnail }} />
<span
class="absolute top-0 left-0 m-2 rounded-full bg-black px-2 text-center text-sm font-medium text-white">39%
OFF</span>
</div>
<!-- text information -->
<div class="p-4">
@if ($event->category)
<small
class="text-secondary-text-purple text-xs">{{ $event->category->name }}</small>
@endif
<h1 class="text-xl font-bold text-slate-600 pb-2">{{ $event->title }}
</h1>
<p
class="text-sm flex py-1 space-x-1 items-center flex-row tracking-tight font-light text-slate-400 leading-6">
<x-lucide-map-pin class="w-5 h-5 text-gray-500" />
{{ $event->location }} IST
</p>
</div>
</div>
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</section>
You can see that i have configured as same as the mary-ui documentation This issue occurs only when using wire:navigate to move to the /all-event page from the Home nav bar and if i force reload the page it starts working normally , Same for the Modals, Spotlight... etc
Unfortunately I am not able to debug your site, because it depends of a ton of things and how you have set it up. Probably you would have similar issue with another UI library.
The issue is not about the code above, but on how the things/libs are wired up on your environment.
Fore sure, if you spin up a brand new Laravel Project and install maryUI it will work.
If you wanna try a demo with maryUI this one is open source. https://github.com/robsontenorio/paper.mary-ui.com
maryUI version
1.26
daisyUI version
4.9.0
Livewire version
3.3.4
What browsers are affected?
Firefox, Chrome, Safari, Microsoft Edge
What happened?
I'm encountering an issue on my website (Demo Website) where some components of MaryUI fail to load when navigating using wire:navigate. I've attempted to resolve this by setting inject_assets to false in Livewire, but the issue persists.
Is there a way to reinitialize MaryUI() through JavaScript so I can attempt to resolve this issue programmatically? or any workaround for this issue ? other than using traditional anchor navigation?