Contenuto generato e richiamo funzioni

MarcoGrazia

Utente Attivo
15 Dic 2009
852
20
28
62
Udine
www.stilisticamente.com
Buongiorno ho un problema da risolvere.
In una pagina ho una tabella dinamica generata da un form.
Funzona bene, ma devo poter editare le righe della tabella, dato che questa viene generatacon jquery append() ho pensato di cancellarla con detach() ma c'è un problema.

Il problema è che una volta creata la riga, il bottone che dovrebbe richiamare l'evento non lo trova in quanto non definito in origine.

Ora un po' di codice:

Spezzone di codice della tabella ed il pulsante che richiama la funzione in jquery/javascrit che genera la tabella
HTML:
 -------------------------------- SNIP ---------------------------------

                                <button tabindex="6" type="button" class="w3-button w3-green" id="inserisci-voce">
                                    <span class=" fa fa-list-ol" aria-hidden="true"></span>
                                    &nbsp;&nbsp;INSERISCI RIGA NEL MEN&Ugrave;
                                </button>

  -------------------------------- SNIP ---------------------------------

               <div class="w3-responsive">
                    <h3>Procura della Repubblica presso il Tribunale di Udine</h3>
                    <p>Fascicolo numero <strong id="numero-fascicolo"></strong></p>
                    <table class="w3-table w3-striped">
                        <thead>
                            <tr class="w3-black">
                                <th>&nbsp;</th>
                                <th>#</th>
                                <th>Voce</th>
                                <th class="w3-center">Da pagina</th>
                                <th class="w3-center">A pagina</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody id="mostra-indice"></tbody>
                        <tfoot>
                            <tr>
                                <td colspan="6">* se manca il numero, vuol dire che la voce è formata da una sola pagina.</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
in <tbody> vengono attaccate le righe generate dalla funzione sotto

Poi le due funzioni in javascript, la prima è una arrow che cancella la riga richamata, la seconda più complessa, prende i valori dal form e li mette nella tabella.
Genera anche i nuovi valori per i campi da pagina a a pagina per comodità di chi inserisce i valori.
JavaScript:
                //    Cancella una riga dalla tabella
                var deleteRiga = (identity) => {
                    var riga = '#riga-' + identity;
                    $( riga ).detach();
                };

                var index = 1;  //  Numero di riga per la tabella

                $('#inserisci-voce').click(function(){
                    
                    var voce = $('#voce');            //    Voce del menù
                    var dal = $('#dal-numero');        //    Primo numero di pagina
                    var al = $('#al-numero');        //    Ultimo numero di pagina
                    var primoNumero = dal.val();    //    Valore predefinito per il primo numero.
                    var secondoNumero = '*';        //    Valore predefinito per l'ultimo numero.
                    
                    var Fascicolo = '';
                    if ($('#numero').val() != '')
                        Fascicolo = $('#numero').val();
                    if ($('#anno').val() != '')
                        Fascicolo = Fascicolo + ' / ' + $('#anno').val();
                    if (Fascicolo != '')
                        $('#numero-fascicolo').text( '000' + Fascicolo );
                    
                    //    Inserisco i valori (se presenti) nei text box e aggiunge la riga alla tabella.
                    if (voce.val() != '' && dal.val() != '') {
                        //    Se c'è un ultimo numero, lo sostituisco ai tre trattini.
                        if (al.val() != '') secondoNumero = al.val();
                        
                        //    Crea la riga da stampare
                        var riga = '<tr id="riga-' + index + '"><td>&nbsp;</td>';
                        riga += '<td><p>' + index + '</p></td>';
                        riga += '<td><p contenteditable="true">' + voce.val() + '</p></td>';
                        riga += '<td class="w3-center"><p contenteditable="true">' + dal.val() + '</p></td>';
                        riga += '<td class="w3-center"><p contenteditable="true">' + secondoNumero + '</p></td>';
                        riga += '<td class="w3-center"><button type="button" class="w3-button w3-red noprint" title="Cancella la riga" onclick="deleteRiga(' + index + ')"><span class="fa fa-close noprint" aria-hidden="true"></span></button></td></tr>';
                        
                        $("#mostra-indice").append( riga );
                        
                        //    Aggiusta alcune cose
                        //    Abilita il tasto di stampa se c'è almeno una riga
                        $('#stampa').prop('disabled', false);
                        
                        //    Aggiusta i numeri in funzione della pagina precedente.
                        if (al.val() == '') {
                            //    Manca il numero della pagina finale.
                            primoNumero++;    //    Aggiungo + 1 al primo numero.
                            secondoNumero = '';
                        }
                        else {
                            //    C'è un valore per il secondo numero.
                            secondoNumero++;                    //    Aggiungo 1 all'ultimo numero.
                            primoNumero = secondoNumero;        //    il primo numero assume il valore del secondo + 1
                            secondoNumero = primoNumero + 1;    //    Aggiungo ancora 1 all'ultimo numero.
                        }
                        
                        //    Inserisco i valori nel text box dei numeri dal --> al
                        dal.val( primoNumero );     //    Inserisco il primo numero aumentato di 1
                        al.val( secondoNumero );    //    Inserisco il secondo numero se presente + 1 o niente.
                        
                        //    Torna su alla voce di menù per ricominciare a scriverne un'altra. (cancella la precedente!)
                        $('#voce').val( '' ).focus();
                        
                        index++;
                    }
                    else
                        //    Blocca il tasto di stampa se la tabella è vuota.
                        $('#stampa').prop('disabled', true);
                });

