JQ event didnt active on the extract row sort by datatable.js

Question

I'm using DataTable.js to showing the data and I have some <select> option in my <tr> and DataTable are showing the 10 frist row with default param and I have a change event with JQ. Here is my problem, the JQ .change() event only work at the 10 frist row. If I change the show option in the user view (no in the code source), it still work for the 10 frist row.

I tried to add onchange="changeEvent" on the select element.. well it didnt show up in user display code source

$('select[name="type"]').change(function(){
    var type_req = $(this).val();

    var id = $(this).closest('tr').find('td#id_commande').html();
    var action ="update";
    var action_infos = "type_req";

    console.log("change event active");
    console.log(type_req);
    console.log(id);

    $.ajax({
        type: "POST",
        url: "../controllers/commandeController.private.php",
        data:{id:id ,action : action ,action_infos : action_infos ,type : type_req},
        success:function(){toastr.success("Modification commande réussi")},
        error:function(){toastr.error("Modification commande impossible")},
    });
});

I'm just trying the .change active on all row even they are show up after by user changing show up option

[function showReqTypeAsOption]

function showReqTypeAsOption($array=array()){

  $option="";
  if(!$array == null){

    if(empty($array['name'])){
      $array['name']="type_bis";

    }
    if(!empty($array['current_type'])){
      $select=1;
    }
  }

  $res=getReqType();

  foreach ($res as $ligne) {

    if($select){
      if($ligne['id'] == $array['current_type']){
        $selected= "selected";
        // $select=0;
      }else{
        $selected= "";
      }
    }

    $option = $option."<option value='".$ligne['id']."' $selected > ".$ligne['type_name']." </option>";
  };
  $option='<select name="'.$array['name'].'" id="Req_type" > '.$option.' </select>';


  return $option;
}

// DataTable
$(document).ready(function() {
  $('#MyTable').DataTable();
  $('#defaultTable2').DataTable();
  $('#defaultTable3').DataTable();
  $('#defaultTable4').DataTable();
});

$(function() {
$('#myTable').DataTable();

$("select[name='type']").change(function() {
  var type_req = $(this).val();
  var id = $(this).closest('tr').find('td.id_commande').html();
  console.log("change event active");
  console.log(type_req);
  console.log(id);
});
});

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>


    <title></title>
  </head>
  <body>


    <table id="MyTable" class="table table-bordered display" style="width:100%">
  <thead>
    <tr>
      <th>ID Col</th>
      <th>Select</th>
    </tr>
  </thead>
  <tbody>
<tr>
  <td class="id_commande">Row 1</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 2</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 3</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 4</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 5</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 6</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 7</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 8</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 9</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 10</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 11</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 12</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 13</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 14</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 15</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 16</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 17</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 18</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 19</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 20</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 21</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 22</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 23</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 24</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 25</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 26</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 27</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 28</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 29</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
<tr>
  <td class="id_commande">Row 30</td>
  <td><select name="type" id="">
      <option value="1"> option 1</option>
      <option value="2"> option 2</option>
      <option value="3"> option 3</option>
      <option value="4"> option 4</option>
      <option value="5"> option 5</option>
    </select></td>
</tr>
  </tbody>
</table>

