Animated Collapsible DIV 2.4 multiple error
1) Script Title: Animated Collapsible DIV 2.4
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm
3) Describe problem: I have a script that pulls information from a database,including a unique ticket id. I then loop through the results and dynamically create each of the elements necessary to expand/collapse the DIV sections.
When there is only one record in the table, the script works perfectly. As soon as I add a second record, it stops expanding the DIV elements.
Here is my php script;
Code:<?php include "../../config/php_functions.php"; $sql = "select TicketID from ITJobs.dbo.MainInformation"; $row = read_primaV5($sql); ?> ... <!DOCTYPE HTML> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="animatedcollapse.js"> /*********************************************** * Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <script type="text/javascript"> <?php for ($a = 0; $a < count($row); $a++) { echo "animatedcollapse.addDiv('expand".$row[$a][0]."', 'fade=0, speed=50, group=list1') "; } ?> animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted //$: Access to jQuery //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID //state: "block" or "none", depending on state } animatedcollapse.init() </script> </head> <?php echo "<table width='800' style='border-spacing:0px;'> <tr> <th class='database' width='70' >Ticket No.</th> <th class='database' width='400'>Description</th> <th class='database' width='120'>Requested By</th> <th class='database' width='60'>Priority</th> <th class='database' width='90'>Required By</th> <th class='database' width='60'>Status</th> </tr> </table>"; for ($a =0; $a < count($row); $a++) { if ($result[0][0] == $row[$a][10] || $row[$a][10] == "N") { echo "<table width='800' style='border-spacing:0px;'> <tr> <td class='database' width='70'>".$row[$a][0]."</td> <td class='database' width='400'>".$row[$a][4]."</td> <td class='database' width='120'>".ucwords(str_replace(".", " ", $row[$a][5]))."</td> <td class='database' width='60'>".$row[$a][6]."</td> <td class='database' width='90'>".$row[$a][7]."</td> <td class='database' width='60'><a href='javascript:animatedcollapse.toggle(\"expand".$row[$a][0]."\")'>".$row[$a][9]."</a></td> </tr> </table>"; $sql1 = "select convert(varchar, CommentTimestamp, 103), convert(varchar, CommentTimestamp, 108), Comment, Creator from ITJobs.dbo.Comments where TicketID = ".$row[$a][0]." order by CommentTimestamp"; $row1 = read_primaV5($sql1); echo "<div id='expand".$row[$a][0]."' style='width: 800px; display:none'>"; if (count($row1) > 0) { echo "<table width='800' style='border-spacing:0px;'> <tr> <td class='database' colspan='6'> </td> </tr> <tr> <th class='database' width='120'> </th> <th class='database' width='80'>Date</th> <th class='database' width='80'>Time</th> <th class='database' width='400'>Comment</th> <th class='database' width='120'>Commented By</th> </tr>"; for ($b = 0; $b < count($row1); $b++) { echo "<tr> <td class='database' width='120'> </td> <td class='database' width='80'>".$row1[$b][0]."</td> <td class='database' width='80'>".$row1[$b][1]."</td> <td class='database' width='400'>".$row1[$b][2]."</td> <td class='database' width='120'>".ucwords(str_replace(".", " ", $row1[$b][3]))."</td> </tr>"; } echo "</table>"; } echo "</div>"; echo "<table width='800' style='border-spacing:0px;'> <tr> <td class='database' colspan='6'> </td> </tr> </table>"; } } echo "<input type='hidden' name='uname' value='".$uname."'/>"; ...and the resulting source page that is created with the above code; <meta http-equiv="Pragma" content="no-cache"/> <html> <head> <link rel="stylesheet" type="text/css" href="../../config/style.css" /> <!DOCTYPE HTML> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="animatedcollapse.js"> /*********************************************** * Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <script type="text/javascript"> animatedcollapse.addDiv('expand3', 'fade=0, speed=50, group=list1') animatedcollapse.addDiv('expand1', 'fade=0, speed=50, group=list1') animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted //$: Access to jQuery //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID //state: "block" or "none", depending on state } animatedcollapse.init() </script> </head> <table width='800' style='border-spacing:0px;'> <tr> <th class='database' width='70'>Ticket No.</th> <th class='database' width='400'>Description</th> <th class='database' width='120'>Requested By</th> <th class='database' width='60'>Priority</th> <th class='database' width='90'>Required By</th> <th class='database' width='60'>Status</th> </tr> </table><table width='800' style='border-spacing:0px;'> <tr> <td class='database' width='70'>3</td> <td class='database' width='400'>Test Job 2</td> <td class='database' width='120'>John Smith</td> <td class='database' width='60'>Low</td> <td class='database' width='90'>21/05/2014</td> <td class='database' width='60'><a href='javascript:animatedcollapse.toggle("expand3")'>Pending</a></td> </tr> </table><div id='expand3' style='width: 800px; display:none'></div><table width='800' style='border-spacing:0px;'> <tr> <td class='database' colspan='6'> </td> </tr> </table><table width='800' style='border-spacing:0px;'> <tr> <td class='database' width='70'>1</td> <td class='database' width='400'>Test Job</td> <td class='database' width='120'>John Smith</td> <td class='database' width='60'>Medium</td> <td class='database' width='90'>23/05/2014</td> <td class='database' width='60'><a href='javascript:animatedcollapse.toggle("expand1")'>Pending</a></td> </tr> </table><div id='expand1' style='width: 800px; display:none'><table width='800' style='border-spacing:0px;'> <tr> <td class='database' colspan='6'> </td> </tr> <tr> <th class='database' width='120'> </th> <th class='database' width='80'>Date</th> <th class='database' width='80'>Time</th> <th class='database' width='400'>Comment</th> <th class='database' width='120'>Commented By</th> </tr><tr> <td class='database' width='120'> </td> <td class='database' width='80'>21/05/2014</td> <td class='database' width='80'>11:38:00</td> <td class='database' width='400'>Test Comment</td> <td class='database' width='120'>John Smith</td> </tr></table></div><table width='800' style='border-spacing:0px;'> <tr> <td class='database' colspan='6'> </td> </tr> </table><input type='hidden' name='uname' value='john.smith'/>
From what I can see, looking at the source, it creates separate bits for each of the necessary parts. I expect it is a simple error but I cannot see what it is. If any one can help, it will be most appreciated.
CSS Codes
Reply With Quote
Originally Posted by ddadmin
Bookmarks