In javascript jquery html table is not displayed when appended through js

Question

I am appending data in table body through js but when calling the getInvManhistory() method in docment.ready() it shows the table with appended data but when I call it onClick of search button it shows blank table. I debugged the code the data is appended at beginning but it get blank at the end.

Advance thanks. Please help.

var invsorno = "";
$(document).ready(function() {
  // getInvManhistory(); When calling here the table gets displayed.

  $("#search").click(function() {
    alert("searchs");
    getInvManhistory(); //when calliung with search button table is shown empty
  });
  // get_workflow_history();
});

function getInvManhistory() {
  var tablebody = "";
  invsorno = $("#invSrNo").val(),
    $.cordys.ajax({
      method: 'SearchInvManDetails',
      parameters: {
        invseqno: invsorno,
        invtype: "",
        FromDate: "",
        ToDate: "",
      },
      async: false,
      cache: false,
      dataType: 'json',
      namespace: 'http://schemas.cordys.com/IM_DBMetaData',
      success: function(response) {
        if ($.isArray(response.tuple)) {
          var workflow_len = response.tuple.length;
          for (var i = 0; i < workflow_len; i++) {
            tablebody += "<tr>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
              "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
              "</tr>";
          }
        } else if ($.isEmptyObject(response.tuple)) {
          tablebody += "<tr align='center'>" +
            "<td colspan='6' style='color:red;font-weight:bold;'>Data Not Found</td>" +
            "</tr>";
        } else {
          tablebody += "<tr>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
            "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
            "</tr>";
        }
        $('#searchdetails tbody').html("");
        $('#searchdetails tbody').append(tablebody);
      }
    });
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">

  <link href="../JavaSources_CustomLibrary/jquery-ui-1.10.4.custom/css/base/jquery-ui-1.10.4.custom.css" rel="stylesheet">
  <script src="../JavaSources_CustomLibrary/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
  <script src="../JavaSources_CustomLibrary/jquery-ui-1.10.4.custom/js/jquery-ui.min.js"></script>
  <script src="/cordys/thirdparty/jquery/jquery.js" type="text/javascript"></script>
  <script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"></script>
  <script src='../IM_JSFiles/IM_Search.js' type='text/javascript'></script>
  <title>Search</title>
</head>

<style>
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<body>
  <div style="width: 60%; border: 1px solid gray; margin: 0 auto; overflow: hidden; background-color: gainsboro;">

    <div>
      <h3 style="background-color: red;text-align: left;color: #FFF;padding: 5px;">Investment Management Search Screen</h3>
      <div style="width: 60%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
        <form class="form-inline">
          <div style="width: 100%; padding: 10px 0px;">
            <div class="form-group" style="width: 48%;">
              <label for="invSrNo" style="width: 125px;">Inv Sr. No:</label>
              <input id="invSrNo" name="imInvSrNo" type="text">
            </div>
            <div class="form-group" style="width: 48%;">
              <label for="investmentType" style="width: 125px;">Investment Type:</label>
              <input id="investmentType" name="imInvestmentType" type="text">
            </div>
          </div>
          <div style="width: 100%; padding: 10px 0px;">
            <div class="form-group" style="width: 48%;">
              <label for="fromDate" style="width: 125px;">From Date:</label>
              <input id="fromDate" name="imFromDate" type="date">
            </div>
            <div class="form-group" style="width: 48%;">
              <label for="toDate" style="width: 125px;">To Date:</label>
              <input id="toDate" name="imToDate" type="date">
            </div>
          </div>
          <div style="width: 100%; padding: 10px 0px;">

            <div class="form-group" style="float: right;margin-right: 42px;">

              <button id="search" class="btn btn-danger btn-md">Search</button>
              <button id="view" class="btn btn-danger btn-md">View</button>
            </div>
          </div>

        </form>
      </div>
      <div style="width: 100%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
        <table style="width: 100%" id="searchdetails">

          <thead>
            <tr style="background-color: red; color: #FFF;">
              <th>Inv Sr.No</th>
              <th>Initiator Name</th>
              <th>Department</th>
              <th>Role</th>
              <th>Source WBC Code</th>
              <th>Target WBC Code</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody></tbody>

        </table>
      </div>
    </div>
  </div>
</body>

</html>

If default type of button element is submit then you should try with type="button", I think. — Bob Dust
– Bob Dust, Commented Nov 1, 2016 at 8:57
When I click on search the table gets generated but after $('#searchdetails tbody').html(""); $('#searchdetails tbody').append(tablebody); It automatically gets blank — Abdulsalam Khan
– Abdulsalam Khan, Commented Nov 1, 2016 at 8:59
It creates the table while debugging till $('#searchdetails tbody').html(tablebody); after this table gets blank — Abdulsalam Khan
– Abdulsalam Khan, Commented Nov 1, 2016 at 9:06

score 1 · Accepted Answer · 2016-11-01 09:32:38Z

Problem is that you are using jquery selector $ but not referencing jquery in your code so I just add jquery reference in code like.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Here is the complete working code

<!DOCTYPE html>
 <html>
<head>
<style>
th,
  td {
padding: 5px;
border: 1px solid black;
 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script>
  var invsorno = "";
 $(document).ready(function() {
 // getInvManhistory(); When calling here the table gets displayed.

$("#search").click(function() {
 alert("searchs");
getInvManhistory(); //when calliung with search button table is shown empty
 });
          // get_workflow_history();
   });

  function getInvManhistory() {
 var tablebody = "";
 invsorno = $("#invSrNo").val(),
  $.cordys.ajax({
  method: 'SearchInvManDetails',
  parameters: {
    invseqno: invsorno,
    invtype: "",
    FromDate: "",
    ToDate: "",
  },
  async: false,


cache: false,
  dataType: 'json',
  namespace: 'http://schemas.cordys.com/IM_DBMetaData',
  success: function(response) {
    if ($.isArray(response.tuple)) {
      var workflow_len = response.tuple.length;
      for (var i = 0; i < workflow_len; i++) {
        tablebody += "<tr>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
          "<td>" + response.tuple[i].old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
          "</tr>";
      }
    } else if ($.isEmptyObject(response.tuple)) {
      tablebody += "<tr align='center'>" +
        "<td colspan='6' style='color:red;font-weight:bold;'>Data Not Found</td>" +
        "</tr>";
    } else {
      tablebody += "<tr>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_SEQ_NO + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_INITIATOR_ID + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.DEPARTMENT + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.IM_ROLE + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.SOURCE_WBC_CODE + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.TARGET_WBC_CODE + "</td>" +
        "<td>" + response.tuple.old.INVESTMENTMANAGEMENT_DETAILS.STATUS + "</td>" +
        "</tr>";
    }
    $('#searchdetails tbody').html("");
    $('#searchdetails tbody').append(tablebody);
  }
});
 }
 </script>
</head>
<body>   <div style="width: 60%; border: 1px solid gray; margin: 0 auto; overflow:    hidden; background-color: gainsboro;">

<div>
  <h3 style="background-color: red;text-align: left;color: #FFF;padding: 5px;">Investment Management Search Screen</h3>
  <div style="width: 60%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
    <form class="form-inline">
      <div style="width: 100%; padding: 10px 0px;">
        <div class="form-group" style="width: 48%;">
          <label for="invSrNo" style="width: 125px;">Inv Sr. No:</label>
          <input id="invSrNo" name="imInvSrNo" type="text">
        </div>
        <div class="form-group" style="width: 48%;">
          <label for="investmentType" style="width: 125px;">Investment Type:</label>
          <input id="investmentType" name="imInvestmentType" type="text">
        </div>
      </div>
      <div style="width: 100%; padding: 10px 0px;">
        <div class="form-group" style="width: 48%;">
          <label for="fromDate" style="width: 125px;">From Date:</label>
          <input id="fromDate" name="imFromDate" type="date">
        </div>
        <div class="form-group" style="width: 48%;">
          <label for="toDate" style="width: 125px;">To Date:</label>
          <input id="toDate" name="imToDate" type="date">
        </div>
      </div>
      <div style="width: 100%; padding: 10px 0px;">

        <div class="form-group" style="float: right;margin-right: 42px;">

          <button id="search" class="btn btn-danger btn-md">Search</button>
          <button id="view" class="btn btn-danger btn-md">View</button>
        </div>
      </div>

    </form>
  </div>
  <div style="width: 100%;border: 1px solid gray;margin:0;overflow: hidden;padding: 5px;">
    <table style="width: 100%" id="searchdetails">

      <thead>
        <tr style="background-color: red; color: #FFF;">
          <th>Inv Sr.No</th>
          <th>Initiator Name</th>
          <th>Department</th>
          <th>Role</th>
          <th>Source WBC Code</th>
          <th>Target WBC Code</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody></tbody>

    </table>
  </div>
  </div>
 </div>
  </body>
 </html>

Screen Shot:

That's pretty cool, but the answer would benefit from a little explanation - what was the error? What did you change? Perhaps just show the bits that you fixed, rather than the complete code
Problem was that He was not referencing jquery but using $ in his code.
I tried with jquery.min.js but its not the solution..I just noticed that my html page is getting reloaded after $('#searchdetails tbody').append(tablebody); how to stop it from reloading
@freedomn-m I also tried that but things did'nt work.The page still gets reloaded
Sorry I am unable to understand what you want to acheive? the page reload when? I have tried your code after editing there is no reloading of page.

Collectives™ on Stack Overflow

In javascript jquery html table is not displayed when appended through js

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related