Dialog is always blank on first click

Question

I am pulling data from WebAPI and trying to display in a table format in a dialog. WebAPI is called on a btton click. On the first click, the dialog always is blank. From the second click onwards, i can see the data iun tabular format. On the first click ,i can see that the data is coming through from WebAPI. It still shows a blank dialog. What can i do tix this issue?

Thanks in Advance

<input id="prevApps" type="button" value="Previous Apps" 
class="divHHoldRowPmtEditinput" onclick="LoadPreviousApplications();" />

function openDialogPrevApps(titlemessage) {
$(document.body).append('<div id="gridPreviousApps"></div>');
$(document.body).append('<table id="tblPrevApps"></table>');
$('#gridPreviousApps').dialog({
autoOpen: false,
hide: "false",
title: titlemessage,
width: 800,
buttons: {
'Ok': function () {
$(this).dialog('close');
}
}
});

$('#gridPreviousApps').dialog("open");
}


function LoadPreviousApplications() {
var hHoldtext = getSelectedHouseholdIDFromUC(); 
var loginPar = {
UserName: 'myUser',
CompanyID: 'myCompany',
HouseholdID: hHoldtext,
ProgramID: ''
}

$.ajax({
type: 'POST',
url: '/api/Payment/GetPreviousApplications',
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(loginPar),
success: function (data) {
var divRow = '';
$("#tblPrevApps tr").remove();
$('#tblPrevApps').append($('<tr>')
.append($('<th>').append("ApplicationID"))
.append($('<th>').append("ApplicationDate"))
.append($('<th>').append("Household"))
.append($('<th>').append("ClientName"))
.append($('<th>').append("Status"))
.append($('<th>').append("StatusDate"))
.append($('<th>').append("ServiceItem"))
)
$.each(data, function (i, item) {
$('#tblPrevApps').append($('<tr>')
.append($('<td 
class="divModalDialogSpanColumn">').append(item.ApplicationID))
.append($('<td 
class="divModalDialogSpanColumn">').append(item.ApplicationDate))
.append($('<td 
class="divModalDialogSpanColumn">').append(item.HouseholdID))
.append($('<td 
class="divModalDialogSpanColumn">').append(item.ClientName))
.append($('<td class="divModalDialogSpanColumn">').append(item.Status))
.append($('<td 
class="divModalDialogSpanColumn">').append(item.StatusDate))
.append($('<td 
class="divModalDialogSpanColumn">').append(item.ServiceItem))
)
});
$('#gridPreviousApps').append($('#tblPrevApps'));
openDialogPrevApps('Previous Applications');
},
failure: function (data) {
},
error: function (data) {
}
});
}

Answer 1

Consider the following code.

var tempData = [{
  ApplicationID: 1,
  ApplicationDate: "02/11/2019",
  HouseholdID: 1,
  ClientName: "Test App",
  Status: "Active",
  StatusDate: "01/01/2019",
  ServiceItem: "None"
}, {
  ApplicationID: 100,
  ApplicationDate: "02/11/2019",
  HouseholdID: 42,
  ClientName: "Test Client",
  Status: "Active",
  StatusDate: "01/01/2019",
  ServiceItem: "Full"
}, {
  ApplicationID: 999,
  ApplicationDate: "02/10/2019",
  HouseholdID: 123,
  ClientName: "Simpsons",
  Status: "Active",
  StatusDate: "01/01/2019",
  ServiceItem: "Duff"
}];

$(function() {
  function populateTable(tObj, tData) {
    var headers = Object.keys(tData[0]);
    tObj.html("");
    var head = $("<thead>").appendTo(tObj);
    $("<tr>").appendTo(head);
    $.each(headers, function(k, v) {
      $("tr", head).append($("<th>").html(v));
    });
    var body = $("<tbody>").appendTo(tObj);
    $.each(tData, function(k, v) {
      var row = $("<tr>").appendTo(body);
      $.each(headers, function(j, h) {
        $("<td>", {
          class: "divModalDialogSpanColum"
        }).html(v[h]).appendTo(row);
      });
    });
  }

  function openDialogPrevApps(diagTitle, tableData) {
    var gridDiag = $('<div>', {
      title: diagTitle,
      id: "gridPreviousApps"
    }).appendTo($("body"));
    var gridTable = $('<table>', {
      id: "tblPrevApps"
    }).appendTo(gridDiag);
    gridDiag.dialog({
      autoOpen: false,
      hide: "false",
      width: 800,
      buttons: {
        'Ok': function() {
          $(this).dialog('close');
          gridDiag.remove();
        }
      }
    });
    populateTable(gridTable, tableData);
    $('#gridPreviousApps').dialog("open");
  }

  function loadPreviousApplications() {
    /* AJAX Code
      Place your AJAX Code to collect data here.
      When ready, pass the data to the operner
    */
    openDialogPrevApps('Previous Applications', tempData);
  }

  $("#prevApps").click(loadPreviousApplications);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="prevApps" type="button" value="Previous Apps" class="divHHoldRowPmtEditinput" />

Breaking up the functions a bit more, you can make better use of them and use them at different times. In your load function, you will just need to collect the data and pass it to the open dialog function.

Hope that helps.