I want to dynamically populate the tabs from an array using jquery -


i want dynamically populate tabs array. please me out. tried following code fails work.

how hardcode values generated in array??

<!doctype html> <html> <head> <meta charset="iso-8859-1"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  <title>dynamic population</title>  <script> $(document).ready(function() {     $("div#tabs").tabs();      $("button#add-tab").click(function() {          var num_tabs = $("div#tabs ul li").length + 1;          $("div#tabs ul").append(             "<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"         ); $("div#tabs").append(             "<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>"         );         $("div#tabs").tabs("refresh");     });                     }); </script> </head> <body> <div id='tabs'>     <ul>         <li><a href='#tab1'>#1</a></li>     </ul>     <div id='tab1'></div> </div> <button id='add-tab'>add tab</button> </body> </html> 

now want array values generated tabs.

    <script>     var i;     var mycars = new array();     mycars[0] = "saab";     mycars[1] = "volvo";     mycars[2] = "bmw";      (i=0;i<mycars.length;i++)     { //here need tabs, code     document.write(mycars[i] + "<br>");     }     </script> 

you missing jqueryui library in page

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css"> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script> 

demo: plunker


Comments

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -