CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
ack_ilost
ack_ilost

Reputation: 3

Dynamically create html for jQuery tabs

I'm trying to write a page while creating almost all of the html via javascript. I want to use jQuery Tabs in my project. The content gets created, but the tabs are not showing. Is this a CSS issue?

function buildDocument() {

    var tabsContainer = document.getElementById("tabs");

    tabsContainer.innerHTML = "";

    var uList = document.createElement("ul"); 

    var li1 = document.createElement("li");
    var li2 = document.createElement("li");

    li1.innerHTML = '<a href="#tabs-1">One</a>';
    li2.innerHTML = '<a href="#tabs-2">One</a>';

    uList.appendChild(li1);
    uList.appendChild(li2);

    var t1 = document.createElement("div");
    var t2 = document.createElement("div");

    t1.id = "tabs-1";
    t2.id = "tabs-2";

    t1.innerHTML = "Tab1";
    t2.innerHTML = "Tab2";

    tabsContainer.appendChild(uList);
    tabsContainer.appendChild(t1);
    tabsContainer.appendChild(t2);

    $( "#tabs" ).tabs();
}

And the HTML:

<!doctype html>
<html>
    <head>
        <script src="main.js"></script>
        <script type="text/javascript" src="external/jquery/jquery.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <link href="jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body onload="buildDocument();">
        <div id="tabs">
        </div>
    </body>
</html>

The jQuery files I've downloaded from their website here (everything as default): http://jqueryui.com/download/

This is what I get

Upvotes: 0

Views: 3904

Answers (3)

gaetanoM
gaetanoM

Reputation: 42054

Your code works for me.

My include are:

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js">
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js">


function buildDocument() {

  var tabsContainer = document.getElementById("tabs");

  tabsContainer.innerHTML = "";

  var uList = document.createElement("ul");

  var li1 = document.createElement("li");
  var li2 = document.createElement("li");

  li1.innerHTML = '<a href="#tabs-1">One</a>';
  li2.innerHTML = '<a href="#tabs-2">One</a>';

  uList.appendChild(li1);
  uList.appendChild(li2);

  var t1 = document.createElement("div");
  var t2 = document.createElement("div");

  t1.id = "tabs-1";
  t2.id = "tabs-2";

  t1.innerHTML = "Tab1";
  t2.innerHTML = "Tab2";

  tabsContainer.appendChild(uList);
  tabsContainer.appendChild(t1);
  tabsContainer.appendChild(t2);

  $( "#tabs" ).tabs();
}
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<body onload="buildDocument();">
<div id="tabs">
</div>
</body>

Upvotes: 1

Vixed
Vixed

Reputation: 3509

DEMO

Your codes works good for me. The only thing i changed is:

<script type="text/javascript">
$(function(){
    buildDocument();
})
</script>

instead of <body onload="buildDocument();"> but is not necessary. You must load your jqueryui stuff from the right url. Take a look at https://code.jquery.com/ui/ for all the version.

If you are including jQuery, why don't you consider to short the code of your function.

An example:

function buildDocument() {
    var tabsContainer = $('#tabs');
    tabsContainer.empty();
    var linkOne = '<li><a href="#tabs-1">One</a></li>';
    var linkTwo = '<li><a href="#tabs-2">One</a></li>';
    var t1 ='<div id="tabs-1">Tab1</div>';
    var t2 ='<div id="tabs-2">Tab2</div>';
    tabsContainer.append('<ul>'+linkOne+linkTwo+'</ul>')
    tabsContainer.append('<div>'+t1+t2+'</div>');
    tabsContainer.tabs();
}

You can also works with array stuff like:

var links=["tab-1","tab-2"];
var tabPg=["Tab1","Tab2"];

Upvotes: 1

Ohsik
Ohsik

Reputation: 261

is jquery-ui.css loading properly? Try Google hosted library

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

If jquery-ui.css is loading properly, you should see the default style. Also make sure your HTML is rendered in a right format as https://jqueryui.com/tabs/.

Upvotes: 0

Related Questions