Databases
StackOverflow2013
Postsdbo
POjquery ui tabs and php echo out the data
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery ui tabs and php echo out the data
    text
    copied!<p>I am using <a href="http://jqueryui.com/demos/tabs/" rel="nofollow">jquery ui's tabs</a> </p> <p>And i want to make it dynamic by getting the tabs from a mysql database using php , but not sure how to add the fragment 1 , 2 , 3 according to the number of rows of the table i have. For example , there's 5 rows , that means there's 5 fragment. here's the html code for the jquery ui.</p> <pre><code>&lt;div id="featured" &gt; &lt;ul class="ui-tabs-nav"&gt; &lt;li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"&gt;&lt;a href="#fragment-1"&gt;&lt;img class="thumb" src="http://upload.wikimedia.org/wikipedia/en/thumb/0/0f/Avs38.jpg/250px-Avs38.jpg" alt="" /&gt;&lt;span&gt;15+ Excellent High Speed Photographs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="ui-tabs-nav-item" id="nav-fragment-2"&gt;&lt;a href="#fragment-2"&gt;&lt;img class="thumb" src="http://www.crunchbase.com/assets/images/original/0007/5132/75132v1.jpg" alt="" /&gt;&lt;span&gt;20 Beautiful Long Exposure Photographs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;!-- First Content --&gt; &lt;div id="fragment-1" class="ui-tabs-panel" style=""&gt; &lt;img src="image.jpg" alt="" /&gt; &lt;div class="info" &gt; &lt;h2&gt;&lt;a href="#" &gt;Loerm Ipsum&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....&lt;a href="#" &gt;read more&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Normally i would use this php code to echo out database </p> <pre><code> &lt;?php $rows = array(); while($row = mysql_fetch_array( $query )){ $rows[] = $row; echo "'Some html code data $row[image] test'\n"; } } ?&gt; </code></pre> <p>However if i use this code , it will generate a html like :</p> <pre><code>&lt;div id="fragment-1" class="ui-tabs-panel" style=""&gt; &lt;img src="image.jpg" alt="" /&gt; &lt;div class="info" &gt; &lt;h2&gt;&lt;a href="#" &gt;Loerm Ipsum&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....&lt;a href="#" &gt;read more&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="fragment-1" class="ui-tabs-panel" style=""&gt; &lt;img src="image2.jpg" alt="" /&gt; &lt;div class="info" &gt; &lt;h2&gt;&lt;a href="#" &gt;Loerm Ipsum2&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;L2222&lt;a href="#" &gt;read more&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>As you can see , it does not make the second fragment , fragment TWO.</p> <p>I want the results to be like this:</p> <pre><code>&lt;div id="fragment-1" class="ui-tabs-panel" style=""&gt; &lt;img src="image.jpg" alt="" /&gt; &lt;div class="info" &gt; &lt;h2&gt;&lt;a href="#" &gt;Loerm Ipsum&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....&lt;a href="#" &gt;read more&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="fragment-2" class="ui-tabs-panel" style=""&gt; &lt;img src="image2.jpg" alt="" /&gt; &lt;div class="info" &gt; &lt;h2&gt;&lt;a href="#" &gt;Loerm Ipsum2&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;L2222&lt;a href="#" &gt;read more&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>So how can i do this?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload