jQuery UI Tooltip Problem

[tolio]

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:

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

   $(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

[Muddy Waters]

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:

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 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.

[tolio]

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

[Muddy Waters]

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.

[tolio]

Ich nutze jQuery.ajax() das sollte eigendlich async sein.
folgendes habe ich mir zusammengebastelt:
Hoffentlich bekommste davon kein Augenkrebs, bin der totale js noob ^^

[Muddy Waters]

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 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:
  

  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).

[tolio]

^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...

[Muddy Waters]

Hast du dazu ein möglichst vollständiges Codebeispiel? Dann würde ich es mir bei Gelegenheit mal anschauen.

[tolio]

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