我想显示一棵树,里面有关于生命目录的信息,包括王国、门、目等信息。我使用ajax/php与mySQL数据库交互,同时使用javascript显示和输出信息。我终于完成了我想让它做的事情:点击时展开和折叠,只加载一次,等等。但每次点击低于滚动限制的东西,它都会反弹回页面顶部。我对此进行了研究,发现在函数或标记中包含"return false",但这并没有解决问题。我只是把它放错地方了吗?谢谢你的帮助。。。
以下是代码:在它的php/javascript中。。。
<?php
include ('includes/functions.php');
$connection=connectdb();
$result=runquery('
SELECT scientific_name_element.name_element as shortname ,taxon_name_element.taxon_id as taxonid
FROM taxon_name_element
LEFT JOIN scientific_name_element ON taxon_name_element.scientific_name_element_id = scientific_name_element.id
LEFT JOIN taxon ON taxon_name_element.taxon_id = taxon.id
LEFT JOIN taxonomic_rank ON taxonomic_rank.id = taxon.taxonomic_rank_id
LEFT JOIN taxon_name_element AS tne ON taxon_name_element.parent_id = tne.taxon_id
LEFT JOIN scientific_name_element AS sne ON sne.id = tne.scientific_name_element_id
LEFT JOIN taxon AS tax ON tax.id = tne.taxon_id
LEFT JOIN taxonomic_rank AS tr ON tr.id = tax.taxonomic_rank_id
WHERE taxon_name_element.parent_id is NULL');
set_time_limit(0);
ini_set('max_execution_time',0);
?>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
function load_children(id){
if(document.getElementById(id).active != 'true'){
if(document.getElementById(id).loaded != 'true'){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function()
{//actual stuff
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{//change the text
this.active='true'
//document.getElementById(id).innerHTML = xmlhttp.responseText;
var oNewNode = document.createElement("ul");
document.getElementById(id).appendChild(oNewNode);
document.getElementById(id).active = 'true';
document.getElementById(id).loaded = 'true';
oNewNode.innerHTML="<i>"+xmlhttp.responseText+document.getElementById(id).active+"</i>";
}
}
xmlhttp.open("GET","new.php?id="+id,true);
xmlhttp.send(false);
}else{
$("#"+id).children().children().show(); document.getElementById(id).active = 'true'}}else{ $("#"+id).children().children().hide();
document.getElementById(id).active = 'false';
}return false;}
</script>
</head>
<body>
<?php
echo "<ul>";
while($taxon_name_element = mysql_fetch_array($result)){
echo "
<li id='"{$taxon_name_element['taxonid']}'" style='"display:block;'"><a href='"#{$taxon_name_element['taxonid']}'" onclick='"load_children({$taxon_name_element['taxonid']});return false;'">{$taxon_name_element['shortname']}</a></li>
";}
echo "</ul></body></html>";
?>
您缺少一个右括号-如果在我认为您想要的地方弹出它并添加注释。如果JS有错误,它通常不会执行,而是会返回到非JS(即,返回false不会因为错误而触发)。运行此程序时是否出现实际错误?当您调试JS时,console
是一个好朋友。
像我下面这样格式化你的代码也有助于更容易地识别任何丢失的元素。
function load_children(id)
{
if(document.getElementById(id).active != 'true')
{
if(document.getElementById(id).loaded != 'true')
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
//actual stuff
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//change the text
this.active='true'
//document.getElementById(id).innerHTML = xmlhttp.responseText;
var oNewNode = document.createElement("ul");
document.getElementById(id).appendChild(oNewNode);
document.getElementById(id).active = 'true';
document.getElementById(id).loaded = 'true';
oNewNode.innerHTML="<i>"+xmlhttp.responseText+document.getElementById(id).active+"</i>";
}
}
xmlhttp.open("GET","new.php?id="+id,true);
xmlhttp.send(false);
} // This was missing - were you getting an error?
}
else
{
$("#"+id).children().children().show(); document.getElementById(id).active = 'true'}
}
else
{
$("#"+id).children().children().hide();
document.getElementById(id).active = 'false';
}
return false;
}
检查完后,如果一切正常,请查看:http://api.jquery.com/jQuery.get/-示例位于底部。