工具提示未显示相关数据

Question

我正在开发一个项目，其中列出了5个“模块”（Module1，Module2 ......等等）。它显示在一个html表中。每个模块都有一些章节，因此当表格中显示模块时，我需要制作一个工具提示，以便当用户将鼠标悬停在模块名称上时，一个小工具提示会显示与之关联的所有章节标题。在实现这个方面非常成功但是停留在控制台显示消息为'Empty string passed to getElementById().'并且工具提示中没有显示章节的位置，工具提示显示为“请等待......”。这是我的相同代码，

这是我的jQuery和AJAX，

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

和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;

?>

直到现在我无法找出这个出了什么问题。任何帮助或建议将受到高度赞赏。

Answer 1

在ajax调用的id函数中无法访问success变量。您需要在java脚本中将其声明为全局变量。希望这可以帮助。

编辑

另一种方法是您可以将选定的id发送到post请求并作为响应访问成功函数。

这是你可以做的ajax请求：

$( ".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();
 });

});

和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;

?>