Nov 11, 2022

Level 1

Why my wire:click are not working

Recently i have learning laravel and i following a project on youtube. I was make sure that i'm following correctly what he doing and why my wire:click on delete button are not working as he does

livewire index.php

public function deleteCategory($category_id) {

    $this->$category_id = $category_id;

}

public function destroyCategory()
{
    $category = Category::find($this->category_id);
    $path = 'uploads/category/'.$category->image;
    if(File::exists($path)) {
        File::delete($path);
    }
    $category->delete();
    session()->flash('message','Category Deleted');
    $this->dispatchBrowserEvent('close-modal');
}

livewire index.blade.php

Category Delete

Are you sure?

Close Yes

  </div>
</div>

    @if (session('message'))
        <div class="alert alert-success">{{ (session('message')) }}</div>
    @endif
    <div class="card">
        <div class="card-header">
            <h4>Category
                <a href="{{ url('admin/category/create') }}" class="btn btn-primary btn-sm float-end">Add category</a>
            </h4>
        </div>
        <div class="card-body">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Image</th>
                        <th>Action</th>
                    </tr>
                    <tbody>
                        @foreach ($categories as $category)
                            <tr>
                                <td>{{ $category->id }}</td>
                                <td>{{ $category->name }}</td>
                                <td>{{ $category->status == '1' ? 'Hidden':'Visible'}}</td>
                                <td>{{ $category->image }}</td>
                                <td>
                                    <a href="{{ url('admin/category/'.$category->id.'/edit') }}" class="btn btn-success">Edit</a>
                                    <a href="#" wire:click="deleteCategory({{$category->id}})" data-bs-toggle="modal" data-bs-target="#deleteModal" class="btn btn-danger">Delete</a>
                                </td>
                                <td>{{ $category->action }}</td>
        
                            </tr>
                            
                        @endforeach
                        {{ $categories->links('pagination::bootstrap-5') }}
                    </tbody>
                </thead>
            </table>
            
            <div>
                {{-- {{ $categories->links() }} --}}
            </div>
           
        </div>
    </div>
</div>

@push('script') window.addEventListener('close-modal', event => { $('#deleteModal').modal('hide'); }); @endpush

i try to find error but it didn't display anything, can u guys help me find it, thanks so much :(((

AungHtetPaing__

3 years ago

Level 22

@alien32 you are calling deleteCategory() method when click. There is no delete code. Call destroyCategory() there is $category->delete().

wire:click="destroyCategory({{$category->id}})"

public function destroyCategory($categoryId)
{
    $category = Category::find($categoryId);
    $path = 'uploads/category/'.$category->image;
    if(File::exists($path)) {
        File::delete($path);
    }
    $category->delete();
    session()->flash('message','Category Deleted');
    $this->dispatchBrowserEvent('close-modal');
}

1 like

FUUU

3 years ago

Level 1

@AungHtetPaing__ thanks for your reply, but it does not working too

AungHtetPaing__

3 years ago

Level 22

@Alien32 how it is not working? does method call when you click? do you get category? What error happen? nothing?

public function destroyCategory($categoryId)
{
	dd($categoryId) // check do you get correct id or not
    $category = Category::find($categoryId);
	dd($category) // check do you get category or not

    $path = 'uploads/category/'.$category->image;
    if(File::exists($path)) {
        File::delete($path);
    }
    $category->delete(); // is this actually call
    session()->flash('message','Category Deleted');
    $this->dispatchBrowserEvent('close-modal');
}

1 like

FUUU

3 years ago

Level 1

@AungHtetPaing__ yeah, nothing. I have something weird there. At category page (/admin/category), when i click Delete and confirm "Yes" button, it just back to category page and nothing happend (/admin/category?). I tried deleting destroy and delete function and what happend is have no different than before I did. dd() is not working too, i have try it before

AungHtetPaing__

3 years ago

Level 22

@Alien32 that is what I asked. Seem like your wire:click doesn't call controller method if you don't get anything in controller with dd(). You need to call destroyCategory() after modal confirm not when open modal. Show your bootstrap modal.

1 like

FUUU

3 years ago

Level 1

@AungHtetPaing__


<div>

