Dynamic HTML\JavaScript keeps breaking when echoed from PHP

F

Faultyboy

Well-Known Member
Joined
Apr 7, 2012
Messages
141
Reaction score
0
I have found a little script online which has a nice expanding and collapsing TABLE effect. I am trying to build a display for a mailbox, the result will be echoed from PHP to dynamically create all the rows from a MySQL DB.
When a user clicks on a email subject 'Toggle' it should slide down to display the email where 'Test row' is.

The script works fine until echoing it. Is what I'm trying to do possible with the below script, I'm not to clued up on the JavaScript side of things so I'm not sure why it's breaking.

Any other recommendations would be appreciated.

I haven't pasted my code as I have been through to many variations(non worked).. :/

Code: 
<html>
<head>
    <title> New Document </title>
</head>
<body>

<table width="400">
    <tbody>
        <tr><td style="background-color: #CCC"><a href="#" onclick="toggleItem('myTbody')">Toggle</a></td></tr>
    </tbody>

    <tbody id="myTbody">
        <tr><td>Test row1</td></tr>
        <tr><td>Test row2</td></tr>
        <tr><td>Test row3</td></tr>
        <tr><td>Test row4</td></tr>
        <tr><td>Test row5</td></tr>
    </tbody>
</table>

</body>
</html>   
<script language="javascript">
    function getItem(id)
    {
        var itm = false;
        if(document.getElementById)
            itm = document.getElementById(id);
        else if(document.all)
            itm = document.all[id];
        else if(document.layers)
            itm = document.layers[id];

        return itm;
    }

    function toggleItem(id)
    {
        itm = getItem(id);

        if(!itm)
            return false;

        if(itm.style.display == 'none')
            itm.style.display = '';
        else
            itm.style.display = 'none';

        return false;
    }
</script>
 
This works as expected but looses all dynamic ability's.. Will have a look at your link.. ta

Code: 
<?PHP
$sql="SELECT * FROM `$tbl_3` ORDER BY id DESC";
$result = mysql_query($sql);
$a = 1;
while ($row=mysql_fetch_row($result))
{
?>
<TR><TD style='background-color:#CCC'>
<?PHP
echo "<a href=messenger.php onclick='toggleItem(myTbody_".$a.")'>".$row[3]."</a>";
?>
</TD></TR>
<?PHP
echo "<tbody id='myTbody_".$a."'><tr><td>".$row[4]."</td></tr></tbody>";
$a ++;
}
?>
 
Thanks guys those are both very cool, Ill play around with them :)
 
rward said:
have you tried the jquery ui functions?

Something like accordian - http://jqueryui.com/demos/accordion/
Click to expand...

No I haven't only just starting to look into JQuery and such for a recent project. I used to do a little bit of VBScript and JavaScript back in the day, nothing complexed thou. JQuery looks awesome, think I'm going to have to start paying it more attention.. Thanks so much again guys, these are just what I was looking for. It's going to look amazing.. :)
 
I haven’t seen enough code but
If what you are showing does not exist (in the DOM)when the document loads you need to use .delegate to attached the handler event.

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

Deletegate is depreciated and replaced with .on but its easiser to get working
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X