Klaus: Aufruf funktioniert nicht

Hallo,

Ich möchte meinen Tooltip um eine übergebene ID bereichern. Die kommt auch im JS-Teil an (Kontrolle über alert).
Auch der Tooltip funktioniert für sich alleine.

Aber ID und Tooltip zusammen funktioniert nicht. Die ID lkommt immer noch an, aber der Tooltip wird nicht ausgeführt und ich verstehe nicht, warum.

Die JS-Fehlerkonsole gibt mir leider keinen Hinweis, warum nicht.

Kann mir jemand helfen?

  
// Nummer des Datensazues ermitteln:  
$('.demo-callback').mouseover(function() {  
var ausloeser = $( this ).attr( 'id' );  
//alert(ausloeser);  
  
	$(this).tooltipster({  
		content: 'Loading...',  
		updateAnimation: false,  
		functionBefore: function(origin, continueTooltip) {  
			continueTooltip();  
			  
			 if (origin.data('ajax') !== 'cached') {  
				  
            $.ajax({  
                type: 'GET',  
                url: 'test.php',  
		data: 'test',  
                success: function(data) {  
                    // update our tooltip content with our returned data and cache it  
                    origin.tooltipster('content', data).data('ajax', 'cached');  
                }  
            });  
			}  
		},  
		functionAfter: function(origin) {  
			//alert('The tooltip has closed!');  
		}  
		});  
	});  
});  
</script>  
</head>  
<body>  
<br><br>  
<a href='#' class="demo-callback" id="blj9876" title="This will be populated by AJAX.">Hover</a>  
  

