Tooltipster funktioniert nicht richtig am Anfang

Ich bin mit dem tooltipster plugin-tool, wo ich gantt-Diagramm gezeichnet mit einigen td id gegeben. Also die jemals-id definiert ist und die Maus über Sie erhalten ajax-Daten und zeigen Sie entsprechend an.Unten ist der Ausschnitt von meiner codes. Problem hier ist, dass der tool-Tipp erscheinen nur nach wenigen Male, die ich der Maus den td. Danach funktioniert es einwandfrei. Ich sehe das in meiner debug-Fenster die ajax-Seite wird aufgerufen, und auch sehen, diesen Fehler

Tooltipster: eine oder mehrere tooltips sind an diesem element: ignorieren. Benutzen Sie die "mehrfach" option zum anfügen, mehr tooltips. jquery.tooltipster.min.js:1

  $(document).ready(function () {

      $('td[id]').tooltipster({
    //content: 'Loading...',
     functionBefore: function(origin, continueTooltip) {
        //We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
        continueTooltip();
        var idval=0;
        //Next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'GET',
                url: 'getDetails.php',
                data:idval,
                success: function(data) {
                    //Update our tooltip content with our returned data and cache it
                    //alert("Data is : "+data);
                    var finalData = 'Total Data : 300 <br> Total Completed : 200';

                    //alert("DATA");
                    //origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')

                   origin.tooltipster({
                        content: finalData,
                        multiple: true,
                        contentAsHTML: true
                    });

                    //origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
                }
            });
        //}
    }
  });

});

InformationsquelleAutor user2711681 | 2014-06-09

4

Den Tooltipster plugin sollte wirklich initialisiert werden, bevor all dies. Mit der mouseenter geben Sie zum auslösen der Initialisierung jedes mal, wenn ein Benutzer hover über ein <td> element ist nicht toll, der Praxis und ist die Wurzel problem zu Ihrem Problem. Im Idealfall würden Sie wollen, um es zu brechen in die folgenden:
1. Finden Sie Ihren <td> Elemente mit - id definiert wird.
2. Gelten tooltipster zu diesen Elementen.
3. Lassen tooltipster Griff alles da.
1. Finden Sie Ihren <td> Elemente

Mit der Magie von jQuery Holen Sie diese mit einem klugen Einsatz von Selektoren, die eher als die Abfrage einer größeren Menge mit Ihrem ersten Erfahrungen mit der Umsetzung gesammelt aus den Antworten in den StackOverflow-thread hier, jquery bekommen nur alle html-Elemente mit den ids, erhalten wir:
```
$('td[id]')
```
Diese Holen Sie alle <td> - Elemente mit einer id definiert ist, werden Sie gewarnt, dies könnte ein bisschen langsam, wenn Sie eine umfangreiche Tabelle. Alternativ können Sie wählen Sie und wenden Sie dann eine filter eingrenzen set:
```
$('td').filter(function(){
 return $(this).attr('id') !== undefined;
});
```
Beide im wesentlichen das gleiche zu tun!

2. Die Anwendung tooltipster, um diese Elemente

Habe ich nicht viel getan hier, seit Sie hatten eine Menge auskommentierten code, so habe ich es gehalten die gleichen, mit einigen kleinen tweaks, hier ist meine version des "working code":
```
$('td[id]').tooltipster({
 //content: 'Loading...',
 functionBefore: function(origin, continueTooltip) {
 //We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
 continueTooltip();

 //Next, we want to check if our data has already been cached
 //if (origin.data('ajax') !== 'cached') {
 $.ajax({
 type: 'GET',
 url: 'getDetails.php',
 data: $(this).attr('id'),
 success: function(data) {
 //Update our tooltip content with our returned data and cache it
 //alert("Data is : "+data);
 var finalData = 'Total Data : 300 Total Completed : 200';

 //alert("DATA");
 //origin.tooltipster: $('teststThis text is in bold case !')

 origin.tooltipster({
 content: finalData,
 multiple: true,
 contentAsHTML: true
 });

 //origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
 }
 });
 //}
 }
});
```
3. Lassen tooltipster behandeln alles von hier

Tooltipster (wenn intialised) ausgelöst wird standardmäßig, wenn die Maus über ein element, dies bedeutet, dass Ihre functionBefore wird ausgeführt werden, bevor diese "hover" - Ereignis, dass Ihr AJAX-request ausgeführt werden, jedes mal, es gibt keine Notwendigkeit, etwas zu tun mehr danach 😀

Ich hoffe, das hilft! 🙂
- Ich brauche eine Klarstellung, wie "initialisiert, bevor all dies."? Was soll ich tun dafür? Wo diesen Aufruf $('td').filter(function(){ return $(this).attr('id') !== undefined; });
- Platzieren Sie den obigen code in ein Dokument bereit blockieren, z.B. $(document).ready(function(){ /** the code goes here **/ });
- Ja, ich habe getan, wie über diese $('td').filter(function(){ return $(this).attr('id') !== undefined; }); und erfassen die id in meiner idval variable? Ich sehe immer noch Ihr hinterher, wo Sie es benötigen, zwei oder drei mal. Ich habe updates meine Frage mit meinem neuesten codes.
- Das ist einfach nur eine alternative zu $('td[id]') Sie nicht brauchen, um zu verwenden, wenn Sie damit glücklich sind. Sie können jederzeit Ihre idval mit $(this).attr('id') habe ich aktualisiert meine Antwort, um dies zu reflektieren 🙂
- Ok Super es funktioniert, aber ich brauche noch mindestens 2 mal mit der Maus über dann nur im tool-Tipp angezeigt. Aber aus dem debug-log kann ich sehen, meine ajax-Seite wird aufgerufen, wenn ich die Maus über. Eine Lösung für dieses?
- Dies ist eine große Tabelle mit vielen <td> Elemente?
- Es ist nicht so viele derzeit. Aber wie kommen über dieses Problem eine Idee bitte ?
- Lassen Sie uns weiter, diese Diskussion im chat.
- hoffe, Sie sind zurück, so dass jede Hilfe, wie die Optimierung auf mein problem?
InformationsquelleAutor zesda

Können Sie diesen code verwenden :

var tooltipInstance;
$("body").on('mouseover', 'td[id]:not(.tooltipstered)', function(){
    tooltipInstance = $(this).tooltipster({
        //your code ...
    });
    tooltipInstance.tooltipster('open');
});

InformationsquelleAutor saral

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

1. Finden Sie Ihren <td> Elemente

2. Die Anwendung tooltipster, um diese Elemente

3. Lassen tooltipster behandeln alles von hier

1. Finden Sie Ihren `<td>` Elemente