Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

520
Views
emit outside from component, Or fire a livwire event outside of livewire componenet

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?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!