Диалог всегда пуст при первом клике - PullRequest
Новая
       18

Диалог всегда пуст при первом клике

0 голосов
/ 11 февраля 2019

Я извлекаю данные из WebAPI и пытаюсь отобразить их в виде таблицы в диалоговом окне.WebAPI вызывается нажатием кнопки btton.При первом щелчке диалоговое окно всегда пусто.Начиная со второго щелчка, я вижу табличный формат данных.По первому щелчку я вижу, что данные поступают из WebAPI.Это все еще показывает пустой диалог.Что я могу сделать, чтобы решить эту проблему?

Заранее спасибо 

<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) {
}
});
}

1 Ответ

0 голосов
/ 12 февраля 2019

Рассмотрим следующий код. 

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" />

Немного разбив функции, вы можете лучше их использовать и использовать их в разное время.В вашей функции загрузки вам просто нужно собрать данные и передать их в функцию открытия диалога.

Надеюсь, это поможет.

...