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
Post a Comment