Laravel 8 & Livewire Events not working well - php

Question

i'm developing an application with laravel 8 and livewire.
I've created in the view gestionale.blade.php three component (table) with the following operation.
The first table is populated when the page is loaded, then a row is selected and the second table is populated with a click event, finally by clicking a row in the second table the third table is populated.
From the Livewire documentation I used the events, but I only have the correct functioning of the first one, that is, clicking on the first table populates the second, but then clicking a row on the second I get nothing.
I entered a dump & die inside the code and I just don't get to raise the event in the second table.
This is my code:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Http\Request;
use App\Models\MinutaArticolo;
use Livewire\WithPagination;
use Illuminate\Support\Facades\DB;
use App\Tenant;
class TableArticoliContent extends Component
{
//Dichiariamo il listener degli eventi
protected $listeners = ['getArticoli' => 'getArticoli'];
protected $connection = null;
public $articoli = null;
protected $paginationTheme = 'bootstrap';
public function mount(Request $request) {
if(null !== $request->get('throughMiddleware'))
$this->connection = 'tenant';
else
$this->connection = null;
}
// Funzione richiamata dal componente livewire e che ritorna gli articoli
// a seconda dell'id partita passato
public function getArticoli($id_partita) {
if(null !== request()->get('throughMiddleware'))
$this->connection = 'tenant';
else
$this->connection = null;
$this->articoli = MinutaArticolo::on($this->connection)->where('id_minuta_partita', '=', $id_partita)->paginate(15)->toArray();
}
public function render()
{
return view('livewire.table-articoli-content')
->with('articoli', $this->articoli);
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Http\Request;
use App\Models\MinutaArticolo;
use Livewire\WithPagination;
use Illuminate\Support\Facades\DB;
use App\Tenant;
class TableArticoli extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function render() {
return view('livewire.table-articoli');
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Http\Request;
use App\Models\AnagraficaSoggetto;
class TablePraticheContent extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
protected $connection = null;
public $pratiche = null;
protected $listeners = ['filtri' => 'renderWithFilter'];
public function mount(Request $request) {
// Setto la connessione
if(null !== $request->get('throughMiddleware'))
$this->connection = 'tenant';
else
$this->connection = null;
// Recupero i dati da renderizzare
$anagrafica = new AnagraficaSoggetto();
$anagrafica->setConnection($this->connection);
$this->pratiche = $anagrafica->select(
'denominazioneSoggetto',
'anagrafica_soggetto.codiceFiscale',
'indirizzoPOSTA',
'tipologia_imposta.descrizione_sintetica',
'importoCarico as carico',
'importoResiduo as residuo',
'pagatoNormale as riscosso',
'pagatoDiscarico as sgravio',
'data_assegnazione',
'username as collaboratore',
'minuta_partita.id',
'minuta_partita.id_minuta as id_minuta',
'partita_pagamenti.progressivoRiscossione',
'partita_pagamenti.agenteRiscossione'
)->distinct()
->join('minuta_partita', 'minuta_partita.id_soggetto', '=', 'anagrafica_soggetto.id')
->join('users', 'minuta_partita.id_user', '=', 'users.id', 'left outer')
->join('partita_pagamenti', 'partita_pagamenti.id_minuta_partita', '=', 'minuta_partita.id', 'left outer')
->join('tipologia_imposta', 'minuta_partita.id_tipologia_imposta', '=', 'tipologia_imposta.id')
->paginate(15)->toArray();
}
//funzione per triggerare l'evento onclick sulla tabella pratiche
public function clickPartiteTrigger($id) {
$this->emit('getPartite', $id);
$this->render = false;
}
public function render() {
return view('livewire.table-pratiche-content')
->with('pratiche', $this->pratiche);
}
public function renderWithFilter($filtered){
$this->pratiche = $filtered;
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Http\Request;
use App\Models\AnagraficaSoggetto;
class TablePratiche extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function render() {
return view('livewire.table-pratiche');
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\MinutaPartita;
use Livewire\WithPagination;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Tenant;
class TablePartiteContent extends Component
{
//Dichiariamo il listener degli eventi
protected $listeners = ['getPartite' => 'getPartite',
'filtri_partite' => 'renderWithFilter'];
protected $connection = null;
public $partite = null;
protected $paginationTheme = 'bootstrap';
public function mount(Request $request) {
if(null !== $request->get('throughMiddleware'))
$this->connection = 'tenant';
else
$this->connection = null;
}
//funzione per triggerare l'evento onclick sulla tabella partite
public function clickArticoliTrigger($id) {
dd($id);
$this->emit('getArticoli', $id);
$this->render = false;
}
// Funzione richiamata dal componente livewire e che ritorna le partite
// a seconda dell'id pratica passato
public function getPartite($id_minuta) {
if(null !== request()->get('throughMiddleware'))
$this->connection = 'tenant';
else
$this->connection = null;
$this->partite = MinutaPartita::on($this->connection)->where('id_minuta', '=', $id_minuta)->paginate(15)->toArray();
}
public function render() {
return view('livewire.table-partite-content')
->with('partite', $this->partite);
}
public function renderWithFilter($filtered){
$this->partite = $filtered;
}
}
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\MinutaPartita;
use Livewire\WithPagination;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Tenant;
class TablePartite extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public function render() {
return view('livewire.table-partite');
}
}
and this is my component in which i've the event which must make me populate the third table
<tbody id="partite_result">
#if (!empty($partite))
#foreach ($partite['data'] as $pt)
<tr wire:click="clickArticoliTrigger({{ $pt['id']}})">
<td>{{ $pt['annoRuolo'] }}</td>
<td>{{ $pt['numeroRuolo'] }}</td>
<td>{{ $pt['agenteRiscossione'] ?? ''}}</td>
<td>{{ $pt['annoRif'] ?? '' }}</td>
<td>{{ $pt['tipoImposta'] ?? '' }}</td>
<td>{{ $pt['id_minuta_partita'] ?? '' }}</td>
<td>{{ $pt['importoCarico'] }}</td>
<td>{{ $pt['pagatoNormale'] }}</td>
<td>{{ $pt['pagatoDiscarico'] }}</td>
<td>{{ $pt['importoResiduo'] }}</td>
<td>{{ $pt['proceduraEsecutiva'] }}</td>
<td>{{ $pt['importoInesigibilita'] }}</td>
<td>{{ $pt['stato'] ?? ''}}</td>
</tr>
#endforeach
#endif
</tbody>
Can someone have any tips or advice to help me? Thanks to all :-)
EDIT (this is my component code):
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Partite</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="example5" class="display" style="min-width: 845px">
<thead>
<tr>
<th>Anno ruolo</th>
<th>Numero ruolo</th>
<th>Agente Riscossione</th>
<th>Anno imposta</th>
<th>Tipo imposta</th>
<th>Partita</th>
<th>Carico</th>
<th>Riscosso</th>
<th>Sgravio</th>
<th>Residuo</th>
<th>Peocedura</th>
<th>Inesigibile</th>
<th>Stato</th>
</tr>
</thead>
<livewire:table-partite-content />
<livewire:tbl-partite-footer-filter />
</table>
</div>
</div>
</div>
</div>
</div>

Answer 1

Clearer code:
I've this route: Route::get('/gestionale', [App\Http\Controllers\GestionaleController::class, 'index']);
And i go in the view blade called gestionale.blade.php and in this view i've my three livewire component.
The code of the view gestionale.blade.php is:
{{-- Extends layout --}}
#extends('layout.layout2')
{{-- Content --}}
#section('content')
<div class="container-fluid">
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4>Benvenuto sul Gestionale</h4>
<span>Qui sono listate pratche, partite e articoli</span>
</div>
</div>
</div>
<!-- import del componente gestionale header filter per i filtri -->
<livewire:gestionale-header-filter>
<!-- fine import del componente gestionale header filter -->
<hr/>
<!-- import dei component livewire (tab: partite, pratiche, articoli) -->
<livewire:table-pratiche /> // first component (event on this works)
<hr/>
<livewire:table-partite /> // second component (in this, the event not works)
<hr/>
<livewire:table-articoli /> // third component
<!-- fine dell'import dei component livewire (tab: partite, pratiche, articoli) -->
<div class="row">
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<!-- button per l'apertura dei modal -->
<div class="btn-group">
<button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#PagamentoLongModal">Aggiungi pagamento</button>
<button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target=".bd-example-modal-lg">Aggiungi assegnatario</button>
<button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#ShowPagamentiModal">Pagamenti</button>
<button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#ProcedureInesigibilitaModal">Procedure/Inesigibilità</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inizio dei modal per gestire le azioni del gestionale -->
<!-- modal per l'inserimento di un pagamento -->
<div class="modal fade" id="PagamentoLongModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Aggungi un pagamento</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere l'azione -->
<div class="basic-form">
<form method="POST" action="#">
#csrf
<div class="form-group row">
<label class="col-sm-3 col-form-label">Ente</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Ente" value="" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Partita</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Partita" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Anno Rif.</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Anno Riferimento" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Anno</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Anno" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Numero</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Numero" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Carico</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Carico" disabled>
</div>
</div>
<hr/>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Tipologia</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Tipologia">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Imposta</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Imposta">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Decimali</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Decimali imposta" maxlenght="2">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Mora</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Mora">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Decimali</label>
<div class="col-sm-9">
<input type="number" class="form-control input-rounded" placeholder="Decimali mora" maxlength="2">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Data Pagamento</label>
<div class="col-sm-9">
<input type="date" class="form-control input-rounded" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Data Registrazione</label>
<div class="col-sm-9">
<input type="date" class="form-control input-rounded" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Note</label>
<div class="col-sm-9">
<input type="text" class="form-control input-rounded" placeholder="Email" minlength="3" maxlength="255">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Salva</button>
</div>
</div>
</div>
</div>
<!-- modal per l'inserimento di un assegnatario -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Aggiungi un assegnatario</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere l'azione -->
<form method="POST" action="#">
<div class="form-group row">
<div class="form-group">
<label>Seleziona assegnatari (tieni premuto shift per una selezione multipla):</label>
<select multiple class="form-control input-rounded" id="sel2">
#if(!empty($users))
#foreach($users as $u)
<option value="{{$u->id}}">{{$u->username}}</option>
#endforeach
#endif
</select>
</div>
<div class="form-group">
<label class="col-sm-12 col-form-label">Data Assegnazione</label>
<div class="col-sm-12">
<input type="date" class="form-control input-rounded" placeholder="Data Assegn.">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Salva</button>
</div>
</div>
</div>
</div>
<!-- modal per visualizzare i pagamenti associati alla partita -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true" id="ShowPagamentiModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Pagamenti associati alla partita</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere il corpo del body -->
<p>Body da aggiungere, da capire i dati da mostrare a video</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary"><i class="fa fa-print" aria-hidden="true"></i> Stampa</button>
</div>
</div>
</div>
</div>
<!-- modal per visualizzare le procedure e le inesigibilita associati alla partita -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true" id="ProcedureInesigibilitaModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Procedure e Inesigibilità</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span>
</button>
</div>
<div class="modal-body">
<!-- da aggiungere il corpo del body -->
<p>Body da aggiungere, da capire i dati da mostrare a video</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary"><i class="fa fa-print" aria-hidden="true"></i> Stampa</button>
</div>
</div>
</div>
</div>
<!-- fine dei modal per gestire le azioni del gestionale -->
<!-- IMPORTANTE: AGGIUNGERE IL CSRF TOKEN PRIMA DI ANDARE IN PRODUZIONE -->
#endsection
For table-pratiche i've this structure of my livewire component
table-pratiche:
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Pratiche</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="example4" class="display" style="min-width: 845px">
<thead>
<tr>
<th>Soggetto</th>
<th>Codice Fiscale</th>
<th>Indirizzo</th>
<th>Tipo di imposta</th>
<th>Carico</th>
<th>Riscosso</th>
<th>Sgravio</th>
<th>Residuo</th>
<th>Assegnatario</th>
<th>Data assegn.</th>
<th>Dettagli</th>
</tr>
</thead>
<livewire:table-pratiche-content />
<livewire:tbl-pratiche-footer-filter />
</table>
</div>
</div>
</div>
</div>
</div>
table-pratiche-content:
<tbody id="filter_result">
#if (!empty($pratiche))
<?php
$carico = 0;
$riscosso = 0;
$sgravio = 0;
$residuo = 0;
?>
#foreach ($pratiche['data'] as $p)
<tr wire:click="clickPartiteTrigger({{ $p['id_minuta'] }})">
<td>{{ $p['denominazioneSoggetto'] }}</td>
<td>{{ $p['codiceFiscale'] }}</td>
<td>{{ $p['indirizzoPOSTA'] }}</td>
<td>{{ $p['descrizione_sintetica'] }}</td>
<td>{{ $p['carico'] }}</td>
<td>{{ $p['riscosso'] }}</td>
<td>{{ $p['sgravio'] }}</td>
<td>{{ $p['residuo'] }}</td>
<td>Collaboratore</td>
<td>{{ $p['data_assegnazione'] }}</td>
<td><span class="badge light badge-warning">Pending</span></td>
<?php
$carico = $carico + $p['carico'];
$riscosso = $riscosso + $p['riscosso'];
$sgravio = $sgravio + $p['sgravio'];
$residuo = $residuo + $p['residuo'];
?>
</tr>
#endforeach
#endif
</tbody>
For table-partite in the same way i've:
table-partite:
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Partite</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="example5" class="display" style="min-width: 845px">
<thead>
<tr>
<th>Anno ruolo</th>
<th>Numero ruolo</th>
<th>Agente Riscossione</th>
<th>Anno imposta</th>
<th>Tipo imposta</th>
<th>Partita</th>
<th>Carico</th>
<th>Riscosso</th>
<th>Sgravio</th>
<th>Residuo</th>
<th>Peocedura</th>
<th>Inesigibile</th>
<th>Stato</th>
</tr>
</thead>
<livewire:table-partite-content />
<livewire:tbl-partite-footer-filter />
</table>
</div>
</div>
</div>
</div>
</div>
table-partite-content
<tbody id="partite_result">
#if (!empty($partite))
#foreach ($partite['data'] as $pt)
<tr wire:click="clickArticoliTrigger({{ $pt['id']}})">
<td>{{ $pt['annoRuolo'] }}</td>
<td>{{ $pt['numeroRuolo'] }}</td>
<td>{{ $pt['agenteRiscossione'] ?? ''}}</td>
<td>{{ $pt['annoRif'] ?? '' }}</td>
<td>{{ $pt['tipoImposta'] ?? '' }}</td>
<td>{{ $pt['id_minuta_partita'] ?? '' }}</td>
<td>{{ $pt['importoCarico'] }}</td>
<td>{{ $pt['pagatoNormale'] }}</td>
<td>{{ $pt['pagatoDiscarico'] }}</td>
<td>{{ $pt['importoResiduo'] }}</td>
<td>{{ $pt['proceduraEsecutiva'] }}</td>
<td>{{ $pt['importoInesigibilita'] }}</td>
<td>{{ $pt['stato'] ?? ''}}</td>
</tr>
#endforeach
#endif
</tbody>
and in the last, for table-articoli i've
table-articoli
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Articoli</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="example4" class="display" style="min-width: 845px">
<thead>
<tr>
<th>Codice Tributo</th>
<th>Descrizione</th>
<th>Progressivo</th>
<th>Carico</th>
<th>Dettaglio utenza</th>
</tr>
</thead>
<livewire:table-articoli-content />
</table>
</div>
</div>
</div>
</div>
</div>
-table-articoli-content
<tbody id="articoli_result">
#if (!empty($articoli))
#foreach ($articoli as $a)
<tr>
<td>{{ $a->codiceEntrata }}</td>
<td>{{ $a->descrizioneArticolo }}</td>
<td>{{ $a->progressivoArticolo}}</td>
<td>{{ $a->importoCarico }}</td>
<td>{{ $a->descrizioneArticolo}}</td>
</tr>
#endforeach
#endif
</tbody>
The livewire components are the component posted in the previous question