How to send the selected row id by clicking an edit button to show a modal

elenora

Hi. I'm implementing asp.net core 3.1 and i'm using DataTable 1.10.21 to show my records. Each record has an edit button and by clicking it should show a modal popup showing some fields filled with relevant data'

jQuery(document).ready(function ($) {

    $("#myDummyTable").DataTable({

        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false,

        "ajax": {
            "url": "MyData/GetData",
            "type": "POST",
            "datatype": "json",
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],

        rowId: "id",
      select: true,

         "columns": [
            { "data": "id", "name": "Id", "autoWidth": true },

             { "data": "startDate", "name": "StartDate", "autoWidth": true },
             { "data": "endDate", "name": "EndDate", "autoWidth": true }

             {
                 "data": "id",
                 "searchable": false,
                 "sortable": false,
                 render: function (data, type, row, meta) {

                     return  <a onclick="showInPopup('@Url.Action("AddOrEdit","MyData")?id=' + data + ',Context.Request.Scheme)','edit')"'></a>"; 
                 }
             }

        ]

    });

site.js:

showInPopup = (url, title) => {
try {
$.ajax({
type: 'GET',
url: url,
contentType: false,
processData: false,

    success: function (res) {

        $('#form-modal .modal-body').html(res);

        $('#form-modal .modal-title').html(title);

        $('#form-modal').modal('show');


    },
     error: function (err) {
         console.log('error:' + err);
    }
})

return false;

} catch (ex) {
console.log(ex)
}
}
//----------------------------------------------------------------------------
jQueryAjaxPost = form => {
try {
$.ajax({
type: 'POST',
url: form.action,
data: new FormData(form),
contentType: false,
processData: false,
success: function (res) {
if (res.isValid) {
$('#view-all').html(res.html)
$('#form-modal').modal('hide');

                alert("ok.");
            }
            else
                $('#form-modal .modal-body').html(res.html);
        },
        error: function (err) {
            console.log(err)
        }
    })
    //to prevent default form submit event
    return false;
} catch (ex) {
    console.log(ex)
}

}

Here is what I used to show modal by clicking edit button in client side mode and it was working:

<a onclick="showInPopup('@Url.Action("AddOrEdit","MyData",new {id=item.Id},Context.Request.Scheme)','edit')" class="btn btn-info text-white"><i class="fas fa-pencil-alt"></i> edit</a>|

My problem is I can't send the clicked edit button's row id to the related function then showing the modal in serverside mode.I appreciate if anyone suggests me a solution.

colin

Is this using Editor? If not, it would be worth looking at since it does this for you.

Colin

elenora

Thank you very much for your answer, Is there any sample for creating custom editing modal? Because I have some searchable selectlists in modal. Also I need a free editing modal but the editor in website seems not free

colin

The examples all use Editor, I'm afraid.

Colin