我正在做一个项目,其中有 5 个“模块”(模块 1、模块 2...等等)的列表。它显示在一个 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;
?>
直到现在我无法找出这有什么问题。任何帮助或建议将不胜感激。
工具提示的整个结构必须是这样的:
1) 例如,如果您想在 td 上使用工具提示,则 td标签必须有一个标题($('td#yourid').tooltip()
显示 td 标签的标题,id 为 #yourid)。即使您不想要工具提示的标题,您也必须在标签中使用它,稍后您可以通过 ajax 返回值更改它。所以:
<table>
<tr>
<td id = "tooltip-1" href = "#" title = "Nice tooltip" style="height:100px;width:100px;border:1px solid black;"><td>
</tr>
</table>
2)如果你想在 td 标签本身上进行工具提示,工具提示结构必须是这样的
<script>
$(function() {
$("#tooltip-1").tooltip({
open: function( event, ui ) {
var x = $(this); //this is for getting the tooltip-1 object to later use in ajax call
$.ajax({
type: 'post',
url: 'fetch_details.php',
data: {
'yourdata-name': 'yourdata'
},
success: function(html){
x.tooltip({
content: html
});
}
});
}
});
});
</script>
所以你必须把你想要工具提示的对象放在像 x 这样的变量中,然后在 ajax 中使用该 x 指向该对象,以便工具提示将显示 ajax 返回值的结果
3) 工具提示是 jquery-ui 中的新内容,并且在某种程度上与引导程序不兼容。因此,如果您正在使用引导程序,请尝试使用工具提示的引导程序版本
4)您的代码中有很多编码错误,例如 的语法$html .= "<span class='head'>"<?php echo $title ; ?> " :</span><span>"" mins</span><br/>";
完全错误。例如,您不能<?php ?>
在另一个<?php ?>
.
我的建议是首先运行我的代码并将一个简单的字符串从 fetch-details.php 回显到 ajax 成功函数以查看此结构是否有效,然后您可以根据此结构操作您的代码
由于您几乎没有提供有关您的代码的信息以及给出的错误(按行),这就是我所能提供的帮助。我希望这些信息对你的程序有帮助
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句