list onclick event problem in php

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

Your toggle() Function needs 3 Parameters You set on some places just 2 parameters

echo "<li onclick=\"toggle('hidden2','hidden3')\">".$row2['name'].'< >';

Shoud be

echo "<li onclick=\"toggle('hidden1','hidden2','hidden3')\">".$row2['name'].'< >';

Answer 2

Might wanna look into JQuery instead of doing it the way you currently are. But streetparade is correct.

Answer 3

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.

Answer 4

I would do some things about your code:

1. Split the data acquiring stuff from the rest. At the beginning, get the data from the required tables and keep it in PHP variables. Then, do something with them using a JS framework... something according to your requirements

2. The problem with your approach is that you are NEVER telling anyone which row's ID should be sent... hence, it sends the id from the row selected by default, which happens to be the last one parsed by HTML parser on the browser. It means, the last one...

Answer 5

Your PHP code does not match your goal. $result2 will always be the last ID found in $result1, and so on.

If you need to generate result2 based on what the user selects in result1, then you need to either create rows for every possible selection then use javascript to show or hide, or utilize Ajax calls (much better).

Answer 6

Your approach to this task is a bit wrong, I think. What do you do in the first loop? You setting $result2 variable and you want to access it in the next loop. And in next loop $result2 is set to the last record of first loop. Have you heard about AJAX? jQuery may be?