CODEWITHSUNDEEP
javascriptjqueryhtml
DevWithZachary
DevWithZachary

Reputation: 3675

Jquery table html outputting incorrectly

I have the below jQuery taking in the response from an AJAX request to build a table, however the each seems to get fired after the append below it, how do I insure that the table is not closed until the each is complete.

$.ajax({
    type: "POST",
    url: "api/getFirmTabletsDetails.php",
    data: "id=" + firmID,
    cache: false,
    dataType: "json",
    success: function(result)
    {
        var tabletArea = modal.find('#tablet-body');
        tabletArea.html("");
        tabletArea.append
        (
            '<div class="col-lg-12">
             <table class="table table-hover table-striped"><thead>
             <tr><th>Name</th><th>Status</th><th>Address</th></tr>
             </thead><tbody>'
        );
        if (result.success = 1)
        {
            $.each(result.request, function( index, value )
            {
                var address = value.Street + "<br>" + value.Street2 + "<br>" 
                              + value.Town + "<br>" + value.County +  "<br>" 
                              + value.Postcode;
                tabletArea.append('<tr><td>'+value.Name+
                '</td><td>'+value.Status+'</td><td>'+address+'</td></tr>');
            });
        }else{
            alert(result.error);
        }
        tabletArea.append('</tbody></table></div></div>');
    }
});

Output:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <div class="modal-body" id="tablet-body">
      <div class="col-lg-12">
        <table class="table table-hover table-striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Status</th>
              <th>Address</th>
            </tr>
          </thead>
        </table>
      </div>
      <table>
        <tr>
          <td>...</td>
          <td>...</td>
          <td>...
          <br />...
          <br />...
          <br />...
          <br />...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
          <td>...
          <br />...
          <br />...
          <br />...
          <br />...</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Upvotes: 0

Views: 49

Answers (1)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

You are using append method incorrectly.

As you can read in the official documentation, append( content ) takes a parameter which can be DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the end of each element in the set of matched elements. What you are doing here is passing pieces of strings repeatedly. You should instead pass the complete htmlString for the element that is to be appended. If you want to take an approach similar to what you are doing already, you can keep a string and keep adding elements to it. Once you are done, you can pass the string to your append(content) method once. Check the code given below: 

$.ajax({
    type: "POST",
    url: "api/getFirmTabletsDetails.php",
    data: "id=" + firmID,
    cache: false,
    dataType: "json",
    success: function(result){
        var tabletArea = modal.find('#tablet-body');
        tabletArea.html("");
        var htmlString = "";
        htmlString += '<div class="col-lg-12"><table class="table table-hover table-striped"><thead><tr><th>Name</th><th>Status</th><th>Address</th></tr></thead><tbody>';
        if (result.success = 1){
            $.each(result.request, function( index, value ) {

            var address = value.Street + "<br>" + value.Street2 + "<br>" + value.Town + "<br>" + value.County + "<br>" + value.Postcode;

            htmlString += '<tr><td>'+value.Name+'</td><td>'+value.Status+'</td><td>'+address+'</td></tr>';

            });
        }else{
            alert(result.error);
        }
        htmlString += '</tbody></table></div></div>';

        tabletArea.append( htmlString );

    }
    });

Upvotes: 2

Related Questions