[jQuery plugin] Tooltip con Toolbar.js > inserirne molti sulla stessa pagina

[azocomposto]

Ciao, ho giusto dato una sbirciata al file. Come immaginavo ti sfugge un principio fondamentale. Devi tenere sempre ben presente che gli "id", per gli elementi di un documento html, sono e devono essere sempre irrevocabilmente univoci.
Questo è sbagliato:

<div id="normal-button-bottom" class="settings-button">  ecc... </div>
<br><br>
<div id="normal-button-bottom" class="settings-button">  ecc... </div>

Non puoi avere lo stesso id su più elementi. Infatti JavaScript se ne accorge e ti fa una pernacchia, come è giusto che sia. Se applichi una qualsiasi cosa a "#normal-button-bottom" sarà preso in considerazione solo il primo elemento con quell'id.

Per questo motivo esistono le classi, che funzionano un po' come gli id ma possono essere assegnate indistintamente a qualsiasi elemento.

Sul tuo jQuery puoi quindi usare una cosa del genere:

$('.settings-button').toolbar({content: '#user-options', position: 'bottom'});

Ciao,
prima di tutto grazie per la risposta e semplicità di esposizione.
Immaginavo fosse quello il problema, perchè consultando altri jquery, l'id era differente per la natura stessa del jquery.

Ho modificato il jquery come da te indicato nella pagina esempio.html

            jQuery(document).ready(function($) {

                // Define any icon actions before calling the toolbar
                $('.toolbar-icons a').on('click', function( event ) {
                    event.preventDefault();
                });
                 $('.settings-button').toolbar({content: '#user-options', position: 'bottom'});
                $('#normal-button').toolbar({content: '#user-options', position: 'top'});
                $('#normal-button-bottom').toolbar({content: '#user-options', position: 'bottom'});
                $('#normal-button-small').toolbar({content: '#user-options-small', position: 'top', hideOnClick: true});
                $('#button-left').toolbar({content: '#user-options', position: 'left'});
                $('#button-right').toolbar({content: '#user-options', position: 'right'});
                $('#link-toolbar').toolbar({content: '#user-options', position: 'top' });
            });

Funziona perfettamente sulla pagina html.
Ora proverò a visualizzare i dati estraendo i records dal db e vediamo che succede.

Sei un figo

Grazie

[azocomposto]

Ciao,
prima di tutto grazie per la risposta e semplicità di esposizione.
Immaginavo fosse quello il problema, perchè consultando altri jquery, l'id era differente per la natura stessa del jquery.

Ho modificato il jquery come da te indicato nella pagina esempio.html

            jQuery(document).ready(function($) {

                // Define any icon actions before calling the toolbar
                $('.toolbar-icons a').on('click', function( event ) {
                    event.preventDefault();
                });
                 $('.settings-button').toolbar({content: '#user-options', position: 'bottom'});
                $('#normal-button').toolbar({content: '#user-options', position: 'top'});
                $('#normal-button-bottom').toolbar({content: '#user-options', position: 'bottom'});
                $('#normal-button-small').toolbar({content: '#user-options-small', position: 'top', hideOnClick: true});
                $('#button-left').toolbar({content: '#user-options', position: 'left'});
                $('#button-right').toolbar({content: '#user-options', position: 'right'});
                $('#link-toolbar').toolbar({content: '#user-options', position: 'top' });
            });

Funziona perfettamente sulla pagina html.
Ora proverò a visualizzare i dati estraendo i records dal db e vediamo che succede.

Sei un figo

Grazie

Ciao,
grazie al tuo suggerimento sono andato avanti, apportando qualche altra piccola variazione al codice. Ora però ho un piccolo problema, ovvero: la pagina utenti.php, mostra correttamente la lista di tutti gli utenti censiti a sistema, ed accanto allo username ho l'icona, che se cliccata mostra la toolbar con le opzioni. Il problema sta proprio sul link che si genera (gli passo una variabile recuperandola dalla query SQL), e cioè, tutti i link di tutti i pulsanti delle toolbar di ciascun utente, riportano sempre il primo id in cima alla lista.

Es:
row opzioni username
1 edit|delete|share marte
2 edit|delete|share saturno
3 edit|delete|share uranio

I link relativi a edit, delete, share dei record 2 e 3, hanno sempre lo stesso link estratto per la riga 1


Ho provato ad utilizzare il ciclo while del php ma non funziona, per cui credo che si debba intervenire sul jquery. Giusto?

Come posso modificare lo script affinchè venga estratto un id differente per ogni record?



Grazie