[jQuery] Callback na .click()

[StephanVierkant]

Ik heb de volgende code:

HTML:

<acronym class="info" title="123">Klik voor meer informatie</acronym>

Vervolgens wil ik bij een mouse-over een popupje laten zien met tooltip():

JavaScript:

$('.inkoopfactuur').tooltip(
{
    content: function(response)
    {
        $.get("tooltip/?id=" + $(this).attr("title"), response);
    }
});

Dat werkt prima. De tooltip opent 'tooltip/?id=123' en er komt dus de goede informatie. Nu wil ik behalve een mouseover ook een click() toevoegen. In dat geval wil ik een jQuery UI Dialog openen met meer informatie over onderwerp '123 .

Ik doe dus:

JavaScript:

$('.inkoopfactuur').bind('click', function()
{
    $( "#dialog" ).load('/finance/crediteuren/dialog_copy/' + $(this).attr('title')).dialog(
    {
        title: 'Informatie over #' + $(this).attr('title')
    });
});

Nu opent de dialog wel, maar hij neemt het attribuut 'title' dit keer niet mee. Als ik met Firebug de console gebruik (console.log(this);), krijgt ik dit: <acronym class="info" title="">. Op één of andere manier verdwijnt de waarde van title dus. Ook als ik console.log($(this)); gebruik, krijg ik de waarde nergens te zien.

Kan iemand me helpen met uitzoeken waar die waarde ineens blijft?

Edit:
Verander ik <acronym> door <img> en 'title' naar 'alt', werkt het tot mijn grote verbazing wel, maar werkt de tooltip niet meer.

[ Voor 5% gewijzigd door StephanVierkant op 02-02-2011 23:38 ]

[R4gnax]

De acronym tag is bedoeld voor acroniemen (afkortingen gevormd door de eerste letters v/d afgekorte woorden te nemen). Dat moet je niet misbruiken voor dingen die dat niet zijn!

Het title attribuut v/d tag verdwijnt omdat je op diezelfde tag ook het ui.tooltip widget gebruikt. Deze voegt een rich HTML tooltip toe en zet normale tooltips afkomstig van een mogelijk title attribuut uit door het title attribuut weg te halen.

Wat jij hier in het title attribuut opslaat is feitelijk een referentie naar een uniek ID voor een bepaald object op de server. Dit soort zaken steek je liefst niet in een title attribuut, maar in een custom HTML5 data attribuut. (Iets als data-contentguid, bijvoorbeeld.) Het is daarnaast (zeker voor gevoeliger zaken als facturering) niet slim om een zuiver (en naar alle waarschijnlijkheid incrementeel) ID aan de client bekend te maken. Gebruik daarvoor tenminste een non-incrementele guid.

Er is nog een ander problemen met je huidige implementatie, wat je mogelijk nog niet gezien hebt: je open de ui.dialog widget al voordat $.fn.load klaar is de content op te halen. Dat houdt in dat het dialoog venster uiteindelijk fout gecentreerd kan verschijnen (omdat tijdens het positioneren nog van verkeerde maten gebruik gemaakt zou kunnen worden).

Ik snap trouwens echt de complexiteit van je gekozen oplossing niet. Wat is er mis met een gewone anchor tag met een URL er al in en de korte tooltip tekst gewoon al meteen in het title attribuut te zetten? Voor een simpele tooltip gaat een gebruiker niet seconden lang op een AJAX request wachten en voor de dialog content kun je het hele href attribuut pakken en zo $.fn.load in duwen. Bijkomend voordeel is dat gebruikers zonder javascript ook niet gedupeerd worden.

[Bosmonster]

Symptoombestrijdingsoplossing:

Voordat je de tooltips koppels, schrijf eerst de titles even weg naar je element-data en gebruik het van daaraf. De tooltip-plugin leegt namelijk je title, zodat je geen dubbele tooltip krijgt.

Goede oplossing:

Gebruik een anchor (a) naar je popup-content en herschrijf dit naar een UI dialog. Dan werkt het tenminste ook nog zonder javascript en wordt het geindexeerd door zoekmachines.

De tooltips zelf direct in de title zetten, wederom vanuit accessibility en SEO oogpunt. Een ID heeft niemand wat aan.

samengevat: progressive enhancement.