Why are the thead elements not applied?

Question

Well, I have created a table here with jQuery mobile:

<div data-role="page" id="PageOrderList" data-theme="b">
    <div data-role="header">
        <h1>Aufträge bearbeiten</h1>
        <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left ui-corner-all" data-rel="back">Zurück</a>
    </div>
    <div data-role="main" class="ui-content">
        <table data-role="table" id="OrderTable" data-name="myTable" class="ui-responsive">
            <thead>
                <tr>
                    <th>AuftragsNr.</th>
                    <th>Auftragskurztext</th>
                    <th>Langtext</th>
                </tr>
            </thead>
            <tbody id="myList">
                <tr id="8913">
                    <td>8913</td>
                    <td>Sonderauftrag</td>
                    <td>Das ist ein Sonderauftrag.</td>
                </tr>
                <tr id="1466">
                    <td>1466</td>
                    <td>Auftrag Fr. Schwarz</td>
                    <td>Ein Auftrag für Fr. Schwarz.</td>
                </tr>
                <!-- loaded by js -->
            </tbody>
        </table>
    </div>
    <div data-role="footer" align="center">
        <button id="ReloadOrderList" class="ui-btn ui-icon-recycle ui-btn-icon-left ui-corner-all">Aktualisieren</button>
    </div>
</div>

What I am now trying to do is load some new rows from a JSON formatted file. This is the file:

{
    "order": [{
        "orderId": "4412",
        "shortText": "Lieferung für Mayer",
        "longText": "Das ist eine Lieferung für Mayer."
    }, {
        "orderId": "7899",
        "shortText": "Bestellung für Schmidt",
        "longText": "Das ist eine Bestellng für Schmidt."
    }, {
        "orderId": "3981",
        "shortText": "Sonderauftrag",
        "longText": "Das ist ein Sonderauftrag."
    }]
}

I used the id="ReloadOrderList" with an event listener from jQuery. This is my code:

// Reload button PageOrderList
$("#ReloadOrderList").click(function() {
    $.getJSON("data/data.json", function(json) {
        console.log(json);
        var i;
        var out = "empty";
        console.log(json.order.length);

        for (i = 0; i < 3; i++) {
            out += "<tr id='json.order[i].orderId'><td>" + json.order[i].orderId + "</td><td>" + json.order[i].shortText + "</td>" + "<td>" + json.order[i].longText + "</td></tr>";
        }
        //document.getElementById("myList").innerHTML = out;
        $("#myList").append(out);
    });
});

When I pressed the button (ReloadOrderList) the new content is loaded, no problem, but the thead elements are not applied in front of the data. Here is an image to visualize my problem:

application

I hope that was enough info :D

Possible duplicate of [Add table row in jQuery](http://stackoverflow.com/questions/171027/add-table-row-in-jquery) — tafa, Nov 28 '16 at 15:57

score 0 · Accepted Answer · answered Nov 28 '16 at 16:21

After adding new rows, you want to refresh the table via a call to .table("refresh").

You can also see a demo here jQuery Mobile Demo

$("#ReloadOrderList").click(function() {
  
  // simulated getJSON()
  var json = {
    "order": [
      { "orderId": "4412", "shortText": "Lieferung für Mayer", "longText": "Das ist eine Lieferung für Mayer." },
      { "orderId": "7899", "shortText": "Bestellung für Schmidt", "longText": "Das ist eine Bestellng für Schmidt." },
      { "orderId": "3981", "shortText": "Sonderauftrag", "longText": "Das ist ein Sonderauftrag." }
    ]
  };

  var out = "empty";

  for (i = 0; i < 3; i++) {
    out += "<tr id='json.order[i].orderId'><td>" + json.order[i].orderId + "</td><td>" + json.order[i].shortText + "</td>" + "<td>" + json.order[i].longText + "</td></tr>";
  }

  $("#myList").append(out);

  // ==========================
  // This is what you need
  // ==========================
  $("#myList").closest("table").table("refresh");
  // ==========================

});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" integrity="sha256-ofETIFmuKXiVQil+cQ1tReYDB/lh0lrMyxLdsw+NG8w=" crossorigin="anonymous" />

<div data-role="page" id="PageOrderList" data-theme="b">
    <div data-role="header">
        <h1>Aufträge bearbeiten</h1>
        <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left ui-corner-all" data-rel="back">Zurück</a>
    </div>
    <div data-role="main" class="ui-content">
        <table data-role="table" id="OrderTable" data-name="myTable" class="ui-responsive">
            <thead>
                <tr>
                    <th>AuftragsNr.</th>
                    <th>Auftragskurztext</th>
                    <th>Langtext</th>
                </tr>
            </thead>
            <tbody id="myList">
                <tr id="8913">
                    <td>8913</td>
                    <td>Sonderauftrag</td>
                    <td>Das ist ein Sonderauftrag.</td>
                </tr>
                <tr id="1466">
                    <td>1466</td>
                    <td>Auftrag Fr. Schwarz</td>
                    <td>Ein Auftrag für Fr. Schwarz.</td>
                </tr>
                <!-- loaded by js -->
            </tbody>
        </table>
    </div>
    <div data-role="footer" align="center">
        <button id="ReloadOrderList" class="ui-btn ui-icon-recycle ui-btn-icon-left ui-corner-all">Aktualisieren</button>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js" integrity="sha256-E3NHJIUaclYHEQ6uRnkvD72rAmbJYVJ92sCOU/0Rd7s=" crossorigin="anonymous"></script>

Why are the thead elements not applied?

1 Answers1