У меня есть таблица данных, загруженная с записями, я хочу иметь возможность нажимать кнопку строки, кнопка строки отображает модальное диалоговое окно, заполняет модальные текстовые поля соответствующими значениями строки, используя объект 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"><i class="fa fa-edit"></i></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>