Tooltip zeigt keine relevanten Daten

Question

Ich arbeite an einem Projekt, wo es eine Liste von 5 'Module' (Module1, Module2 ... so weiter) gibt. Es wird in einer HTML-Tabelle angezeigt. Jedes Modul enthält einige Kapitel. Wenn also Module in der Tabelle angezeigt werden, muss ich einen Tooltip machen, so dass, wenn der Benutzer den Modulnamen überfliegt, ein kleiner Tooltip alle zugehörigen Kapiteltitel anzeigt. Ziemlich viel erfolgreich bei der Implementierung dieser, aber fest an einem Punkt, wo die Konsole zeigt die Nachricht als 'Empty string passed to getElementById().' und keine Kapitel werden in der QuickInfo angezeigt und Tooltip erscheint mit "Bitte warten ..". Hier ist mein Code für die gleiche,

dies meine jQuery und AJAX ist,

<link href='jquery-ui.css' rel='stylesheet' type='text/css'> 
     <script src='jquery-1.12.0.min.js' type='text/javascript'></script> 
     <script src='jquery-ui.js' type='text/javascript'></script> 

    <script> 
     $(document).ready(function(){ 

// initialize tooltip 
$(".panel-body td").tooltip({ 
    track:true, 
    open: function(event, ui) { 
    var id = this.id; 
    var split_id = id.split('_'); 
    var module_id = split_id[1]; 

    $.ajax({ 
    url:'fetch_details.php', 
    type:'post', 
    data:{module_id:module_id}, 
    success: function(response){ 

    // Setting content option 
    $("#"+id).tooltip('option','content',response); 

    } 
    }); 
    } 
}); 

$(".panel-body td").mouseout(function(){ 
    // re-initializing tooltip 
    $(this).attr('title','Please wait...'); 
    $(this).tooltip(); 
    $('.ui-tooltip').hide(); 
}); 

}); 
</script> 

Und

fetch_details.php

<?php 
    $dbhost = 'localhost'; 
    $dbuser = 'root'; 
    $dbpass = ''; 
    $conn = mysql_connect($dbhost, $dbuser, $dbpass); 

    if(! $conn) { 
     die('Could not connect: ' . mysql_error()); 
    } 
     echo ''; 
     mysql_select_db('dbname'); 

     $moduleid = $_POST['module_id']; 

     $sql= mysql_query("SELECT title FROM table WHERE module_id='$moduleid'"); 


     $html = '<div>'; 
     $i = 1 ; 
     if($sql === FALSE) { 
      trigger_error('Query failed returning error: '. mysql_error(), E_USER_ERROR); 
     } else { 
      while($row = mysql_fetch_array($result)){ 
       $title = $row['title']; 

       $html .= "<span class='head'>"<?php echo $title ; ?> " :</span><span>"" mins</span><br/>"; 
       $i++; 
      } 
     } 
     $html .= '</div>'; 

    echo $html; 

?> 

Bis jetzt bin ich nicht in der Lage, herauszufinden, was mit falsch läuft Dies . Jede Hilfe oder Beratung wird sehr geschätzt.

Answer 1

Die id Variable ist in der success Funktion des Ajax Aufrufs nicht zugänglich. Sie müssen dies als globale Variable in Java-Script deklarieren. Hoffe, das hilft.

EDIT

Die andere Möglichkeit ist, dass Sie die ausgewählten id auf die Post-Anfrage schicken und als Antwort Zugang in Erfolgsfunktion.

Dies ist die Ajax-Request Sie machen können:

$(".panel-body td").tooltip({ 
    track:true, 
    open: function(event, ui) { 
    var id = this.id; 
    var split_id = id.split('_'); 
    var module_id = split_id[1]; 

    $.ajax({ 
    url:'fetch_details.php', 
    type:'post', 
    dataType:'JSON'//change the response type to JSON 
    data:{module_id:module_id,selected_id:id}, 
    success: function(response){ 
    // Setting content option 
    //Access the selected and HTML variable from the response. 
    $(response.selected_id).tooltip('option','content',response.html); 

    } 
    }); 
    } 
}); 

$(".panel-body td").mouseout(function(){ 
    // re-initializing tooltip 
    $(this).attr('title','Please wait...'); 
    $(this).tooltip(); 
    $('.ui-tooltip').hide(); 
}); 

}); 

UND fetch_details.php

<?php 
    $dbhost = 'localhost'; 
    $dbuser = 'root'; 
    $dbpass = ''; 
    $conn = mysql_connect($dbhost, $dbuser, $dbpass); 
    $response=array(); 
    if(! $conn) { 
     die('Could not connect: ' . mysql_error()); 
    } 
     echo ''; 
     mysql_select_db('dbname'); 

     $moduleid = $_POST['module_id']; 
     $selected_id=$_POST['selected_id']; //get the selected id here 
     $sql= mysql_query("SELECT title FROM table WHERE module_id='$moduleid'"); 


     $html = '<div>'; 
     $i = 1 ; 
     if($sql === FALSE) { 
      trigger_error('Query failed returning error: '. mysql_error(), E_USER_ERROR); 
     } else { 
      while($row = mysql_fetch_array($result)){ 
       $title = $row['title']; 

       $html .= "<span class='head'>"<?php echo $title ; ?> " :</span><span>"" mins</span><br/>"; 
       $i++; 
      } 
     } 
    $html .= '</div>'; 
    $response['html']=$html; 
    $response['selected_id']=$selected_id; 
    echo json_encode($response); 
    exit; 

?>