Dynamic HTML\JavaScript keeps breaking when echoed from PHP

**Faultyboy** · 22-07-2012 09:58 AM

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>

**cybershark** · 22-07-2012 12:41 PM

Can you post the php code?

using Jquery show might be easier: http://api.jquery.com/show/

**Faultyboy** · 22-07-2012 02:44 PM

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

**xumwun** · 22-07-2012 02:49 PM

Something like this maybe
http://dev.sencha.com/deploy/ext-4.1...d-plugins.html

Check the first example.

**Faultyboy** · 22-07-2012 03:08 PM

Thanks guys those are both very cool, Ill play around with them

**rward** · 22-07-2012 03:25 PM

have you tried the jquery ui functions?

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

**Faultyboy** · 22-07-2012 03:44 PM

Originally Posted by rward

have you tried the jquery ui functions?

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

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..

**Murdoc** · 23-07-2012 03:28 PM

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

Thread: Dynamic HTML\JavaScript keeps breaking when echoed from PHP

Thread Tools

Display

Dynamic HTML\JavaScript keeps breaking when echoed from PHP

Similar Threads

javascript

HTML/CSS preventing floated elements from breaking out of parents?

JavaScript

Javascript Help

Can anyone tell me what does this javascript do?

Bookmarks

Bookmarks

Posting Permissions