How to add checkbox in ajax return data table and get the value of the checked checkbox in ajax call

Question

0.00/5 (No votes)

See more:

, +

Dear mentors i am working on a asp.net core mvc .net 6 project where i have a view in which i am making a ajax call to load data to a datatable

the ajax call and the datatable loads script is as follows

JavaScript

function fetchIndexforhrvalidate() {
            $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    dataType: "JSON",
                    url: "/HRValidation/Indexresult",
                    success: function (response) {
                        console.log(response);
                        $('#example').dataTable({
                            data: response,
                            columns: [
                                {
                                    targets: 0,
                                    data: null,
                                    className: 'text-center',
                                    searchable: false,
                                    orderable: false,
                                    render: function (data, type, full, meta) {
                                        return '<input type="checkbox" class="_check" name="check" value="' + full.employeeId + '">';
                                    },
                                    width: "5%"
                                },
                                { 'data': 'employeeName' },
                                { 'data': 'employeeEmail' },
                                { 'data': 'employeePersonalNumber' },
                                { 'data': 'employeeDateofJoining' },
                                { 'data': 'employeePermanentCity' },
                                { 'data': 'employeePermanentState' },
                                { 'data': 'employeePermanentCountry' },
                                { 'data': 'totalErrors' },
                                {
                                    mRender: function (data, type, row) {
                                        return '<a href="/HRDashboard/Edit/' + row.employeeId + '" class="bi bi-pen"></a> ';
                                    }
                                },
                            ],
                            autofill: true,
                            select: true,
                            responsive: true,
                            destroy: true,
                            scrollY: true,
                            scrollX: true,

                        })

                    },
                    error: function (error) {
                        console.log(response);
                    }

                });
            });
        }

all i am trying is that if some of the checkboxes are checked and if its related button is pressed an on click function should execute and it a ajax query

What I have tried:

JavaScript

$(document).ready(function () {
            $("#assigned").click(function () {
                var values = $('input[type="checkbox"].myCheckbox:checked').map(function () {
                    return $(this).val();
                }).toArray();
                //var checkedIds = $('.chkBxClass:checkbox:checked').map(function () { return this.value; }).get().join(',');
                //console.log(checkedIds);
                //var hriss = document.getElementById("hr").value;

                $.ajax({
                    type: "POST",
                    dataType: "JSON",
                    url: "/HRValidation/AssignToHR",
                    data: JSON.stringify({ name: checkedIds, hris: hriss }),
                    contentType: 'application/json',
                    success: function (response) {
                        console.log(response);

                    },
                    error: function (error) {
                        console.log(response);
                    }

                });
            });
        });

and this my div where i have the button

<pre lang="HTML"> <div style="text-align:center;">
        <label>Assign To Others</label>
        <select asp-items="@ViewBag.hr" id="hr"></select>
          
        <input type="button" id="assigned" value="Assign" class="btn btn-primary" />
          
    </div>

Posted 4-Apr-23 7:39am

Member 13998042

Add a Solution

Comments

Member 15627495 4-Apr-23 14:06pm

in your Ajax query, you miss one important field, the field "data" , that the place where the sent url provide all right side of your ajax call.

url: ...target.ext;...,data:document.getelementbyid('field').value , datatype : ....

Member 13998042 4-Apr-23 14:09pm

Hi Sir, I understand this is good for limit or knows number of checkboxes, But my datatabl will or may return more records including checkboxes and i need to capture it dynamically. also i need to pass it in array because in controller i am using foreach loop to modify record in db.

Member 15627495 4-Apr-23 14:14pm

I understand where it's hard, as you use JSON datas, you 'll always send a 'big big complex String'.
that Json is once 'decoded' or 'encoded'.

after building your Json 'ready to send' pack, you have to send it through the pipe 'data:"your_json_here'
it doesn't work in other way.

the Ajax query send a string by http request : it's a string

Member 13998042 9-Apr-23 8:15am

$(document).ready(function () {
$('#example').DataTable();
$('#btnSubmit').click(function () {
var ids = [];
$('#example tbody input[name="chkSelect"]:checked').each(function () {
ids.push($(this).attr('id'));
});
console.log(ids);
$.ajax({
type: "POST",
dataType: "JSON",
url: "/HRValidation/AssignToHR",
data: { ids: ids },
success: function (data) {
// Handle the response from the controller
}
});
});
});

This is my script it returns the value as array but it is not hitting the controller it defaults return 200

[HttpPost]
public void AssignToHR(List<string> ids)
{
foreach (var id in ids)
{
// Do something with the ID
}
//return Json(new { success = true });
}

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)