Ora come descritto su, il bottone generato alla fina di ogni riga, non vede la funzione di cancellazione deleteRiga() e non so come risolvere.
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
ho "messo insieme" le parti del tuo script e devo dire che funziona (MS EDGE), ho messo js dopo html della rabella

HTML:
    </table>
</div>

<script type='text/javascript' src='http://localhost/test_site/php/jquery.min.js'></script>

<script>
alert( 'sono qui !' );

                //    Cancella una riga dalla tabella

1663252982305.png

dopo un po' di inserisci / cancella
 

MarcoGrazia

Utente Attivo
15 Dic 2009
852
20
28
62
Udine
www.stilisticamente.com
A me non va, mi piacerebbe vedere il codice intero che hai inserito tu.
Io ti mando qui le schermate che ho appena eseguito con gli errori evidenziati.

Comunque seguendo il link inserito nella notifica di errore, ho modificato il modo di identificare la funzione e invece di definirla on un var ho provato a definirla come const, ma niente, mi da sempre lo stesso errore.

A questo punto vorrei capire cosa hai fatto esattamente tu.

Il tasto rosso con la X evidenziato dal cerchietto è il link generato dal javascript, quando lo premo mi dice che deleteRiga() non esiste e quindi genera l'errore riportato.

Firefox
firefox.png


Chrome
chrome.png
 

MarcoGrazia

Utente Attivo
15 Dic 2009
852
20
28
62
Udine
www.stilisticamente.com
Eureka! Funziona!

Prova e riprova, poi si accende la lucina.

Leggo questa frase nella pagina di MDN che ho linkato nel mio post precedente: "There is a non-existent variable referenced somewhere. This variable needs to be declared, or you need to make sure it is available in your current script or scope.", guardo il mio codice e capisco che la funzione lambda che ho creata non viene vista all'atto di leggere il codice della pagina da parte del motore di Javascript del browser, di qualsiasi browser, la sposto e tutto torna.

Un po' di spiegazioni o sembro più pazzo di quel che sono.

Nel mio codice quando uso jquery utilizzo sempre il controllo per vedere se è stato caricato tramite $( document ).ready(function(){}); che fa "funzionare" jquery solo dopo che il DOM è stato caricato.
Avendo inserita la lambda lì dentro, questa non veniva vista dal V8 del Javascript se non dopo aver caricata la pagina, cioè quando i giochi sono fatti e tutte le variabili dovevano essere già dichiarate, cioè prima che il DOM sia stato terminato e pronto per funzionare.
In pratica non esisteva.

Spostata fuori come nllo snippet qui sotto ha funzionato. :)

JavaScript:
<script>
            "use strict";
            
            //    Cancella una riga dalla tabella
            const deleteRiga = (identity) => {
                var riga = '#riga-' + identity;
                $( riga ).detach();
            };
                
            $( document ).ready( function()
            {

            });
</script>

Risolto.
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
ciao, avevo assemblato il codice così,

HTML:
-------------------------------- SNIP ---------------------------------
<br /><br />

