Как перебирать данные извлекать строку и отображать ее в модальном текстовом поле при нажатии кнопки с помощью ajax
У меня есть datatable, который я загрузил с записями, я хочу иметь возможность нажать на кнопку строки, кнопка строки отобразит модальный диалог, заполнит модальные текстовые поля соответствующими значениями строки с помощью объекта Ajax.
я хочу, чтобы если пользователь нажмет на кнопку редактирования в datatable, то появится модальный диалог с соответствующей записью строки, я пробовал несколько исследований в интернете, но мне не удалось реализовать это, раздел в моей функции ajax показывает, что я пробовал, что не работает. Любая помощь будет оценена по достоинству
Что я уже пробовал:
Моя Функция Ajax:
<script type="text/javascript">
$(document).ready(function () {
var table = $("#tblAppointment").DataTable();
$("#UpdateButton").click(function () {
$.ajax({
url: '/Appointment/EditPatientAppointment/',
type: "POST",
data: JSON.stringify({ AppointmentIdEdit: $("#AppointmentIdEdit").val(), appointmentDate: $(".datetimepickerEdit").val(), patientRegNo: $("#patientRegNoEdit").val(), reasons: $("#reasonsEdit").val() }),
cache: false,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (_data) {
$(".spina").hide();
//$("#patientRegNo").text(_data.MatricRegNo + " " + _data.PatientName)
if (_data.f !== undefined) {
swal({
title: "Failed!",
text: _data.f,
type: "info"
});
table = $("#tblAppointment").DataTable();
return false;
}
else {
swal({
title: "Success!",
text: _data.s,
type: "success"
});
}
table = $("#tblAppointment").DataTable();
// return false;
var arr = $.map(JSON.parse(_data.data), function (el) { return el });
if (arr.length === 0) {
swal({
title: "No Record Found!",
text: _data.f,
type: "info"
});
table = $("#tblAppointment").DataTable();
return false;
}
table.clear();
table.destroy();
$('#tblAppointment').dataTable({
data: arr,
columns: [
{ "data": "MatricRegNo" },
{ "data": "PatientName" },
{ "data": "EntryDate" },
{ "data": "AppointmentDate" },
{ "data": "Reasons" },
{
"data": function (data, type, row, meta) {
return '<span class="btn btn-info btn-sm edit" data-toggle="modal" data-target="#modal-Edit"></span>';
//My code to retrieve and display on modal text fields starts here
$(".editA[data-target='#modal-Edit']").click(function () {
var columnHeadings = $("thead th").map(function () {
return $(this).text();
}).get();
columnHeadings.pop();
var columnValues = $(this).parent().siblings().map(function () {
return $(this).text();
}).get();
var myModal = $('#modal-Edit');
$('#AppointmentIdEdit', myModal).val(data.MatricRegNo);
$('#patientRegNoEdit', myModal).val(data.MatricRegNo);
$('.appointmentDateEdit', myModal).val(data.AppointmentDate);
$('#reasonsEdit', myModal).val(data.Reasons);
console.log("Column Values: " + data.Reasons);
myModal.modal({ show: true });
return false;
});
//My code to retrieve and display on modal text fields ends here
}
}
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel',
{
extend: 'pdfHtml5',
orientation: 'Portriat',
pageSize: 'A4'
}
]
});
table = $("#tblAppointment").DataTable();
}
});
});
});
Мой Модальный Код:
<div class="modal fade" id="modal-Edit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Edit Appointments</h4>
</div>
@using (Html.BeginForm())
{
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label id="lblAppointmentIdEdit" class="control-label col-md-2" style="display:none;">AppointmentId:</label>
<div class="col-md-10">
<input type="text" value="" id="AppointmentIdEdit" name="AppointmentIdEdit" class="form-control appointmentIdEdit" style="display:none;" />
</div>
</div>
<div class="form-group">
<label id="lblPatientRegNoEdit" class="control-label col-md-2">RegNo:</label>
<div class="col-md-10">
<input type="text" value="" id="patientRegNoEdit" name="patientRegNoEdit" class="form-control patientRegNoEdit" readonly/>
</div>
</div>
<div class="form-group">
<label id="appointmentDateEdit" class="control-label col-md-2">Date:</label>
<div class="col-md-10">
<div class='input-group date' id='datetimepickerEdit'>
<input type='text' class="form-control datetimepickerEdit" id="appointmentDateEdit" name="appointmentDateEdit" value="" />
<span class="input-group-addon datetimepicker-addonEdit">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<label id="lblReasonsEdit" class="control-label col-md-2">Reason(s):</label>
<div class="col-md-10">
<textarea rows="4" cols="50" id="reasonsEdit" name="reasonsEdit" class="form-control reasonsEdit"></textarea>
</div>
</div>
</div>
</div>
}
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" id="UpdateButton" name="UpdateButton" class="btn btn-primary update">Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
F-ES Sitecore
"Не работает" не дает никому достаточно информации, чтобы помочь вам. Вы бы позвонили механику и сказали: "моя машина не работает, как мне ее починить?"
Используйте отладчик для пошагового просмотра вашего кода, чтобы выяснить, как далеко он заходит, что он делает, чего вы не хотите, или не делает того, что вы делаете. Посмотрите на вкладку Сеть, если Ваш браузер использует инструменты, чтобы увидеть, вызываются ли URL-адреса или нет, и посмотрите, что отправляется и возвращается. Эти шаги дадут вам лучшее представление о том, что происходит, а что нет.
Uwakpeter
Спасибо вам, сэр, за ваш комментарий, Я думал, что это достаточно объяснимо.
У меня есть кнопка редактирования данных для каждой строки, Я хочу, чтобы, если я нажму на кнопку редактирования, модальное шоу с соответствующей записью строки для редактирования, как это работает сейчас, модальное будет отображаться довольно хорошо, если я нажму на кнопку редактирования, но я не смог заполнить модальные текстовые поля соответствующей записью строки для редактирования. Надеюсь, на этот раз я смог хорошо объяснить.
Richard Deeming
Погоди - ка, разве это не так тот же самый вопрос, который вы опубликовали несколько дней назад[^], который ты сказал, что все решил.[^]?
Uwakpeter
No, the one I solved was different, initially when the datatable is loaded, if I click on the edit button, the modal displays with the row record populated on the modal input fields, at this point, the insert and update modal works perfectly fine, this was the one I solve. I have another button for insert, and I am using ajax for the insert and edit, I wanted to able insert, update and display the new record in real time without having to refresh the page to see the new changes, I was able to achieve this, the issue I am having is that, after that first insert or update is done, I rebound the datatable using ajax so that the new inserted or updated record should reflect on the datatable immediately. It is after this first insert or update has been done, that if I clicked on the edit button that the modal will display with empty fields. I have tried to resolve this, but I couldn't get it to work.