Question

I’m trying to display the new dynamic list by clicking dynamic list. Why do i call them dynamic list? Because the data is from database.

My idea is generating a list of companies, when i click one company, a list of all sites in the company is displayed; And then when i click the one site of one company, a list of all employees in the site is displayed.

Now i have met a problem. When i click any item in list of companies, a list of sites in the last item of company list shows. And when i click any item in the list of sites, a list of employees of last item in sites is showed.

Do you know why?

Here is the code and result image:

<script language="JavaScript">
    function toggle(id,id2,id3) {
        var state = document.getElementById(id).style.display;
            if (state == 'block') {
                document.getElementById(id).style.display = 'none';
                if (id2 != undefined)document.getElementById(id2).style.display = 'none';
                if (id3 != undefined)document.getElementById(id3).style.display = 'none';
            } else {
                document.getElementById(id).style.display = 'block';
            }
        }
</script>
<style type="text/css">
#main{
    position:relative;
    top:20px;
    left:20px;
    width:200px;
    background: lightblue;
}
#hidden {
    position:relative;
    top:5px;
    left:280px;
    width:200px;
    background: lightgrey;
    display: none;
}
#hidden2 {
    position:relative;
    top:-12px;
    left:580px;
    width:200px;
    background: lightgreen;
    display: none;
}
#hidden3 {
    position:relative;
    top:100px;
    left:20px;
    width:200px;
    background: lightpink;
    display: none;
}
</style>
    <?php
        error_reporting(E_ALL ^ E_NOTICE);
        include("./conn/connect.php");
        $query = "SELECT * FROM entreprise ORDER BY id";
        $result = mysql_query($query) or die("result failed: ".mysql_error());
    ?>
<div id="main" >
    <?php
        echo "<ul>";
        while($row = mysql_fetch_assoc($result)){
            echo "<li onclick=\"toggle('hidden','hidden2','hidden3');\">".$row['name'].'<li>';
            $query2 = "SELECT * FROM site WHERE eid = '".$row['id']."'";
            //$query2 = "SELECT * FROM site WHERE eid = ".$row['id'];
            //$result2 = mysql_query($query2) or die("query2 result error".mysql_error());
            $result2 = mysql_query($query2) or die("query2 result error".mysql_error());
        }
        echo "</ul>";
    ?>
</div>
<div id="hidden" >
    <?php
        echo "<ul>";
        while($row2 = mysql_fetch_assoc($result2)){
            echo "<li onclick=\"toggle('hidden2','hidden3')\">".$row2['name'].'< >';
            $query3 = "SELECT * FROM salarie WHERE siteid =".$row2['id'];
            //echo $query3;
            $result3 = mysql_query($query3) or die("query3 result error".mysql_error());
        }
        echo "</ul>";
    ?>
</div>
<div id="hidden2" >
    <?php
        echo "<ul>";
        while($row3 = mysql_fetch_assoc($result3)){
            echo "<li onclick=\"toggle('hidden3')\">".$row3['prenom'].'< >';
            $query4 = "SELECT * FROM salarie WHERE id =".$row3['id'];
            $result4 = mysql_query($query4) or die("query4 result error".mysql_error());
        }
        echo "</ul>";
    ?>
</div>
<div id="hidden3">
    <?php
        echo "<table>";
        while($row4 = mysql_fetch_assoc($result4)){
            echo "<tr><td>".$row4['prenom'].'</td>';
            echo "<td>".$row4['nom'].'</td></tr>';
        }
        echo "</table>";
    ?>
</div>

Result image:

Answer 1

Pretty simple: Your PHP code is executed ONCE when you access the site.

So for example the result of this block

while($row = mysql_fetch_assoc($result)){
        echo "<li onclick=\"toggle('hidden','hidden2','hidden3');\">".$row['name'].'<li>';
        $query2 = "SELECT * FROM site WHERE eid = '".$row['id']."'";
        //$query2 = "SELECT * FROM site WHERE eid = ".$row['id'];
        //$result2 = mysql_query($query2) or die("query2 result error".mysql_error());
        $result2 = mysql_query($query2) or die("query2 result error".mysql_error());
}

is that $result2 holds all the sites of the last company in your list. This is then used in the next loop to generate the corresponding list of sites. Look at the source of the generated HTML file.

PHP is a server side language, the code is executed at the server and it is not re-executed by your Javascript functions (i.e. not executed in the browser).

What you are after is dynamically loading the data from your server with AJAX and pass into the generated HTML.

Edit:

You could also do it without Ajax: Rewrite your PHP like this:

$sitequeries = array()
while($row = mysql_fetch_assoc($result)){
        echo "<li onclick=\"showSites('sites_$row['id']');\">".$row['name'].'<li>';
        $query = "SELECT * FROM site WHERE eid = '".$row['id']."'";
        $sitequeries[$row['id']] = mysql_query($query2 or die("query2 result error".mysql_error());
}

and

<?php
    foreach($sitequeries as $id => $query) {
        echo "<ul class='sites' id='sites_$id'>";

        while($row2 = mysql_fetch_assoc($query)){
            //...
        }
        echo "</ul>";
    }
?>

This is not a working example but should give you the right idea. You have to adjust your JS accordingly to show only the corresponding lists, e.g.:

function showSites(id) {
   // Hide all lists with class 'site' here and only display the list with id 'id' e.g. 'sites_5'
}

But note that this is not a good solution if you have a lot of companies, site, employes, etc. as the generation of the HTML may take a while. Then Ajax is a better choice.