<button tabindex="6" type="button" class="w3-button w3-green" id="inserisci-voce">
    <span class=" fa fa-list-ol" aria-hidden="true"></span>
    &nbsp;&nbsp;INSERISCI RIGA NEL MEN&Ugrave;
</button>
<br /><br />

-------------------------------- SNIP ---------------------------------
<br /><br />

<div class="w3-responsive">
    <h3>Procura della Repubblica presso il Tribunale di Udine</h3>
    <p>Fascicolo numero <strong id="numero-fascicolo"></strong></p>
    <table class="w3-table w3-striped">
        <thead>
            <tr class="w3-black">
                <th>&nbsp;</th>
                <th>#</th>
                <th>Voce</th>
                <th class="w3-center">Da pagina</th>
                <th class="w3-center">A pagina</th>
                <th>&nbsp;</th>
            </tr>
        </thead>

        <tbody id="mostra-indice">
        </tbody>

        <tfoot>
            <tr>
                <td colspan="6">* se manca il numero, vuol dire che la voce è formata da una sola pagina.</td>
            </tr>
        </tfoot>
    </table>
</div>

        <script type='text/javascript' src='http://localhost/test_site/php/jquery.min.js'></script>

<script>
alert( 'sono qui !' );

                //    Cancella una riga dalla tabella
                var deleteRiga = (identity) => {
                    var riga = '#riga-' + identity;
                    $( riga ).detach();
                };

                var index = 1;  //  Numero di riga per la tabella

                $('#inserisci-voce').click(function(){
                    
                    var voce = $('#voce');            //    Voce del menù
                    var dal = $('#dal-numero');        //    Primo numero di pagina
                    var al = $('#al-numero');        //    Ultimo numero di pagina
                    var primoNumero = dal.val();    //    Valore predefinito per il primo numero.
                    var secondoNumero = '*';        //    Valore predefinito per l'ultimo numero.
                    
                    var Fascicolo = '';
                    if ($('#numero').val() != '')
                        Fascicolo = $('#numero').val();
                    if ($('#anno').val() != '')
                        Fascicolo = Fascicolo + ' / ' + $('#anno').val();
                    if (Fascicolo != '')
                        $('#numero-fascicolo').text( '000' + Fascicolo );
                    
                    //    Inserisco i valori (se presenti) nei text box e aggiunge la riga alla tabella.
                    if (voce.val() != '' && dal.val() != '') {
                        //    Se c'è un ultimo numero, lo sostituisco ai tre trattini.
                        if (al.val() != '') secondoNumero = al.val();
                        
                        //    Crea la riga da stampare
                        var riga = '<tr id="riga-' + index + '"><td>&nbsp;</td>';
                        riga += '<td><p>' + index + '</p></td>';
                        riga += '<td><p contenteditable="true">' + voce.val() + '</p></td>';
                        riga += '<td class="w3-center"><p contenteditable="true">' + dal.val() + '</p></td>';
                        riga += '<td class="w3-center"><p contenteditable="true">' + secondoNumero + '</p></td>';
                        riga += '<td class="w3-center"><button type="button" class="w3-button w3-red noprint" title="Cancella la riga" onclick="deleteRiga(' + index + ')"><span class="fa fa-close noprint" aria-hidden="true"></span></button></td></tr>';
                        
                        $("#mostra-indice").append( riga );
                        
                        //    Aggiusta alcune cose
                        //    Abilita il tasto di stampa se c'è almeno una riga
                        $('#stampa').prop('disabled', false);
                        
                        //    Aggiusta i numeri in funzione della pagina precedente.
                        if (al.val() == '') {
                            //    Manca il numero della pagina finale.
                            primoNumero++;    //    Aggiungo + 1 al primo numero.
                            secondoNumero = '';
                        }
                        else {
                            //    C'è un valore per il secondo numero.
                            secondoNumero++;                    //    Aggiungo 1 all'ultimo numero.
                            primoNumero = secondoNumero;        //    il primo numero assume il valore del secondo + 1
                            secondoNumero = primoNumero + 1;    //    Aggiungo ancora 1 all'ultimo numero.
                        }
                        
                        //    Inserisco i valori nel text box dei numeri dal --> al
                        dal.val( primoNumero );     //    Inserisco il primo numero aumentato di 1
                        al.val( secondoNumero );    //    Inserisco il secondo numero se presente + 1 o niente.
                        
                        //    Torna su alla voce di menù per ricominciare a scriverne un'altra. (cancella la precedente!)
                        $('#voce').val( '' ).focus();
                        
                        index++;
                    }
                    else
                        //    Blocca il tasto di stampa se la tabella è vuota.
                        $('#stampa').prop('disabled', true);
                });
