CODEWITHSUNDEEP
jquerytwitter-bootstrap
KevinY
KevinY

Reputation: 1239

JQuery/bootstrap loading and appending a table

Got a massive multi-section form so decided to create a tbody and add sections to it. The following code and variations I try are not doing as I was expecting. Each section.html is a , e.g. 

  <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">

But each section added tends to replace the previous sections. I was expecting to add a number of table rows - e.g. append() - the way I am using it - is not working.. Any clues on how I can append chunks of html "<tr>...</tr>" to a <tbody>

Many thanks

Kevin

Code (not appending):

<legend>New Landlord License</legend>
<div class="control-group">
<div class="bs-example">
  <table class="table table-condensed" style="border-collapse:collapse;margin-bottom:0px;">
     <tbody id="tb" name="tb">
     </tbody>
  </table>
</div>
</div>
<script>
    $(document).ready(function() {
       $('#tb').load("./section1.html")
       $('#tb').append().load("./section2.html");
    });
</script>

Upvotes: 1

Views: 222

Answers (3)

Alexis Tyler
Alexis Tyler

Reputation: 949

I'd suggest you just loop through an array contaand append them. 

$(document).ready(function() {
    var pages = [1, 5, 7, 12];
    for(var i = 0; i < pages.length;i++){
        $.ajax({
            async: false,
            type: 'GET',
            url: "./section" + i +".html",
            success: function(data) {
                $('#tbls').append(data);
            }
        });
    }
});

Upvotes: 1

KevinY
KevinY

Reputation: 1239

Want to first say a big thanks to Beginner for putting me on track. I had to create a variation of my original by putting separate tables in the section code and not table rows. I used Beginner's help to solve this and put completed section below. The reason for that is because I stumbled upon a timing issue which could result in the sections appearing in the wrong order. 

<script>
$(document).ready(function() {
$.get("./section1.html",function(data){
   $('#tbls').append(data);
   $.get("./section2.html",function(data){
      $('#tbls').append(data);
      $.get("./section3.html",function(data){
         $('#tbls').append(data);
         $.get("./section4.html",function(data){
            $('#tbls').append(data);
            $.get("./section5.html",function(data){
               $('#tbls').append(data);
             });
          });
       });
    });
  });
});
</script>

Upvotes: 0

Abhishekh Gupta
Abhishekh Gupta

Reputation: 6236

You can try this:

$(document).ready(function() {
   $('#tb').load("./section1.html");
   $.get("./section2.html", function(data){
      $('#tb').append(data);
   });
});

Upvotes: 2

Related Questions