I want to fire a livewire event on a button click from a normal blade file. I have tried the below things but it is working only from the component itself.
Detail: Basically I have the table rendered using jquery in a normal blade file, every row in the table has an edit button, on click, a livewire bootstrap model will open with all the data, the modal is opening but not with data. suggest me a hint or solution.
livewire component as a bootstrap modal
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-hidden="true">
//blahh
</div>
table rendered using ajax response in standard blade file
success: function(response) {
$('tbody').html("");
$.each(response, function(key, item) {
str += '<tr>';
//blahh...
str += '<a href="#" id="' + item.id + '" onclick="window.livewire.emit({{ (''edit', '+item.id+'') }})" class="text-info mx-1 editIcon" data-toggle="modal" data-target="#editUserModal"></a>';
//need to fire event with id passed with it everything is workable but jquery showing error the way I write statement how to write ('openmodal', '16') correctly, 16 is a static id
//blahh...
str += '</tr>';
})
$('tbody').append(str);
)};
I have tried onclick method too as specified in the link to use window.livewire.emit but not worked
<a href="#" onclick="window.livewire.emit({{ 'openmodal', '16' }})" id="' + item.id + '" class="text-info mx-1 editIcon" data-toggle="modal" data-target="#editStudentModal"><i class="bi-pencil-square h4"></i></a>
Edit Component
class Edit extends Component
{
public $fname_edit, $user;
public ?int $userId = null;
protected $listeners = ['openmodal' => 'edit'];
public function edit(int $userId)
{
$this->userId = $userId;
$user = User::findOrFail($userId);
$this->fname_edit = $user->user_first_name;
}
}
Is it possible to open the livewire modal from the normal blade with data to edit, or should I stick to jquery?