如何防止页面在ajax请求后滚动(返回false不起作用或可能在错误的位置)


How to prevent the page from scrolling after an ajax request (return false not working or maybe in the wrong palce)

我想显示一棵树,里面有关于生命目录的信息,包括王国、门、目等信息。我使用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/-示例位于底部。