Ciao a tutti, spero di postare nella categoria corretta data la natura della domanda.
Sto sviluppando un'applicazione gestionale mediante laravel 8 e livewire.
In una delle mie viste ho tre tabelle di cui due vengono popolate dinamicamente.
In pratica quando clicco una riga della prima tabella mi viene popolata la seconda tabella con i dati corretti, e poi quando clicco una riga della seconda tabella viene popolata la terza tabella con i dati corretti.
Ciò di cui ho bisogno è quella di aggiungere alla riga selezionata con il click, una classe (presa dal mio template bootstrap) e ho pensato di fare ciò mediante JS.
Faccio ciò in modo tale che quando clicco la riga essa resti evidenziata di un colore diverso.
Il problema è che quando clicco la riga ho il comportamento desiderato e quindi essa viene evidenziata, però mantiene questo stato solo per alcuni secondi e poi perde la classe.
Non riesco a capire il perché e sono un paio di giorni che ci sbatto la testa .
Sbaglio qualcosa nel codice? Avete suggerimenti su come poterlo risolvere?
Grazie a tutti per l'aiuto
- questo è il mio componente livewire che rappresenta il corpo della tabella
codice:<tbodyid="articoli_result"> @if (!empty($articoli)) @foreach ($articoli['data'] as $a) <trwire:click.prevent="clickArticoloTrigger({{$a['id']}})"onclick="toggleClass(this,'table-info')"> <td>@if(isset($a['codiceEntrata'])) {{ $a['codiceEntrata'] }} @else - @endif</td> <td>@if(isset($a['descrizioneArticolo'])) {{ $a['descrizioneArticolo'] }} @else - @endif</td> <td>@if(isset($a['progressivoArticolo'])) {{ $a['progressivoArticolo'] }} @else - @endif</td> <td>@if(isset($a['importoCarico'])) {{ $a['importoCarico'] }} @else - @endif €</td> <td>@if(isset($a['descrizioneArticolo'])) {{ $a['descrizioneArticolo'] }} @else - @endif</td> </tr> @endforeach @endif </tbody> @push('custom_scripts') <scripttype="text/javascript"> function toggleClass(el, className) { if (el.className.indexOf(className) >= 0) { el.className = el.className.replace(className,""); } else { el.className += className; } } </script> @endpush