<!-- Modal -->
<div wire:ignore.self class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Category Delete</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div>
          <form wire:submit.prevent="deleteCategory">
            <div class="modal-body">
                <h6>Are you sure?</h6>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Yes</button>
            </div>
        </form>
        </div>
        
            
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">

        @if (session('message'))
            <div class="alert alert-success">{{ (session('message')) }}</div>
        @endif
        <div class="card">
            <div class="card-header">
                <h4>Category
                    <a href="{{ url('admin/category/create') }}" class="btn btn-primary btn-sm float-end">Add category</a>
                </h4>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Image</th>
                            <th>Action</th>
                        </tr>
                        <tbody>
                            @foreach ($categories as $category)
                                <tr>
                                    <td>{{ $category->id }}</td>
                                    <td>{{ $category->name }}</td>
                                    <td>{{ $category->status == '1' ? 'Hidden':'Visible'}}</td>
                                    <td>{{ $category->image }}</td>
                                    <td>
                                        <a href="{{ url('admin/category/'.$category->id.'/edit') }}" class="btn btn-success">Edit</a>
                                        <a href="#" wire:click="destroyCategory({{$category->id}})" data-bs-toggle="modal" data-bs-target="#deleteModal" class="btn btn-danger">Delete</a>
                                    </td>
                                    <td>{{ $category->action }}</td>
            
                                </tr>
                                
                            @endforeach
                            {{ $categories->links('pagination::bootstrap-5') }}
                        </tbody>
                    </thead>
                </table>
                
                <div>
                    {{-- {{ $categories->links() }} --}}
                </div>
               
            </div>
        </div>
    </div>
</div>

</div>

@push('script')
    <script>
        window.addEventListener('close-modal', event => {
            $('#deleteModal').modal('hide');
        });
    </script>
@endpush

AungHtetPaing__

3 years ago

Level 22

@Alien32 here you are submitting form to deleteCategory and no category id doesn't include.

<form wire:submit.prevent="deleteCategory">
            <div class="modal-body">
                <h6>Are you sure?</h6>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Yes</button>
            </div>
        </form>

I don't know how to get category id in bootstrap modal. So I will try to open modal with livewire property.

// livewire component
public $categoryId;
public $showModal = false;

public function openModal($id) {
		$this->showModal = true;
		$this->categoryId = $id;
}

public function destroyCategory()
{
    $category = Category::find($this->categoryId);
    $path = 'uploads/category/'.$category->image;
    if(File::exists($path)) {
        File::delete($path);
    }
    $category->delete();
    session()->flash('message','Category Deleted');
    $this->dispatchBrowserEvent('close-modal');
}

// blade
<div>

<!-- Modal -->
@if($modalShow)
<div wire:ignore.self class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Category Delete</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div>
          <form wire:submit.prevent="destroyCategory">
			<div class="modal-body">
                <h6>Are you sure?</h6>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Yes</button>
            </div>
        </form>
        </div>
        
            
      </div>
    </div>
  </div>
@endif

  <div class="row">
    <div class="col-md-12">

        @if (session('message'))
            <div class="alert alert-success">{{ (session('message')) }}</div>
        @endif
        <div class="card">
            <div class="card-header">
                <h4>Category
                    <a href="{{ url('admin/category/create') }}" class="btn btn-primary btn-sm float-end">Add category</a>
                </h4>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Image</th>
                            <th>Action</th>
                        </tr>
                        <tbody>
                            @foreach ($categories as $category)
                                <tr>
                                    <td>{{ $category->id }}</td>
                                    <td>{{ $category->name }}</td>
                                    <td>{{ $category->status == '1' ? 'Hidden':'Visible'}}</td>
                                    <td>{{ $category->image }}</td>
                                    <td>
                                        <a href="{{ url('admin/category/'.$category->id.'/edit') }}" class="btn btn-success">Edit</a>
                                        <button wire:click="openModal({{$category->id}})"  class="btn btn-danger">Delete</button>
                                    </td>
                                    <td>{{ $category->action }}</td>
            
                                </tr>
                                
                            @endforeach
                            {{ $categories->links('pagination::bootstrap-5') }}
                        </tbody>
                    </thead>
                </table>
                
                <div>
                    {{-- {{ $categories->links() }} --}}
                </div>
               
            </div>
        </div>
    </div>
</div>

</div>

@push('script')
    <script>
        window.addEventListener('close-modal', event => {
            $('#deleteModal').modal('hide');
        });
    </script>
@endpush

1 like

FUUU

3 years ago

Level 1

@AungHtetPaing__ I will try it, if my livewire still not working, i'll find another solution. thank you for helping me, have a good day!

1 like

migsAV

3 years ago

Level 31

@alien32 have you got the Livewire scripts and styles included?

https://laravel-livewire.com/docs/2.x/quickstart#install-livewire

FUUU

3 years ago

Level 1

@migsAV yes, i got it on my admin layout

Please or to participate in this conversation.