Note that there are some explanatory texts on larger screens.

plurals
  1. POI want to dynamically populate the tabs from an array using jquery
    primarykey
    data
    text
    <p>I want to dynamically populate the tabs from an array. please help me out. I tried the following code but it fails to work.</p> <p>how do I hardcode the values to be generated in an array??</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="ISO-8859-1"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt; &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt; &lt;title&gt;Dynamic Population&lt;/title&gt; &lt;script&gt; $(document).ready(function() { $("div#tabs").tabs(); $("button#add-tab").click(function() { var num_tabs = $("div#tabs ul li").length + 1; $("div#tabs ul").append( "&lt;li&gt;&lt;a href='#tab" + num_tabs + "'&gt;#" + num_tabs + "&lt;/a&gt;&lt;/li&gt;" ); $("div#tabs").append( "&lt;div id='tab" + num_tabs + "'&gt;#" + num_tabs + "&lt;/div&gt;" ); $("div#tabs").tabs("refresh"); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id='tabs'&gt; &lt;ul&gt; &lt;li&gt;&lt;a href='#tab1'&gt;#1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id='tab1'&gt;&lt;/div&gt; &lt;/div&gt; &lt;button id='add-tab'&gt;Add tab&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>now I want this array values to be generated as tabs.</p> <pre><code> &lt;script&gt; var i; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (i=0;i&lt;mycars.length;i++) { //here I need it as tabs, the code document.write(mycars[i] + "&lt;br&gt;"); } &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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