Thanks for the response and sorry for delay as well as vagueness. I appreciate the example, but need to address my specifics. Let's start with some HTML:
I have posted parts of this in the past. Each row of the table represents value pairs that need to be recorded together a corresponding row in a table, with some additional processing at the time of insert. In this particular scenario, this table is placed
inside a jQuery dialog and one link will save all rows in the table. Here is the jQuery I am using:
$(document).ready(function () {
populatehearingresults(visitid);
//
$("#divhearingresults").dialog({
autoOpen: false,
width: 'auto',
modal: true,
position: { my: "center", at: "center", of: window },
buttons: {
"Close": function () {
$("#divhearingresults").dialog('close');
},
"Save": function () {
var visitid = $(this).data('visitid');
var i = 0;
var table = '';
$('#tblhearinginput tr').each(function () {
if (i != 0) {
var left = $(this).find("select[id^='ddlleft']");
var right = $(this).find("select[id^='ddlright']");
var Frequency = left.attr("id").split("left")[1];
var jqxhr = $.post('api/PatientEncounter/InserthearingResults/', {
"VisitID": visitid,
"Frequency": Frequency,
"DbRight": right.val(),
"DbLeft": left.val(),
"EnteredBy": $.trim($("#ddlhearingenteredby").val())
}
)
.done(
function () {
// I tried this, but dind't work
//populatehearingresults(visitid);
}
);
}
i++;
});
populatehearingresults(visitid);
//
//
$("#divhearingresults").dialog('close');
}
}
});
//
$("body").on("click", ".lnknewhearingresults",
function () {
//alert('click')
$("#divhearingresults").dialog('open');
$("#divhearingresults").data('visitid', visitid);
$("#divhearingresults").dialog('open');
return false;
});
});
//
function populatehearingresults(visitid) {
//alert('got here')
var $tblhearingresults = $('#tblhearingresults');
$tblhearingresults.empty();
$tblhearingresults.append('<caption>Hearing Results</caption>');
var rowheader = '';
rowheader = rowheader + ' <tr>';
rowheader = rowheader + '<th>Frequency</th>'
rowheader = rowheader + '<th>Db Right</th>'
rowheader = rowheader + '<th>Db Left</th>'
rowheader = rowheader + '<th>Entered By</th>'
rowheader = rowheader + '<th>Time Entered</th>'
rowheader = rowheader + ' </tr>';
$tblhearingresults.append(rowheader);
var uri = 'api/PatientEncounter/GethearingResultsByVisitID/' + visitid;
$.getJSON(uri)
.done(function (response) {
alert(response.length);
if (response.length == 0) {
var nullrow = '<tr><td colspan="5">No hearing Results.</td></tr>'
$tblhearingresults.append(nullrow);
}
for (var i = 0; i < response.length; i++) {
var timeentered = response[i].TimeEntered;
timeentered = moment(timeentered);
timeentered = timeentered.format("MM/DD/YYYY, h:mm:ss a");
var detailrow = '';
detailrow = detailrow + ' <tr>';
detailrow = detailrow + '<td>' + response[i].Frequency + '</td>'
detailrow = detailrow + '<td>' + response[i].DbRight + '</td>'
detailrow = detailrow + '<td>' + response[i].DbLeft + '</td>'
detailrow = detailrow + '<td>' + response[i].EnteredBy + '</td>'
detailrow = detailrow + '<td>' + timeentered + '</td>'
detailrow = detailrow + ' </tr>';
$tblhearingresults.append(detailrow);
}
});
}
The WebApi controller looks like:
<HttpPost>
<Route("api/PatientEncounter/InsertHearingResults/")>
Function InsertHearingResults(<FromBody()> ByVal model As tbl_Log_HearingTestResults)
Try
Dim VisitID As Integer = model.VisitID
Dim EnteredBy As String = model.EnteredBy
Dim Frequency As Integer = 0
Dim DbRight As Integer = 0
Dim DbLeft As Integer = 0
If Not (String.IsNullOrEmpty(model.Frequency)) Then
Frequency = model.Frequency
End If
If Not (String.IsNullOrEmpty(model.DbRight)) Then
DbRight = model.DbRight
End If
If Not (String.IsNullOrEmpty(model.DbLeft)) Then
DbLeft = model.DbLeft
End If
' Code to insert to database
Catch ex As Exception
End Try
End Function
I'm trying to get this working like a desktop application where the save occurs, the dialog closes and the main page displays the data inserted. Under the current code sample ( and back to my original post), the function populatehearingresults(visitid)
function only displays approximately 5 datarows when there should be 9. So, to my original question, the time to loop through each row and insert seems to not work ( I think due to the asynchronous calls) when I try to follow the inserts with the api call
to update the display. It appears in your example you return the updated dataset directly from the post rather than separating into a separate api, but I don't think this is the problem. So I also anticipate the same problem with lengthy questionnaire lists
and am not sure how to handle this problem. Any help is appreciated.
Member
308 Points
1663 Posts
Re: Ajax Or Form Post
Nov 14, 2017 02:26 AM|kmcnet|LINK
Thanks for the response and sorry for delay as well as vagueness. I appreciate the example, but need to address my specifics. Let's start with some HTML:
<table id="tblhearinginput"> <tr> <th>Frequesncy</th> <th>Right Db.</th> <th>Left Db.</th> </tr> <tr> <td> 250 </td> <td> <select id="ddlright250"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> <td> <select id="ddlleft250"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> </tr> <tr> <td> 500 </td> <td> <select id="ddlright500"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> <td> <select id="ddlleft500"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> </tr> <tr> <td> 750 </td> <td> <select id="ddlright750"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> <td> <select id="ddlleft750"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> </tr> <tr> <td> 1000 </td> <td> <select id="ddlright1000"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> <td> <select id="ddlleft1000"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> </tr> <tr> <td> 1500 </td> <td> <select id="ddlright1500"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> <td> <select id="ddlleft1500"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> </tr> <tr> <td> 2000 </td> <td> <select id="ddlright2000"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> <td> <select id="ddlleft2000"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> </tr> <tr> <td> 3000 </td> <td> <select id="ddlright3000"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> <td> <select id="ddlleft3000"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> </tr> <tr> <td> 4000 </td> <td> <select id="ddlright4000"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> <td> <select id="ddlleft4000"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> </tr> <tr> <td> 6000 </td> <td> <select id="ddlright6000"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> <td> <select id="ddlleft6000"> <option value="0">NC</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> <option value="30" selected>30</option> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> <option value="50">50</option> <option value="55">55</option> <option value="60">60</option> </select> </td> </tr> </table>I have posted parts of this in the past. Each row of the table represents value pairs that need to be recorded together a corresponding row in a table, with some additional processing at the time of insert. In this particular scenario, this table is placed inside a jQuery dialog and one link will save all rows in the table. Here is the jQuery I am using:
$(document).ready(function () { populatehearingresults(visitid); // $("#divhearingresults").dialog({ autoOpen: false, width: 'auto', modal: true, position: { my: "center", at: "center", of: window }, buttons: { "Close": function () { $("#divhearingresults").dialog('close'); }, "Save": function () { var visitid = $(this).data('visitid'); var i = 0; var table = ''; $('#tblhearinginput tr').each(function () { if (i != 0) { var left = $(this).find("select[id^='ddlleft']"); var right = $(this).find("select[id^='ddlright']"); var Frequency = left.attr("id").split("left")[1]; var jqxhr = $.post('api/PatientEncounter/InserthearingResults/', { "VisitID": visitid, "Frequency": Frequency, "DbRight": right.val(), "DbLeft": left.val(), "EnteredBy": $.trim($("#ddlhearingenteredby").val()) } ) .done( function () { // I tried this, but dind't work //populatehearingresults(visitid); } ); } i++; }); populatehearingresults(visitid); // // $("#divhearingresults").dialog('close'); } } }); // $("body").on("click", ".lnknewhearingresults", function () { //alert('click') $("#divhearingresults").dialog('open'); $("#divhearingresults").data('visitid', visitid); $("#divhearingresults").dialog('open'); return false; }); }); // function populatehearingresults(visitid) { //alert('got here') var $tblhearingresults = $('#tblhearingresults'); $tblhearingresults.empty(); $tblhearingresults.append('<caption>Hearing Results</caption>'); var rowheader = ''; rowheader = rowheader + ' <tr>'; rowheader = rowheader + '<th>Frequency</th>' rowheader = rowheader + '<th>Db Right</th>' rowheader = rowheader + '<th>Db Left</th>' rowheader = rowheader + '<th>Entered By</th>' rowheader = rowheader + '<th>Time Entered</th>' rowheader = rowheader + ' </tr>'; $tblhearingresults.append(rowheader); var uri = 'api/PatientEncounter/GethearingResultsByVisitID/' + visitid; $.getJSON(uri) .done(function (response) { alert(response.length); if (response.length == 0) { var nullrow = '<tr><td colspan="5">No hearing Results.</td></tr>' $tblhearingresults.append(nullrow); } for (var i = 0; i < response.length; i++) { var timeentered = response[i].TimeEntered; timeentered = moment(timeentered); timeentered = timeentered.format("MM/DD/YYYY, h:mm:ss a"); var detailrow = ''; detailrow = detailrow + ' <tr>'; detailrow = detailrow + '<td>' + response[i].Frequency + '</td>' detailrow = detailrow + '<td>' + response[i].DbRight + '</td>' detailrow = detailrow + '<td>' + response[i].DbLeft + '</td>' detailrow = detailrow + '<td>' + response[i].EnteredBy + '</td>' detailrow = detailrow + '<td>' + timeentered + '</td>' detailrow = detailrow + ' </tr>'; $tblhearingresults.append(detailrow); } }); }The WebApi controller looks like:
<HttpPost> <Route("api/PatientEncounter/InsertHearingResults/")> Function InsertHearingResults(<FromBody()> ByVal model As tbl_Log_HearingTestResults) Try Dim VisitID As Integer = model.VisitID Dim EnteredBy As String = model.EnteredBy Dim Frequency As Integer = 0 Dim DbRight As Integer = 0 Dim DbLeft As Integer = 0 If Not (String.IsNullOrEmpty(model.Frequency)) Then Frequency = model.Frequency End If If Not (String.IsNullOrEmpty(model.DbRight)) Then DbRight = model.DbRight End If If Not (String.IsNullOrEmpty(model.DbLeft)) Then DbLeft = model.DbLeft End If ' Code to insert to database Catch ex As Exception End Try End FunctionI'm trying to get this working like a desktop application where the save occurs, the dialog closes and the main page displays the data inserted. Under the current code sample ( and back to my original post), the function populatehearingresults(visitid) function only displays approximately 5 datarows when there should be 9. So, to my original question, the time to loop through each row and insert seems to not work ( I think due to the asynchronous calls) when I try to follow the inserts with the api call to update the display. It appears in your example you return the updated dataset directly from the post rather than separating into a separate api, but I don't think this is the problem. So I also anticipate the same problem with lengthy questionnaire lists and am not sure how to handle this problem. Any help is appreciated.