CODEWITHSUNDEEP
javascriptjquery
Michael DaSilva
Michael DaSilva

Reputation: 157

How can I append in Jquery with parent div having a dynamic id

I have a dynamic tab panel where everytime a user clicks add button it generates a new tab. So i need to increment the id of the tab-pane then load the data. I have it something working with Jquery ui like this 

$("button#add-tab").click(function(e) {
        e.preventDefault();

        var num_tabs = $("div#tabSequence ul li").length + 1;

        var tpl = $('#tabSeq').html();

        $("div#tabSequence ul").append(
            "<li><a data-toggle='tab' href='#tab" + num_tabs + "' >#" + num_tabs + "</a></li>"
        );
        $("div#tabContent").append(
            "<div class='tab-pane' id='tab" + num_tabs + "'>" + tpl + "</div>"

        );

but I will have to use jQuery .load() API so I don't think this will work:

 $("div#tabContent").append(
                "<div class='tab-pane' id='tab" + num_tabs + "'>" + tpl + "</div>"

and instead trying to do something like this with no success:

 $("div#tabContent").append(
            $( 'div .tab-pane #tab" + num_tabs + "').load( "sequenceTemplate.html" )
        );

How do I make a jQuery to create dive with ID of num_tabs then load() a div from another file? Which all SequenceTemplate.html has is a single div to load dynamically

Upvotes: 1

Views: 201

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

$("#add-tab").click(function(e) {
  e.preventDefault();

  var num_tabs = $("#tabSequence ul li").length + 1;

  $("<li/>", {
    html: "<a>#" + num_tabs + "</a>",
    appendTo: "#tabSequence ul"
  });

  $("<div/>", {
    class : "tab-pane",
    appendTo : "#tabContent",
    load : "http://output.jsbin.com/kivige/1.js"   //you use: "sequenceTemplate.html"
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add-tab">+ Add</button>
<div id="tabSequence"><ul></ul></div>
<div id="tabContent"></div>

jsBin example

Upvotes: 1

Related Questions