ajax 工具提示不加载数据

时间:2021-07-13 05:13:10

标签: javascript php ajax web tooltip

我正在制作一个 mvc 结构的网站。该站点显示了一个表格,该表格上有一个工具提示,显示了单元格的更多详细信息。但是,工具提示中的数据未加载。 (除了工具提示一切正常) 这个工具提示数据是从 mySQL 加载的,它有两个输入变量 deptName 和 deptPart。 当我输入随机内容而不是加载数据时,工具提示效果很好......我找不到它出错的原因:(

我的工具提示模型是

function getTooltipML($deptName, $deptPart)
{
    $sql = "Call TooltipML('$deptName', '$deptPart')";
    $tooltipML = $this->sqlExecution($sql);
    return json_encode($tooltipML);
}

function getTooltipWillLeave($deptName, $deptPart)
{
    $sql = "Call TooltipWillLeave('$deptName', '$deptPart')";
    $tooltipWL = $this->sqlExecution($sql);
    return json_encode($tooltipWL);
}

我的工具提示控制器是

function view()
    {   
        $deptName = $_POST['deptName'];
        $deptPart = $_POST['deptPart'];
        $tooltipML = $this ->model -> getTooltipML($deptName, $deptPart);
        $tooltipWL = $this ->model -> getTooltipWillLeave($deptName, $deptPart);
        //call view to push the data into the view
        $this->requireView('ManagementMasterView', [
            'page' => "DashboardDetail",
            'tooltipML' =>$tooltipML,
            'tooltipWL' => $tooltipWL
            ]);
    }

    function tooltip(){
        $deptName = $_POST['deptName'];
        $deptPart = $_POST['deptPart'];
        echo json_encode ($this -> model -> getTooltipML($deptName, $deptPart));
        echo json_encode ($this -> model -> getTooltipWillLeave($deptName, $deptPart));
    }

我对工具提示的看法是

<div class="dash_table_container">
    <?php
    // pre-process data
    $printedData = json_decode($data['resourceStatus'], true);
    $tableHeader = ['deptName', 'deptPart', 'C', 'D', 'E', 'F'];
    $tooltipData1 = json_decode($data['tooltipMLEx'], true);
    $tooltipData2 = json_decode($data['tooltipWL'], true);
    // //Build up a table
    table1('dash-tb1', $tableHeader, $printedData, $tooltipData1, $tooltipData2);
    ?>
</div>

//下面的函数在单独的php文件中,但我只是在此处添加了视图以提高可读性

function table1($tableId, $header, $data, $tooltip1, $tooltip2){
// header build
    echo '
    <table class="display table table-striped" id="'.$tableId.'">
        <thead>
            
            <tr class="table-primary">
            <th>#</th>';
        foreach ($header as $columnVal){
        echo '<th>'.$columnVal.'</th>';
        }

    echo '
            </tr>
        </thead>
        <tbody>';
        $index = 0;
        $tooltip1 = "";
        $tooltip2 = "";
             foreach ($data as $row){
                $tooltip1;
                $tooltip2;
                $index++;
                echo '
                <tr id="'.$row['deptName'].'" data-id="'.$row['deptPart'].'">
                <td>'.$index.'</td>
                <td>'.$row['deptName'].'</td><td>'.$row['deptPart'].'</td><td>'.$row['C'].'</td>
                <td class = "CellWithComment"><span class="CellComment">'.$tooltip1.'</span>'.$row['D'].'</td>
                <td class = "CellWithComment"><span class="CellComment">'.$tooltip2.'</span>'.$row['E].'</td>
                <td>'.$row['F'].'</td>';
                    
             }                                
    echo '
            </tr>
        </tbody>
    </table>';
            }

我的 javascript 是

$(document).ready(function(){
  // Add tooltip
  $('.CellComment').tooltip({
   delay: 500,
   placement: "bottom",
   title: tooltipDetails,
   html: true
  }); 
});

// Get employee details for tooltip
function tooltipDetails(deptName, deptPart){
  var deptName = this.deptName;
  var deptPart = $(this).attr('data-id');
  var tooltipText = "";
  $.ajax({
   url: '/hrmsystem/Dashboard/tooltip',
   method: "POST",
   data: {dept_Name:deptName, dept_Part:deptPart},
   dataType: "JSON",
   async: false,
   success: function(response){
     tooltipText = response;
   }
  });
  return tooltipText;
}

非常感谢您的提示。

0 个答案:

没有答案