Livewire | refresh component from JS

I've a Livewire component for a side-menu. When I add a new menu-item I need the side-menu to refresh, but it doesn't. Instead, I've to reload the page to see the new item. Can you please help. Thanks

Livewire 3
Laravel 11

Adding a new menu-item | no errors

            $.ajax({ 
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }, 
                    url: link,
                    method: "GET",  
                    success: function(ret) {    
                                var lw_sidebar= Livewire.getByName("side-menu")[0];  
                                lw_sidebar.$refresh();   
								...

resources\views\livewire\side-menu.blade.php

                      @foreach ( $proj02 as $proj  )
                        <li class="nav-item">
                          <a href="#" class="nav-link" id="{{$proj02[0]->app}}-{{$proj->id}}">
                            <i class='fas fa-trash-alt nav-icon'></i>
                            <p>{{$proj->pname}}</p>
                          </a>
                        </li>
                      @endforeach

class SideMenu:

  public function render() {
       return view('livewire.side-menu', [ ...]); 
}

stt.blade.php | View

      <aside class="main-sidebar sidebar-dark-primary elevation-4" style="top: 0; bottom:0; position:fixed "> 
        @livewire ("side-menu",[ ... ]);
      </aside>

vincent15000

1 year ago

Level 63

Is there any particular reason why you are using JS to add a new menu item rather than using livewire ?

If you really want to use JS, you should use AlpineJS rather than jQuery.

1 like

alex32

1 year ago

Level 2

@vincent15000 Thanks for sharing. Livewire component is called when page-loads, then I want to refresh it from the front-end. jQuery calls the controller which in turn adds the new menu to the database, then I need Livewire to reload the component and refresh the side-menu. Perhaps this is not the best way to handle this action in Livewire? I've some logic in JS, that's why I use it. Can you please share how this should be done in Livewire ?

Many thanks

1 like

vincent15000

1 year ago

Level 63

@alex32 With Livewire you have just to add the new menu and save it via an action.

https://livewire.laravel.com/docs/actions

Actions are only methods that executes an action (store a new model, delete something, ...).

Once you have stored the new menu, you will perhaps have to retrieve all menus from the database to refresh the content of the menus collection, so that it refreshes the datas visible on the screen.

Definitely don't use jQuery with Livewire, if you really want to use some JS logic, rather use AlpineJS (which is moreover integrated inside Livewire).

alex32

1 year ago

Level 2

@vincent15000 Thanks, I'll give it a try.

1 like

Please or to participate in this conversation.