Vfrdtyky

I have a datatable i loaded with records, i want to be able to click on a row button, the row button will display a modal dialog, populate the modal text fields with corresponding row values using Ajax object.

i want if a user clicks on the edit button on the datatable, a modal dialog will display with the corresponding row record, i have tried a few research online, but i have not been able to implement this, any assistance will be appreciated

My Ajax function:

<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();

            }

        });

    });

});

My Modal Code:

 <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">&times;</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>