i am trying to show a modal when i click the edit button so i added the wire:click :

                        <td class="py-3 px-6 text-left">
                            <div class="flex items-center">
                                <span class="font-medium">{{ $project->project }}</span>
                            </div>
                        </td>

                        <td class="py-3 px-6 text-left">
                            <div class="flex items-center">
                                <span>{{ $project->username }}</span>
                            </div>
                        </td>
                        
                        <td class="py-3 px-6 text-center">
                            <span class="bg-{{ $project->status_color }}-200 text-{{ $project->status_color }}-600 py-1 px-3 rounded-full text-xs"> {{ $project->status_name }} </span>
                        </td>

                        <td class="py-3 px-6 text-center">
                            <div class="flex item-center justify-center">

                            <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-1 px-4 rounded" wire:click="edit">
                              edit
                            </button>

                            </div>
                        </td>
                    </tr>

and here's my component :

use Livewire\Component;

class Dashboard extends Component
{
    use WithPagination;


    public function edit()
    {
        
        $this->emit('eModal');

    }
    
}

and inside the livewire blade where the button is i added the modal and the script for the button :

 <!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

    </div>

@push('scripts')

<script>
   Livewire.on('eModal', () =>{
     console.log('scsa');
  $('#editModal').modal('show');
});
</script>

@endpush

i added the console.log to the script so i can see if the emit is triggered but nothing happens i get nothing on my console . i tried dispatchBrowserEvent but same result nothing is happening .

some help please

CodePudding user response：

trying adding livewire event on main blade file

    <script>
    Livewire.on('eModal', () =>{
      console.log('scsa');
      $('#editModal').modal('show');
    });
   </script>