Call js function and send some data when click an option from dropdown in Datatable row

Question

I'm looking for call a js function after click on my dropdown list. The code works, when I click it, it call myFunction. My problem is I need to add the datatable row into myFunction as a parameter.

My error: ReferenceError: Can't find variable: meta

I'm noob with javascript and html languages.

<script>
function myFunction(selectObject, row) {
    var value = selectObject.value; 
    alert("Actualización Status: " + value + row);
}
</script>

<script>
    var json={{ posts_list | safe }};
    $(document).ready(function() {
        var table = $('#posts_table').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'print'
            ],
            "scrollX": true,
            data: json.data,
            columns:[
                {defaultContent: ""},
                {data: "_id"},
                {
                    "data": "status",
                    "render": function(data, type, row, meta){
                        if (data == 'no_denunciado') {
                            data = '<select id="status" onchange="myFunction(this, meta.row)">' +
                            '<option value="no_denunciado">' + data + '</option>' +
                            '<option value="nuevo">Nuevo</option>' +
                            '<option value="en_gestion">En Gestion</option>' +
                            '<option value="baja_edenor">Baja</option>' +
                            '</select>';
                        }

meta is an argument to the render function. By the time myFunction is called, it's out of scope and JavaScript has no idea what you're talking about. I suggest adding elements using DOM methods (i.e., createElement) and using addEventListener to include the enclosed variable as needed. There may be something easier in DataTables though. — Heretic Monkey
– Heretic Monkey, Commented Aug 18, 2021 at 22:46
chang select id="status" onchange="myFunction(this, meta.row)"> to select id="status" onchange="myFunction(this,\''+meta.row+'\')"> — user4308987
– user4308987, Commented Aug 18, 2021 at 22:47

score 1 · Accepted Answer · 2021-08-19 02:49:09Z

1

meta.row is being used out of scope of the function you need to put in the data not the variable meta.data as that will fall out of scope like so.

change

data = '<select id="status" onchange="myFunction(this, meta.row)>'

to

data = '<select id="status" onchange="myFunction(this, \''+meta.row+'\')">'

EDIT from the chat I see that you want to string an object I wrote a quick function

function ObjectToString(myObject){
var keys = Object.keys(myObject);
var returnedString="";
keys.forEach(key=>{returnedString+="["+key+":"+myObject[key]+"]";});
return returnedString;
}

edited Aug 19, 2021 at 2:49

answered Aug 18, 2021 at 22:52

user4308987

Sign up to request clarification or add additional context in comments.

7 Comments

Martin Bouhier Over a year ago

It's works!!! Is there any way to get the row data? Because now my alert shows me 0 or 1 (the index)

user4308987 Over a year ago

the data is in the option so just get the innerhtml

Martin Bouhier Over a year ago

I mean the complete row data, not only the option. I mean, now if I send row instead of meta.row in params I have [Object object]. Is there any way to get the same but in json format?

user4308987 Over a year ago

you can create an array and store away meta in an array connected to the row number [row1:meta] and so on then you can figure out what part of the array you need from the row number

user4308987 Over a year ago

the array must be outside the function

|

Collectives™ on Stack Overflow

Call js function and send some data when click an option from dropdown in Datatable row

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related