CODEWITHSUNDEEP
phpjavascriptajaxscroll
SimaPro
SimaPro

Reputation: 1234

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

I want to display a tree with information about the Catalogue of Life which includes the Kingdom, phylum, order, etc information. I'm using ajax/php to interact with a mySQL database, while using javascript to display and output the information. I have finally completed the things I wanted it to do: expand and collapse on clicking, load only once, etc. But everytime something is clicked below the scroll limit, it bounces back to the top of the page. I researched this and saw something about including 'return false' in the function or the tag, but this did not solve the problem. Am I just putting it in the wrong place? Thanks for your help...

Here is the code: in its php/javascript goodness...

    <?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>";
    ?>

Upvotes: 0

Views: 1101

Answers (1)

BenOfTheNorth
BenOfTheNorth

Reputation: 2872

You were missing a closing parenthesis - if popped it in with a comment where I think you were wanting it. If JS has an error it generally won't execute, and instead it'll fall back to the non JS (ie, the return false wont fire because of the error). Were you getting an actual error when running this? The console is a good friend when you're debugging JS.

Formatting your code like I have below will also help to identify any missing elements more easily.

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

When you're done checking and if everything is ok, take a look at: http://api.jquery.com/jQuery.get/ - the example's are at the bottom.

Upvotes: 1

Related Questions