Tree Table with Jquery/ Ajax using Dynamic Data from Mysql

Question

I tried to create a tree table using dynamic data from Mysql.

It works (finally after long trial), when I click a parent it read the data from Mysql and show the children for that particular parent.

But whichever parent I clicked, the children is always shown after the last row. I need the children to be appear in the rows just after their parent and the other next parents to be toggled down.

There are 2 files:

Main.php

<html>
<head>
<style type="text/css">
    .toggle             {   color: #000000;         }
    .tog                {   height: 16px;
                            width: 16px;
                            display: inline-block;  }
    .parent .last       {   background-image: url(02_files/01_images/paper_small.png);          }
    .parent .tog        {   background-image: url(02_files/01_images/folder_green.png);         }
    .expand .tog        {   background-image: url(02_files/01_images/folder_green_open.png);    }
</style>

<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript">
$('document').ready(function(){
    $('.toggle').click(function() {
    $('#plant').html('<img src="02_files/01_images/loading.gif">');
        var area = $(this).parent().find('.toggle').text();<?
        $areaqtyquery = mysql_fetch_array(mysql_query("SELECT COUNT(DISTINCT(Business_Area)) AS areaqty FROM b01_functional_location"));
        $areaqty = $areaqtyquery['areaqty'];?>
        $.ajax({
            type:   'POST',
            url:    'Action.php',
            data:   'area='+area,
            success: function(data){
                $('#plant').html(data);
            }
        });
    });
});
</script>
</head>

<body>
<form>
<table>
    <tr><th>No</th>
        <th>Area & Plant</th>
        <th>Location</th>
        <th>Main Group</th>
        <th>Sub Group</th>
        <th>Function Group</th>
        <th>Functional Location</th>
        <th>Equipment</th>
    </tr><?
        mysql_connect("localhost","root","");
        mysql_select_db("sfer");
        $area = 1;
        $sql = mysql_query("SELECT DISTINCT(Business_Area) FROM b01_functional_location");
        while($data=mysql_fetch_array($sql)){?>
            <tr id="area"   class='parent'>
                <td align='center'> <?=$area?></td>
                <td align='left'>   <a class="tog"></a>
                                    <a href="javascript:void(0)" class="toggle"><?=$data['Business_Area']?></a></td></tr><? $area++; }?>


            <tr id="plant"  class='parent'></tr>
</table>
</form>
</body>

Action.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("sfer");

if (!empty($_POST['area'])){
$area = 1;
$sql = mysql_query("select DISTINCT(Plant), Plant_Description from b01_functional_location where Business_Area='$_POST[area]'");
while($data=mysql_fetch_array($sql)){?>
    <tr id='plant' class='parent' data-level="1">
        <td><?=$area?></td>
        <td><?=$data['Plant'].' : '.$data['Plant_Description']?></td>
    </tr><? }   $area++;}?>

Need your help on how to make the children toggled just below the parent like the normal treetables. Really appreciate your help.

[**Mysql_* API is deprecated either use PDO or mysqli**](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php/14110189#14110189) — NullPoiиteя, Jul 06 '13 at 07:24
See [this answer](http://stackoverflow.com/a/11674313/250259) for how to troubleshoot this. — John Conde, Jul 06 '13 at 12:27

score 2 · Answer 1 · answered Jul 06 '13 at 06:54

2

data() returns the result. You need to capture it before you can use it.

$result = data(...)

answered Jul 06 '13 at 06:54

Ignacio Vazquez-Abrams

740,318
145
1,296
1,325

It still cannot show the result. Now the error no longer ...null given..., but become ...array given.... Warning: mysql_num_rows() expects parameter 1 to be resource, array given in .... and Warning: mysql_fetch_array() expects parameter 1 to be resource, array given in ... – anesbbs Jul 06 '13 at 07:29

score 0 · Answer 2 · answered Jul 06 '13 at 06:57

Your $result variable isn't definited. Try calling the function before that.

Like this:

$result = data($type='...',$month='...');

And in future, you should use mysql_error(); function to troubleshoot the issue.

Hope this helps.

Tree Table with Jquery/ Ajax using Dynamic Data from Mysql

2 Answers2