PDA

View Full Version : Animated Collapsible DIV 2.4 multiple error



MonsterAikikai
05-21-2014, 03:31 PM
1) Script Title: Animated Collapsible DIV 2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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;


<?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'>&nbsp;</td>
</tr>
<tr>
<th class='database' width='120'>&nbsp;</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'>&nbsp;</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'>&nbsp;</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'>&nbsp;</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'>&nbsp;</td>
</tr>
<tr>
<th class='database' width='120'>&nbsp;</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'>&nbsp;</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'>&nbsp;</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.

ddadmin
05-25-2014, 06:10 PM
Please post a link to the page on your site that contains the problematic script so we can check it out.

MonsterAikikai
05-28-2014, 09:23 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

Unfortunately it is running on a page inside our firewall.