</script>
 
Discussioni simili
Autore Titolo Forum Risposte Data
D protezione cartelle: blocco visualizzazione/scaricamento contenuto, ma abilitazione utilizzo dati da parte di file .php presenti sul sito Web Server 1
G leggere file txt e stampare con php il contenuto a video PHP 7
Cosina mostrare contenuto da file txt PHP 2
P Passare contenuto in value. Ajax 1
I eliminazione cartella e contenuto PHP 1
A fread non legge il contenuto del file PHP 4
K contenuto javascript scompare inspiegabilmente Javascript 2
M [PHP] Logica esatta sul mostrare contenuto se inattivo con Codeigniter PHP 2
G Pec come leggere il contenuto Posta Elettronica 1
axem [PHP]rendere cliccabile contenuto PHP 10
W Contenuto duplicato su più siti web, quanto è permesso? SEO e Posizionamento 1
E assegnare a una variabile il contenuto di un url (javascript) Javascript 0
M Leggere il contenuto di una cartella e memorizzare il nome file in mysql PHP 1
trattorino [PHP] sql aggiungere dato in una tabella senza cancellare contenuto PHP 6
usura18 [PHP] Perdita contenuto cookie al reload della pagina PHP 6
G [Javascript] Reperire un contenuto con Tampermonkey Javascript 2
C [PHP] Esecuzione comando contenuto in stringa PHP 2
A [Javascript] modificare il contenuto della barra indirizzi di un browser Javascript 1
M Salvataggio contenuto console javascritp in file di testo Presentati al Forum 0
M [Javascript] Visualizza contenuto file XML aggiornato con text scroll Javascript 0
L Aggiungere contenuto con ajax durante lo scroll jQuery 1
C [HTML] Stampo contenuto di una variabile in TEXTAREA allineamento HTML e CSS 1
O Visualizzazione singolo contenuto con php PHP 7
utente è possibile creare una pagina php che copia interamente il contenuto di un'altra pagina ? PHP 10
L [HTML] Adattare bordo al contenuto HTML e CSS 4
F PHP cambio contenuto PHP 4
trattorino [PHP] prendere contenuto dentro un div PHP 3
trattorino [PHP] Prelevare contenuto PHP 1
F [Javascript] Inserire il contenuto di una pagina in un Div Javascript 2
9 inserire contenuto in un file pdf aperto sul browser tramite script php PHP 0
F [Javascript] Div ed iframe che adatta altezza in base al contenuto Javascript 1
S PHP: inviare via email contenuto di una funzione PHP 4
Phyro modificarne il contenuto e alla fine scaricare il file .txtl HTML e CSS 1
F [HTML] Scalare un div ma non il suo contenuto HTML e CSS 1
gandalf1959 Variazione di un campo input in base al contenuto di un altro campo input inserito dall'utente Ajax 4
A caricare file PHP con Load cambiandone parte del contenuto jQuery 1
felino [VbScript] SwfObject: prendere il contenuto di una cella Visual Basic 0
A Ottimizzazione SEO per sito ricco di immagini (e poco contenuto testuale) SEO e Posizionamento 4
JackIlPazzo Scraping contenuto menu e relativi data-value? PHP 19
P Problema: come memorizzare il contenuto visualizzato di un dvd PHP 6
M Cambiare dinamicamente il contenuto di un DIV Javascript 4
M Comparare se un campo testuale è contenuto in un altro in una query MySQL 0
P Non riesco a capire dove sta l'errore e perchè non mi memorizza il contenuto PHP 14
M ordinamento array file txt in base al contenuto PHP 1
M Mostrare il contenuto del database e convertire la data da timestamp PHP 2
D mostrare contenuto caricato dinamicamente da database PHP 12
G Stesso dominio, 3 estensioni diverse, stesso contenuto Hosting 2
Devil-94 Recuperare contenuto div Ajax 5
L problema aside quando il contenuto e vuoto HTML e CSS 1
L sostituzione contenuto diversi div con document.getelementbyid Javascript 1

Discussioni simili