jQuery UI Tooltip Problem

09/27/2013 03:19 tolio#1

So ich habe eine Script-Design Problem und habe zu wenig erfahrung in JS ums zu l�sen.

Also ich habe einen Ajax Chat auf meiner Seite und will beim Hover �ber den User Informationen in einem Tooltip anzeigen, das ganze �ber den jQuery UI Tooltip. Das zu habe ein ein kleines System geschrieben was die informationen �ber jQuery l�dt wenn diese noch nicht vorhanden sind und dann anschlie�end bereith�lt, das funktioniert auch soweit.

Nun habe ich aber das Problem das der Code den ich mir dazu gebastelt habe nach einer gewissen Zeit nicht mehr funktioniert. dh. manchmal wird der Tooltip nach 5mal hover nicht mehr anzeigt anderes mal nach 20mal etc. Das ganze ohne Fehler.
Das einzige was ich zu diesem Verhalten gefunden habe ist dieses aber die dortige L�sung ist bei unangebracht: [Only registered and activated users can see links. Click Here To Register...]

So mein Ansatz war das vllt das Problem sein k�nnte das jedesmal ein neuer Tooltip erstellt wird, da bin ich mir aber nicht sicher weil ich mich mit der materie zu wenig auskenne.

Also deswegen die Frage, hat da jemand ne idee wie ich das ganze umdesignen kann damit das zuverl�ssig funktioniert?

Hier noch mein Code

Code:

   $(function () {
      $('a[href*="profile.php"]').hover(
         function() {
            //Abfrage ob die infos �ber diese id schon vorhanden sind wenn ja zur�ckgeben wenn nein per ajax laden und zur�ckgeben
            var ret = profBase.request($(this).attr("href").split("id=")[1]);
            if (typeof ret == "object") {
               $(this).tooltip({content: "name: " + ret.name + " id: " + ret.id + "<img id=\"theImg\" src=\"/img/51f3c5af635b3_tn.jpg\" />"});
            }else{
               $(this).tooltip({content: "failed"});
            }
         },
         function() {
            $(this).tooltip( "close" );
         }
      );   
   });

�ber jegliche antworten, anregungen, links etc freu ich mich weil mir echt die ideen ausgehen bin auch �ber skype erreichbar, rechts auf das icon ding klicken.

Schonmal danke im vorraus
MfG
tolio

09/27/2013 14:11 Muddy Waters#2

An sich erstellst du solche Tooltips nicht in nem Hover-Handler, du verwendest jQuery UI ja gerade, um dir solche Details abzunehmen.

Ich hab dir mal eben ein Beispiel erstellt: [Only registered and activated users can see links. Click Here To Register...]

Dort wird der Tooltip-Inhalt asynchron geladen und gecached, wobei ich hier zu demonstrationszwecken window.setTimeout() verwendet habe.

Ich wei� nicht genau, was du dort in Sachen Tooltips geplant hast, aber wenn es richtig komplex werden soll, w�rde ich dir raten, dir mal [Only registered and activated users can see links. Click Here To Register...] anzuschauen - es handelt sich dabei um ein zus�tzliches jQuery Plugin f�r Tooltips, wobei du dort noch weitaus mehr M�glichkeiten hast, als das bei den standard Tooltips mit jQuery UI der Fall ist. Das Plugin unterst�tzt dar�ber hinaus jQuery UI Themes, ist also durchaus auch zur Verwendung mit jQuery UI vorgesehen.

09/27/2013 15:21 tolio#3

Ah nice danke, �ber den items selector das zu machen war genau der Zwischenschritt der noch gefehlt hat. Und nat�rlich hab ich auch nicht dran gedacht das caching mit nem key array zu machen. Also nochmal danke f�r das Bsp, ich w�rd ja mehrmals auf Thanks dr�cken wenns gehen w�rde ;)

09/27/2013 15:52 Muddy Waters#4

Wobei du das mit dem Caching auch anders l�sen k�nntest, z.B. via jQuery.data() - im Endeffekt brauchst du nur eine Br�cke zwischen dem Element, das den Tooltip erhalten soll und den anzuzeigenden Daten. Ich hatte das im Beispiel nun nur so gew�hlt, weil ich mir nicht sicher war, was deine request-Methode genau macht - sah f�r mich so ein bisschen nach einem synchronen AJAX-Request aus und das solltest du nach M�glichkeit immer vermeiden, zumal es in diesem Fall auch absolut nicht notwendig ist.

