Force a full page reload in Livewire

May 2024 ยท 2 minute read

I use Livewire and Alpine with Laravel 8.

I have a page with a Datatable (jQuery) and a Bootstrap modal.
The table is filled with some data from a list of model instances.
When I click on a button in the table, it opens the modal and allows to edit the corresponding record.
This part is working as expected.

However, the Datatable library is much more to difficult to use with Livewire, so I decided to scope the entire Datatable in a <div> with wire:ignore attribute.
Because of that, If I want to refresh the Datatable when a modification has been made, I can't use the magic $refresh because the Datatable is currently scoped inside wire:ignore.

So I was thinking about making a full page reload after the edit is done, but I did not figure out how to do this, return redirect()->back() is not working...

This is what my save method looks like, which is called when an edit from the modal is done:

public function save() { MyModel::where('id', $this->edited_id)->update([...]); $this->clearSelection(); return redirect()->back(); // This is not working } 

And this is my table:

<div wire:ignore> <table class="dt-table table"> <thead> <tr> <th>Actions</th> <th>id</th> <th>name</th> <th>other</th> </tr> </thead> <tbody> @foreach ($models as $m) <tr> <td> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mymodal">Edit</button> </td> <td>{{ $m->id }}</td> <td>{{ $m->name }}</td> <td>{{ $m->somedata }}</td> </tr> @endforeach </tbody> </table> </div> 
2

5 Answers

Livewire stores the original URL in the Referer header. You can use it to refresh the page:

return redirect(request()->header('Referer')); 
0

Check you're using Livewire version 2.x.x and you should be able to follow the docs here:

https://laravel-livewire.com/docs/2.x/redirecting

Livewire component:

class ContactForm extends Component { public $email; public function addContact() { Contact::create(['email' => $this->email]); return redirect()->to('/contact-form-success'); } } 

Livewire component template

<div> Email: <input wire:model="email"> <button wire:click="addContact">Submit</button> </div> 
2

In Livewire v3, you can use the js() method to evaluate smaller, individual JavaScript expressions:

$this->js('window.location.reload()'); 

See the docs for more info.

Just use url()->previous() in Livewire component, that's it.

In the view that includes the currency component

@livewire('nav-cart',['page'=>request()->fullUrl()]) 

Then in the component, the mounting method

public function mount($page) { $this->page = $page; 

create a public property $page, and then after changing the currency

return redirect($this->page); 

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobW1wZ2mBcnyOn6arm5Virm6y1KWjZqiRnLJuvsSlppqcXZ67brjIr5ywoaKa