The CSS & jQuery code getting printed as plaintext on 200th iteration [php] - php

Question

I was working on a script where I had to show some query respective to domain type(Here mentioned as typeX & type Y).So I used jquery slidetoggle function & little bit of css.Things worked perfect until 200th iteration.
Till 199th iteration data is displayed properly with indentation like below:
Click To show typeX data
//Some data shown via toggle
Click To show typeY data
//Some data shown via toggle
But beyond that its prints all data & even jQuery,css as continuous line of text,even break tag is not working.Something like this:
$(document).ready(function(){ $("#typeX201").click(function(){ $("#typeX201").slideToggle("slow"); }); }); $(document).ready(function(){ $("#typeY201").click(function(){ $("#itypeY201").slideToggle("slow"); }); }); #typeX,#typeY { background-color:#cccccc; border:solid 1px #a9a9a9; } #TypeX201,#typeY201 { display:none; }
//followed by some data
Below is my php code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<?php
class Delete_bm
{
function __construct($site)
{
//Creating DB Connection
}
function __destruct()
{
//Closing DB Connection
}
function display_data()
{
$sql="Some SQL query;
$res=mysql_query($sql,$this->db_cluster1);
$i=1;
while ($line = mysql_fetch_assoc($res))
{ ?>
<script>
$(document).ready(function(){
$("#typeX<?php echo $i?>").click(function(){
$("#typeXqry<?php echo $i?>").slideToggle("slow");
});
});
$(document).ready(function(){
$("#typeY<?php echo $i?>").click(function(){
$("#typeYqry<?php echo $i?>").slideToggle("slow");
});
});
</script>
<style>
#typeX?php echo $i?>,#typeY<?php echo $i?>
{
background-color:#cccccc;
border:solid 1px #a9a9a9;
}
#typeXqry<?php echo $i?>,#typeYqry<?php echo $i?>
{
display:none;
}
</style>
<div id="typeX<?php echo $i?>"><b>Click to show typeX Query</b></div>
<div id="typeXqry<?php echo $i?>">
<?php $str="Some Query";
//typeX text to be displayed in every iteration;?>
<div id="typeXqry<?php echo $i?>">
<?php $str="Some Query";
//typeX text to be displayed in every iteration;?>
$i++;
}
}
}
$list = new Delete_bm();
$data = $list->display_data();
How to solve this problem?

Answer 1

Leave this part out of the loop. There is no need to duplicate code like this.
<script>
$(document).ready(function() {
$(".typeX, .typeY").click(function() {
$(this).next().slideToggle("slow");
});
});
</script>
<style> .typeX, .typeY { background-color:#cccccc; border:solid 1px #a9a9a9; } .Xqry, .Yqry { display:none; } </style>
Your loop should output only this stuff.
<br><b>199:Domain name:abc.com<br>
<div id="typeX199" class="typeX"><b>Click to show typeX Query</b></div>
<div id="Xqry199" class="Xqry"> //MySQL Queries <br><br> </div>
<div id="typeY199" class="typeY"><b>Click to show typeY Query</b></div>
<div id="Yqry199" class="Yqry"> //MySQL Queries <br><br> </div>