Livewire / Custom Page issue / skipRender not functioning?
Hi all, looking for some help. I have a custom page and I am evolving its functionality. It's a simple search page and it returns results and presents a "heart" icon that can be clicked to indicate a "like" - turns to red.
Whenever the heart is clicked it results in part of the page being re-rendered (and the heart returns to its un-clicked state).
Please see video
https://www.loom.com/share/498ad9e4e57e4dbb93dc839a4c97d0ae?sid=965c6fd4-1e60-4f3e-b8e7-8676f7c92221
My blade code has an SVG
<svg id="heroicon{{ $result->id }}"
onclick="changeIconColor('{{ $result->id }}', event)" >
...
</svg>
The javascript function changeIconColor is defined as
function changeIconColor(id, event) {
const heroicon = document.getElementById(heroicon${id});
const currentFill = window.getComputedStyle(heroicon).getPropertyValue('fill');
if (currentFill == 'none')
heroicon.style.fill = 'red';
else
heroicon.style.fill = 'none';
Livewire.dispatch('toggle-state', {
id: id,
isActive: true
})
}
Note the Livewire.dispatch - this is firing - and is executing this function within the page's controller
public function toggleState($id, $isActive)
{
$this->skipRender();
...
}
As I understand it when you call a function within the controller, the blade gets re-rendered and I had hoped that adding the line $this->skipRender(); would suppress(per https://livewire.laravel.com/docs/actions#skipping-re-renders)
However this doesn't seem to make a difference - and so I wondered if perhaps the problem is one of the combination of the controller being a Filament page using livewire as opposed to a livewire component.
A bit puzzled about how to proceed right now would appreciate any and all suggestions.
thanks,
jLaravel
Actions | Laravel
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
2 Replies
What exactly are you trying to achieve here? Do you want to just change the color of the icon or do you want to persist something in the database?
If all you want is to change the color of the icon, you don't need any Livewire calls, just use JS.
My guess is that you want to save the user's favourites in the DB. In that case, I would double-check the rest of the code because it looks like there are some bugs somewhere.
1) Make sure the original state is populated correctly in your template
2) Make sure your changes are saved in the database as expected
With the code samples you provided, we can't help you much.
Either way, you can try the
#[Renderless] attribute on that method, see if that works.Thanks - in fact I think I have misunderstood something AND have therefore mis-represented my problem - there are some oddities in the UI but skipRender() is functioning.
Going to close this request and open another if (armed with my additional discovery this morning) i still have an issue to resolve.
Appreciate the input (oh and yes, there is to come some DB updates but I'm very confident in that area, it was the fundamentals of the UI/UX that I wanted to get nailed first).