For storing data I’m using the bootstrap modal.
But the problem I faced In my modal that is decendent dropdown is not working using wire:ignore method if I removed this wire:ignored method then modal hides.
Can anyone tell me how to get rid of this situation…
This is my LIvewire component methods
<?php
namespace App\Http\Livewire\Poi;
use App\Poi as AppPoi;
use Livewire\Component;
use App\Tbl_productcategory;
use App\Tbl_product_subcategory;
class Poi extends Component
{
public $product_name;
public $user_id;
public $product_category_id;
public $sub_category_id;
public $isActive;
public $subcategories = [];
public function store()
{
$validatedData = $this->validate([
'product_name' => 'required',
'product_category_id' => 'required',
'sub_category_id' => 'required',
]);
$validatedData['user_id'] = auth()->user()->id;
AppPoi::create($validatedData);
session()->flash('message', 'Row data successfully created.');
$this->reset();
}
public function render()
{
try {
if (!empty($this->product_category_id)) {
$this->subcategories = Tbl_product_subcategory::where('procat_id', $this->product_category_id)->get();
}
return view('livewire.poi.poi')->with([
'product_of_interests' => AppPoi::get(),
'categories' => Tbl_productcategory::has('tbl_product_subcategory')->get(),
]);
} catch (\Throwable $th) {
dd('catch exception', $th->getMessage());
}
}
}
THis is livewire blade
<div wire:ignore>
<!-- Modal -->
<div class="modal fade" id="poiModal" tabindex="-1" aria-labelledby="poiModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="poiModalLabel">Add New</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form wire:submit.prevent="store">
<div class="modal-body">
<div class="form-group">
<label for="product_name">Product Name</label>
<input wire:model="product_name" type="text" class="form-control" id="product_name" placeholder="eg: shoes">
</div>
<div class="form-group">
<label for="product_category_id">Category</label>
<select class="form-control required"
wire:model="product_category_id" name="product_category_id" id="product_category_id">
<option value="0">Select Category</option>
@foreach($categories as $cat)
<option value="{{ $cat->procat_id }}">{{ $cat->category }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="sub_category_id">SubCategory</label>
<select class="form-control required"
wire:model="sub_category_id" name="sub_category_id" id="sub_category_id">
<option value="">select subcategory</option>
@foreach($subcategories as $subcat)
<option value="{{ $subcat->prosubcat_id }}">{{ $subcat->category }}</option>
@endforeach
</select>
</div>
</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>
</form>
</div>
</div>
</div>
</div>