09/27/2013 16:25 tolio#5

Ich nutze jQuery.ajax() das sollte eigendlich async sein.
folgendes habe ich mir zusammengebastelt: [Only registered and activated users can see links. Click Here To Register...]
Hoffentlich bekommste davon kein Augenkrebs, bin der totale js noob ^^

09/28/2013 12:37 Muddy Waters#6

Du setzt es dort allerdings so ein, als w�re der Aufruf synchron, was allerdings nicht der Fall ist. F�r den Fall, dass du die Daten nicht von einem �lteren Aufruf gecached hast (wobei ich dein Caching Konzept etwas umst�ndlich finde), gibt deine request-Methode n�mlich undefined zur�ck- in dem Fall w�rde angezeigt, dass ein Fehler aufgetreten ist, was aber sehr wahrscheinlich gar nicht der Fall ist. Das wirkt so ein bisschen unbeholfen, hier solltest du das ganze besser sauber asynchron l�sen, sprich mit callback-Funktionen arbeiten. Du musst einplanen, dass Daten nicht unmittelbar zur Verf�gung stehen, sondern erst nach einer gewissen Zeit x. Man deutet das gerne durch das anzeigen irgendwelcher kleinen Ladebildchen � la [Only registered and activated users can see links. Click Here To Register...] an - nachdem der Inhalt dann verf�gbar ist, werden jene schlichtweg durch diesen ersetzt.

Noch ein paar generelle Anmerkungen:

Einen JSON-String mit eval() zu verarzten ist extrem unsauber - entweder du machst es selbst sauber, indem du JSON.parse() auf den JSON-String anwendest, oder aber du l�sst es einfach direkt von jQuery erledigen, indem du die dataType Option beim Aufruf der ajax-Methode auf 'json' setzt - so erh�ltst du im zugeh�rigen callback direkt ein Objekt.
Verwende statt new Date().getTime() lieber die statische Methode Date.now().
jQuery hat eine ziemlich n�tzliche Methode namens jQuery.each(), womit du recht bequem �ber alle aufz�hlbaren Member eines Objekts oder Arrays iterieren kannst, wobei f�r jedes Element eine callback-Funktion aufgerufen wird:
Code:
```
var someObject = {
	prop1: 42,
	prop2: 43
};

$.each(someObject, function(key, val)
{
	// Do somethin... (this == val == someObject[key])
});
```
Solltest du dir vielleicht mal anschauen, finde ich pers�nlich extrem bequem. Du musst dabei eigentlich nur beachten, dass this in der callback-Funktion immer auf das jeweilige Element zeigt (wenn du also this aus der �bergeordneten Funktion brauchst, musst du dir eine closure-Variable anlegen).

09/29/2013 02:12 tolio#7

^das nehme ich mir nat�rlich auch zu Herzen jedoch habe ich jetzt schon wieder ein Problem und zwar den tooltip code so zu ver�ndern wie es in deinem Beispiel war.
Es scheint als w�rde entweder der document oder der items selector nicht zu klappen. denn selbst wenn ich deinen code komplett �bernehme passiert einfach gar nichts. Es gibt auch weder beim laden noch beim eigendlichen hover nen Fehler. Sehr merkw�rdig weil bei jsfiddle klappts ja. Ich habe mal den document selector ge�ndert, also direkt die betreffenden elemente rein gemacht und dann beim tooltip den items parameter weggelassen. Dann l�st es zwar aus, aber ich bekomme mit $(this) das parent div und nicht den eigendlichen link.
Jetzt bin ich sehr verwirrt und ratlos...

09/29/2013 17:12 Muddy Waters#8

Hast du dazu ein m�glichst vollst�ndiges Codebeispiel? Dann w�rde ich es mir bei Gelegenheit mal anschauen. :)

10/01/2013 00:57 tolio#9

oh man ich hatte in den sonst quasi leeren html dokument noch nen (document).tooltip drin und das hats dann nat�rlich �berschrieben weils unter den verweisen zu den js dateien steht, das passiert wenn man an projekten weitermacht die ewig alt sind ^^

naja danke f�r deine hilfe soweit wenns nochmal was gibt pushe ich hier wenns dazu passt