There isn't enough here to diagnose what the problem might be. Please at least share your html - best of all would be to create a full working example illustrating the problem, either here or on a site like JSFiddle. — Robin Zigmond, Feb 14 '19 at 11:07
@RobinZigmond i add it , well is just a table using DataTable.js — WolfCode, Feb 14 '19 at 11:18
Thanks, but it's a struggle to find the problem in a biggish stack of code like that. Can you create a runnable example as I sugested? SO gives you the tools to create a runnable snippet with HTML/CSS/JS, or as I said you can use something like JSFiddle and put a link in here. [You'll have to replace the PHP code with a hard-coded version, this won't matter if, as you think, the problem is with the Javascript.] — Robin Zigmond, Feb 14 '19 at 12:37
When you edit your post, press the icon with the `<>` inside it (6th one along), it'll open up fields for you to put in HTML/CSS/JS and create a runnable example. Or, as I suggested, use JSFiddle or a similar site. — Robin Zigmond, Feb 14 '19 at 13:10
@RobinZigmond i add it , look at the console all select at 10 frist row(frist page) active the event but no other — WolfCode, Feb 14 '19 at 14:37
@RobinZigmond i find someone have same issue with me , but his is a click event and i need a change event, if possible can u help me adapte the code for me ( i tried change the click to change and it didnt work ,well i think is logic )? https://stackoverflow.com/questions/34858738/datatables-jquery-click-event-not-working-after-pagination — WolfCode, Feb 14 '19 at 14:38
Thanks @WolfCode - I've spent a while playing with it and see the problem. Rather than explain further I'll link to the following post, and flag this as a duplicate - the answers here should explain how to fix your example: https://stackoverflow.com/questions/34858738/datatables-jquery-click-event-not-working-after-pagination/34858868 — Robin Zigmond, Feb 14 '19 at 14:51
Possible duplicate of [datatables jquery click event not working after pagination](https://stackoverflow.com/questions/34858738/datatables-jquery-click-event-not-working-after-pagination) — Robin Zigmond, Feb 14 '19 at 14:51
@RobinZigmond i see but i tried $("#tableId").on("change", "select[name='type'],function(){ }); and it didnt work — WolfCode, Feb 14 '19 at 14:54

score 0 · Answer 1 · answered Feb 14 '19 at 15:02

ok i fixed the event inactive on other row
but these an other probleme is the event are duplicate

[old]

  $("select[name='type']").change(function(){
              var type_req = $(this).val();

              var id = $(this).closest('tr').find('td#id_commande').html();
              var action ="update";
              var action_infos = "type_req";

              console.log("change event active");
              console.log(type_req);
              console.log(id);

              $.ajax({
                type: "POST",
                url: "../controllers/commandeController.private.php",
                data:{id:id ,action : action ,action_infos : action_infos ,type : type_req},
                success:function(){toastr.success("Modification commande réussi")},
                error:function(){toastr.error("Modification commande impossible")},
              });

            });

[new]

$('table[name="commandeTable"]').on("click",function(){


            $("select[name='type']").change(function(){
              var type_req = $(this).val();

              var id = $(this).closest('tr').find('td#id_commande').html();
              var action ="update";
              var action_infos = "type_req";

              console.log("change event active");
              console.log(type_req);
              console.log(id);

              $.ajax({
                type: "POST",
                url: "../controllers/commandeController.private.php",
                data:{id:id ,action : action ,action_infos : action_infos ,type : type_req},
                success:function(){toastr.success("Modification commande réussi")},
                error:function(){toastr.error("Modification commande impossible")},
              });

            });
          });

stan chacon · Accepted Answer · 2019-02-15T16:31:52.823

This works for me hopefully it will work for you so try this

  $('#example tbody').on( 'change', 'select[name="your_select_name"]',function(){
                  var data = '';
                 data = example.row( $(this).parents('tr') ).data();
                  var clientid = data['your column name'];
                  var selectId = this.value;
                 console.log(clientId);
                 console.log(selectedId);

                //if id is okay do an ajax call inside a function something like this
                if(clientid != undefined){
                 ajaxCallBack(clientId,selectedId)
                             .done(function(response){
                                   //your update response here
                                    })
                    }
    })

The ajax function:

function ajaxCallBack(clientId,selectId){
  return   $.ajax({
    method: "POST",
    url: "YourUrl",
    data: { action: "UPD", clientId: clientId, selectId: selectId}
  })
}

Edit:

Your datatable should be declared like this:

  var example= $('#example').DataTable({
                "destroy": true,
                "responsive":{
                  "details": {
                  renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                      return col.hidden ?
                        '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                          '<td>'+col.title+':'+'</td> '+
                          '<td>'+col.data+'</td>'+
                        '</tr>' :
                        '';
                    } ).join('');

                    return data ?$('<table/>').append( data ) :false;
                  }
                }
              },
                "autoWidth": false,
                      "ajax": {
                          "url": 'some.php',
                          "method": 'POST',
                          data:{accion:"SLC"}
                      },
                      "columns": [
                          {"data": "client"},
                          {"data": "name"},
                          {"data": "lastname"},
                          {"data": "device"},
                          {"data": "city"},
                          {
                       className: "center",
                       defaultContent:"<select id='idSelect' name ='idSelect'  ><option value='default'>Seleccionar</option><option value='1'>hello</option></select>"
                     }
                      ],
                      "language":{"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"},
                        "columnDefs": [
                          {
                            "className": "dt-center", "targets": "_all"
                           }
                        ]
                  }
                );

Hope it helps

well i have tried this one and i have some issue with this one but i dont kown what problem i get so i gave up this solution but now it work so thanks anyway — WolfCode, Feb 20 '19 at 15:09

JQ event didnt active on the extract row sort by datatable.js

2 Answers2

Linked