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"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></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

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.