I am trying to update td text values after an ajax call that updates some values. I am having issues trying to select the correct tr so I can add the values and I cant seem to get this one. I have tried using the index as this will be unique for the class as the selector but no luck. Any help would be appreciated. Thank you.
Here is what I have so far. HTML looks like this
<table id="EditTbl">
<thead>
<tr >
<th>
Date
</th>
<th>
BL Number
</th>
<th>
Pick Up Number
</th>
<th>
Carrier
</th>
<th>
Submitted By
</th>
<th>
Edit
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.ListOfCompleted)
{
<tr >
<td>
@Html.DisplayFor(modelItem => item.TrDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.BLNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.PickUpNo)
</td>
<td>
@Html.DisplayFor(modelItem => item.Carrier)
</td>
<td>
@Html.DisplayFor(modelItem => item.LogisticUser)
</td>
<td>
<button type="button" data-toggle="modal" data-target="#ModalTest" value="@item.BLNumber" id="ModalBtnAction">Edit</button>
</td>
</tr>
}
</tbody>
</table>
JS looks like this.
function SaveEditInfo(id,pickup,carrier) {
$.ajax({
type: "POST",
url: "/Loading/SaveEditInfo",
data: { id: id, pickup: pickup,carrier:carrier},
success: function (data) {
// Update values from Tr td with new information.
var tblRow = $("#EditTbl tbody tr." data.trIndex);
// Pickup
tblRow.eq(3).text(data.pickUpNo);
// Carrier
tblRow.eq(4).text(data.carrier);
// username
tblRow.eq(5).text(data.logisticUser);
}
});}
CodePudding user response:
it looks like you're updating something that doesn't exist.
you need to update the TD, not the TR.
// Update values from Tr td with new information.
var tblRow = $("#EditTbl tbody tr." data.trIndex);
var rowCols = tblRow.find("td");
// Pickup
rowCols.eq(3).text(data.pickUpNo);
// Carrier
rowCols.eq(4).text(data.carrier);
// username
rowCols.eq(5).text(data.logisticUser);