php echo not printing out data - php

Question

I am using jQuery UI tabs to make a dynamic tabs using php and mysql.
My php code below get the data from the mysql database and display it out.
Normally the html code will look like:
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>
And i am using php to dynamically echo out the html :
<div id="featured" >
<ul class="ui-tabs-nav">
<?php
$count = 0; // Initialize counter
$rows = array();
while($row = mysql_fetch_array( $query )) {
$rows[] = $row;
$count = ++$count;
echo "<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-" . $count . "'><a href='#fragment-" . $count . "'><img class='thumb' src='$row[imagelink]' alt='' /><span>$row[title]</span></a></li>\n";
}
?>
</ul>
<?php
$count2 = 0; // Initialize counter
$rows2 = array();
while($row2 = mysql_fetch_array( $query )) {
$rows2[] = $row2;
$count2 = ++$count2;
echo "<div id='fragment-" . $count2 . "' class='ui-tabs-panel' style=''>\n";
echo "<img src='$row[imagelink]' alt='' />\n";
echo "<div class='info' ><h2><a href='$row[link]'>$row[title]</a></h2><p>$row[description]</p></div>\n";
}
?>
</div>
However, it only generates the li(tabs) and not the fragments(the content).
What's my problem here?

Answer 1

Your problem is that your $query (MySQL result object) reaches the end of the result rows, and then your second loop will not start over from the beginning.
This should solve the problem: http://www.krio.me/loop-twice-through-a-php-mysql-result-set/
However, I would suggest something closer to creating your own temporary PHP variable to store all the data in and use that to loop over it the first and second time. Just a suggestion.
I do not know the performance of the data seek method described in the website linked above.
EDIT: You are already storing the data in the $rows variable. In your second loop, loop through the $rows variable instead of using the mysql_fetch_array function.
Code Added (did not test, but should give you a good idea):
<div id="featured" >
<ul class="ui-tabs-nav">
<?php
$count = 0; // Initialize counter
$rows = array();
while($row = mysql_fetch_array( $query )) {
$rows[] = $row;
$count = ++$count;
echo "<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-" . $count . "'><a href='#fragment-" . $count . "'><img class='thumb' src='$row[imagelink]' alt='' /><span>$row[title]</span></a></li>\n";
}
?>
</ul>
<?php
$count2 = 0; // Initialize counter
$rows2 = array();
foreach($rows as $row2) {
$count2 = ++$count2;
echo "<div id='fragment-" . $count2 . "' class='ui-tabs-panel' style=''>\n";
echo "<img src='$row[imagelink]' alt='' />\n";
echo "<div class='info' ><h2><a href='$row[link]'>$row[title]</a></h2><p>$row[description]</p></div>\n";
}
?>
</div>

Answer 2

just change your
while($row2 = mysql_fetch_array( $query )) {
to
foreach($rows as $row2) {
However, here is a better version of your code
First, get your data into array. Do it near the place where you run your query. Keep all SQL operations in one place. And do not mix them with HTML operations!
$count = 0; // Initialize counter
$rows = array();
while($row = mysql_fetch_array( $query )) {
$rows[++$count] = $row;
}
Then move to HTML operations:
<div id="featured" >
<ul class="ui-tabs-nav">
<?php foreach($rows as $count => $row): ?>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-<?=$count?>'>
<a href='#fragment-<?=$count?>'>
<img class='thumb' src='<?=$row['imagelink']?>' alt='' />
<span><?=$row['title']?></span>
</a>
</li>
<?php endforeach ?>
</ul>
<?php foreach($rows as $count => $row): ?>
<div id='fragment-<?=$count?>' class='ui-tabs-panel' style=''>
<img src='<?=$row[imagelink]?>' alt='' />
<div class='info' >
<h2><a href='<?=$row['link']?>'><?=$row['title']?></a></h2>
<p><?=$row['description']?></p>
</div>
</div>
<?php endforeach ?>
See how it become concise and at the same time keeps all HTML as is.