Klaus

  1. Ich möchte meinen Tooltip um eine übergebene ID bereichern. Die kommt auch im JS-Teil an (Kontrolle über alert).

    Das Du eine ID ausliest und per alert ausgiebst(besser per console.log), ist aus dem Code noch ersichtlich. Der Rest weniger... Lt. Google scheinst Du also ein jQuery-Plugin namens tooltipster zu verwenden?!

    Auch der Tooltip funktioniert für sich alleine.

    Spitze! Aber der passende Code dazu wird sich deutlich von dem gepostetem unterscheiden, oder?

    Aber ID und Tooltip zusammen funktioniert nicht. Die ID lkommt immer noch an, aber der Tooltip wird nicht ausgeführt und ich verstehe nicht, warum.

    Wenn Du dem HTML-Element also keine ID verpasst, klappt es? Oder wie? Die Problembeschreibung ist mir nicht ganz schlüssig, insb. da hier ein mir bislang nicht bekanntes jQuery-Plugin am Start ist.

    Versuche das Problem mal bitte etwas genauer zu skizzieren, bestenfalls mit einen Onlinebeispiel "Version 1 klappt, Version 2 klappt nicht".

    Die JS-Fehlerkonsole gibt mir leider keinen Hinweis, warum nicht.

    Das kann schon an der jQuery eigenen Magie scheitern: wenn ein Selektor nichts hervorbringt, läuft der Methodenaufruf ins Leere...

    Kann mir jemand helfen?

    Mit mehr und besserem Futter: bestimmt.

    1. Hallo,

      Auch der Tooltip funktioniert für sich alleine.

      Spitze! Aber der passende Code dazu wird sich deutlich von dem gepostetem unterscheiden, oder?

      Was bedeutet "deutlich"? Wenn ein Code klappt und einer nicht, dann ist das schon deutlich. Ein z.b. fehlendes Semikolon würde das verhindern, aber ist dann der Code auch noch "deutlich" unterschiedlich? ;)

      Wenn Du dem HTML-Element also keine ID verpasst, klappt es? Oder wie? Die Problembeschreibung ist mir nicht ganz schlüssig, insb. da hier ein mir bislang nicht bekanntes jQuery-Plugin am Start ist.

      Ich habe die letzten 2 Tage ewig nach einem Tooltip gesucht, der das umsetzen kann, was ich benötige. Ich hatte den Eindruck, "tooltipster" wäre eher eines der bekannteren Tools. Darauf hätte ich schon gerne Wert gelegt.

      Versuche das Problem mal bitte etwas genauer zu skizzieren, bestenfalls mit einen Onlinebeispiel "Version 1 klappt, Version 2 klappt nicht".

      Ich poste mal den "funktionierenden" Code:

        
      	$('.demo-callback').tooltipster({  
      	    maxWidth: 600,  
      		position: 'top-right',  
      		speed: 500,  
      		content: 'Loading...',  
      		updateAnimation: false,  
      		functionBefore: function(origin, continueTooltip) {  
      			continueTooltip();  
      			  
      			 if (origin.data('ajax') !== 'cached') {  
      				  
                  $.ajax({  
                      type: 'GET',  
                      url: 'bbb.php',  
      				data: 'test',  
                      success: function(data) {  
                          // update our tooltip content with our returned data and cache it  
                          origin.tooltipster('content', data).data('ajax', 'cached');  
                      }  
                  });  
      			}  
      		},  
      		functionAfter: function(origin) {  
      			//alert('The tooltip has closed!');  
      		}  
      		});  
      //	});  
      });  
      </script>  
      </head>  
      <body>  
        
      		  
      <br><br><br><br>  
        
      <a href='#' class="demo-callback" id="blj9876" title="This will be populated by AJAX.">Hover</a>  
        
      
      

      Dieser Code generiert einen Tooltip, der per Ajax das Script bbb.php läd.

      Da ich den Tooltip gerne in einer Tabelle mit Werten einsetzen würde, müsste ich dem Script per GET oder POST eine ID übergeben, den "Rest" würde dann das bbb-script selber übernehmen.

      Klaus

      1. Mahlzeit,

        Was bedeutet "deutlich"? Wenn ein Code klappt und einer nicht, dann ist das schon deutlich. Ein z.b. fehlendes Semikolon würde das verhindern, aber ist dann der Code auch noch "deutlich" unterschiedlich? ;)

        Das ist doch deutlich. Der Unterschied ist 100% und zwar von "funktioniert" nach "funktioniert nicht".
        Noch deutlicher gehts gar nicht.

        --
        42
      2. Was bedeutet "deutlich"? Wenn ein Code klappt und einer nicht, dann ist das schon deutlich. Ein z.b. fehlendes Semikolon würde das verhindern, aber ist dann der Code auch noch "deutlich" unterschiedlich? ;)

        In diesem Fall bedeutet "deutlich" schon einiges mehr als ein Semikolon. Du hast als Unterschied einzig von einer "id" gesprochen, tatsächlich finden sich in Deinem Beispiel hier zu Deinem OP noch mehr Unterschiede - insbesondere, dass Du im OP Dein tippster-Ding in einem jQuery mouseover-callback aufrufst (darin wird womöglich auch des Rätsels Lösung liegen). Kurzum: unzureichende Fehlerbeschreibung.

        Ich habe die letzten 2 Tage ewig nach einem Tooltip gesucht, der das umsetzen kann, was ich benötige. Ich hatte den Eindruck, "tooltipster" wäre eher eines der bekannteren Tools. Darauf hätte ich schon gerne Wert gelegt.

        Alles schön und gut, aber diese essentielle Information hast Du nicht erwähnt, bzw. nur implizit durch den Code. Das senkt Deine Chancen auf kostenlose Hilfe in einem Forum drastisch.

        Unter JavaScript zu posten und jQuery vorauszusetzen, ist IMHO noch vertretbar. Aber jedwelche jQuery-Plugins...?

        Möglichkeiten:

        1. Du hast Glück und jemand hier kennt das Ding und kann Dir die Lösung sagen. Viel Glück!
        2. Du bezahlst/kennst jemand für die Analyse und Lösung des Problems. Da wird sich hier im Forum bestimmt jemand finden.
        3. Du identifizierst und behebst das eigentliche Problem selbst.

        Mein Tipp lautet, wie schon erwähnt: Tippsterdings gefällt die Initialisierung auf mouseover nicht. Womöglich bietet Dir die API von dem Ding eine Alternative.

        Dieser Code generiert einen Tooltip, der per Ajax das Script bbb.php läd.
        Da ich den Tooltip gerne in einer Tabelle mit Werten einsetzen würde, müsste ich dem Script per GET oder POST eine ID übergeben, den "Rest" würde dann das bbb-script selber übernehmen.

        Supi, aber das scheint offensichtlich nichts mit dem Problem zu tun zu haben, da lt. Dir obiges Beispiel ja funktioniert.

        1. Hallo,

          Alles schön und gut, aber diese essentielle Information hast Du nicht erwähnt, bzw. nur implizit durch den Code. Das senkt Deine Chancen auf kostenlose Hilfe in einem Forum drastisch.

          Ok. Vermutlich hast Du ganz Recht.

          Unter JavaScript zu posten und jQuery vorauszusetzen, ist IMHO noch vertretbar. Aber jedwelche jQuery-Plugins...?

          Ja, das sehe ich ein.

          Möglichkeiten:

          1. 2.  3. Du identifizierst und behebst das eigentliche Problem selbst.

          4. Ich stelle das Problem hinten an und/oder wechsel das Plugin. "Tippsterdings" gefällt mir prinzipiell schlechter als z.b. cluetip.

          Aber vielleicht kann ich hier trotzdem etwas lernen:

          Ausgehend von Claus' Frage, wie kann ich prüfen, was in $(this) drin steht?

            
          $('.demo-callback').mouseover(function() {  
          var ausloeser = $( this ).attr( 'id' );  
            
          $(this).tooltipster({  
          
          

          Ich war der Meinung, daß durch den mouseover-event nun ".demo-callback" das Objekt sei, worauf ich über $(this) zugreifen müsste.(?)

          Klaus

          1. Ausgehend von Claus' Frage, wie kann ich prüfen, was in $(this) drin steht?

            $('.demo-callback').mouseover(function() {
            var ausloeser = $( this ).attr( 'id' );

            $(this).tooltipster({

            
            >   
            > Ich war der Meinung, daß durch den mouseover-event nun ".demo-callback" das Objekt sei, worauf ich über $(this) zugreifen müsste.(?)  
              
            ".demo-callback" ist kein Objekt, lediglich ein String, den du jQuery mitgibst, um zu sagen: melde Dich bitte in der von mir übergebenen Callbackfunktion, sobald ein mouseover bei einem Element eintritt, auf den mein Selektor passt(".demo-callback" bedeutet für jQuery "alle HTML Elemente,d ie die Klasse "demo-callback" haben).  
              
            Sobald Du dann in der Funktion landest zeigt "this" auf das betroffene DOM-Element. Wenn Du dann ein $() um das this pakst, hast Du einen jQuery Objekt auf this. Da jQuery aber immer "beliebig viele" Treffer haben kann, erhältst Du einen Array. Das kannst Du z.B. via $(this).get(0) umkehren. So richtig sinnvoll  ist das aber nicht.  
              
              
            
            
            1. Hallo,

              Sobald Du dann in der Funktion landest zeigt "this" auf das betroffene DOM-Element. Wenn Du dann ein $() um das this pakst, hast Du einen jQuery Objekt auf this. Da jQuery aber immer "beliebig viele" Treffer haben kann, erhältst Du einen Array. Das kannst Du z.B. via $(this).get(0) umkehren. So richtig sinnvoll  ist das aber nicht.

              Und wenn der Selektor ein ID-Selektor gewesen wäre?

              Wäre dann in this nur 1 Treffer gewesen?

              Oder wäre auch dieser GTreffer in einem Array gewesen?

              Gruß, Klaus

              1. Und wenn der Selektor ein ID-Selektor gewesen wäre?
                Wäre dann in this nur 1 Treffer gewesen?
                Oder wäre auch dieser GTreffer in einem Array gewesen?

                In dem obigen Beispiel zeigt this bereits ein auf Element. Durch die jQuery-Verwurstung erhältst Du ein magisches jQuery-Objekt, was intern auf "0 bis undentlich viele" Dinge verweisen kann.

                1. @@Mitleser:

                  nuqneH

                  Und wenn der Selektor ein ID-Selektor gewesen wäre?
                  Wäre dann in this nur 1 Treffer gewesen?
                  Oder wäre auch dieser GTreffer in einem Array gewesen?

                  In einem Objekt. [link:http://api.jquery.com/jQuery/@title=$()] gibt ein jQuery-Objekt zurück.

                  In dem obigen Beispiel zeigt this bereits ein auf Element. Durch die jQuery-Verwurstung erhältst Du ein magisches jQuery-Objekt, was intern auf "0 bis undentlich viele" Dinge verweisen kann.

                  Aber nicht bei ID-Selektoren:

                  [code lang=html]<div class="multiple"></div>  
                  <div class="multiple"></div>
                  

                  console.log($('.multiple').length); // 2[/code]

                  (fehlerhaftes HTML, aber das ist hier nicht der Punkt)

                  [code lang=html]<div id="multiple"></div>  
                  <div id="multiple"></div>
                  

                  console.log($('#multiple').length); // 1[/code]

                  Qapla'

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                  1. In dem obigen Beispiel zeigt this bereits ein auf Element. Durch die jQuery-Verwurstung erhältst Du ein magisches jQuery-Objekt, was intern auf "0 bis undentlich viele" Dinge verweisen kann.

                    Aber nicht bei ID-Selektoren:
                    (fehlerhaftes HTML, aber das ist hier nicht der Punkt)

                    [code lang=html]<div id="multiple"></div>

                    <div id="multiple"></div>

                    
                    >   
                    > console.log($('#multiple').length); // 1  
                      
                    Interessant - ich hätte hier (trotz des fehlerhaften HTML) auf eine 2 getippt. OK, für ID-Selektoren dann 0..1. Ist IMHO aber höchstens akademisch von Belang. 
                    
                    1. @@Mitleser:

                      nuqneH

                      [code lang=html]<div id="multiple"></div>

                      <div id="multiple"></div>

                      
                      > >   
                      > > console.log($('#multiple').length); // 1  
                        
                      Was mach denn die Forumsoftware hier aus den (verschachtelten) Code-Blöcken?  
                        
                        
                      
                      > Interessant - ich hätte hier (trotz des fehlerhaften HTML) auf eine 2 getippt.  
                        
                      Man könnte jetzt im Quelltext von jQuery nachschauen, ob bei `$(#…)`{:.language-javascript} intern `document.getElementById()`{:.language-javascript} aufgerufen wird.  
                        
                      Interessant ist auch, dass bei nativem JavaScript  
                      ~~~javascript
                      console.log(document.querySelectorAll('#multiple').length); // 2  
                      
                      

                      alle Elemente mit dieser ID gelistet werden.

                      OK, für ID-Selektoren dann 0..1. Ist IMHO aber höchstens akademisch von Belang.

                      Natürlich sollte man IDs nur einmalig vergeben. Schön wär’s, wenn sich das schon rumgesprochen hätte.

                      Qapla'

                      --
                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                      1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

                        [code lang=html]<div id="multiple"></div>

                        <div id="multiple"></div>

                        
                        > > >   
                        > > > console.log($('#multiple').length); // 1  
                        > […]  
                        > > Interessant - ich hätte hier (trotz des fehlerhaften HTML) auf eine 2 getippt.  
                        >   
                        > Man könnte jetzt im Quelltext von jQuery nachschauen, ob bei `$(#…)`{:.language-javascript} intern `document.getElementById()`{:.language-javascript} aufgerufen wird.  
                        >   
                        > Interessant ist auch, dass bei nativem JavaScript  
                        > ~~~javascript
                        
                        console.log(document.querySelectorAll('#multiple').length); // 2  
                        
                        > 
                        
                        

                        Was mach denn die Forumsoftware hier aus den (verschachtelten) Code-Blöcken?

                        console.log($('[cоde]').length); // 5  
                        console.log($('[/cоde]').length); // 4
                        

                        Es war die Nachtigall und nicht die Lerche ;-)

                        Matthias

                        --
                        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen äh und ähnlich.

  2. Aber ID und Tooltip zusammen funktioniert nicht. Die ID lkommt immer noch an, aber der Tooltip wird nicht ausgeführt und ich verstehe nicht, warum.

    $('.demo-callback').mouseover(function() {
    var ausloeser = $( this ).attr( 'id' );

    Hier liest du die ID aus. So weit, so gut …

    $(this).tooltipster({
    content: 'Loading...',
    updateAnimation: false,
    functionBefore: function(origin, continueTooltip) {
    continueTooltip();

      	 if (origin.data('ajax') !== 'cached') {  
    

    $.ajax({
                    type: 'GET',
                    url: 'test.php',
    data: 'test',
                    success: function(data) {
                        // update our tooltip content with our returned data and cache it
                        origin.tooltipster('content', data).data('ajax', 'cached');
                    }
                });
    }
    },

    … aber ich sehe in diesem Code nirgends eine Stelle, wo du ausloeser dem tooltipster-Dingens übergibst. Insofern scheint der Code nicht zu deinem Problem zu passen, eine Fehlersuche ohne Fehlerquelle ist nicht möglich.