DataTables Server Side Processing Adding html content select tag not triggering javascript

Question

I have implemented successfully the datatables server side processing on one of my tables just that the $('.select_users').change(function(event){ doesn't work anymore on my select tab, despite the fact it shows correctly. When I try to select an option from the select tag it should action to the jquery function but it doesn't.

EDIT 28 NOV 2014

I have found that there is an issue with the events and server side processing: http://www.datatables.net/examples/advanced_init/events_live.html.

So how can I convert script BLOCK #1 to match the script from the above link.

I added the

$('#dataTables-ss').on('click', 'tr', function () {
    var name = $('td', this).eq(0).text();
    alert( 'You clicked on '+name+'\'s row' );
} );

And this was getting triggered.

BLOCK #1 => Jquery - on change of select it should trigger this function

$('.select_users').change(function(event){
    var selected_value = this.value;
    var id = $(this).find('option:selected').attr('class');
    var id = id.split('-');
    var select_id = id[1];
    $.ajax({
        type: 'post',
        url: 'includes/ajax.html',
        data: {
                action: 'confirm_notconfirm_subscribers',
                selected_value: selected_value,
                select_id: select_id
              },
        success: function(data) {
            $('#message').html(data).fadeIn(1000).fadeOut(1000);
        },
        error: function() {
            $("#result").html('There was an error');
        }               
    });
});

BLOCK #2 => PHP important part

public function read_subscriber_table() {
    $table = 'subscribers';
    $primaryKey = 'ID';
    $columns = array(
        array( 'db' => 'name', 'dt' => 1 ),
        array( 'db' => 'email', 'dt' => 2 ),
        array( // issue is here in the third array where I create the select string.
            'db' => 'confirmed', 
            'dt' => 3,
            'formatter' => function( $d, $row ) {
                if ($d == '1') {
                    $confirmed = 'Confirmed';
                } else {
                    $confirmed = 'Not Confirmed';
                }

                if ($d !== '1') { $selected = 'selected'; } else { $selected = ''; }
                $string = '<select class="select_users form-control" name="status-users">
                    <option class="opt-'.$row["ID"].'" value="1"  '.$selected.'>Confirmed</option>
                    <option class="opt-'.$row["ID"].'" value="0" '.$selected.'>Not Confirmed</option>
                </select>';
                return $string;
            }
        ),
        array( 
            'db' => 'date', 
            'dt' => 4,
            'formatter' => function( $d, $row ) {
                return date( 'd-m-Y', strtotime($d));
            }
        ),
        array( 
            'db' => 'ID', 
            'dt' => 5,
            'formatter' => function( $d, $row ) {
                return '<input type="checkbox" class="checkbox_subscribers" value="'.$d.'" >';
            }
        )
    );
    $sql_details = $this->dtss_processing();
    require( 'ssp.class.php' );
    $result = SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns );
    $start=$_REQUEST['start'] + 1;
    foreach($result['data'] as &$res){
        $res[0]=(string)$start;
        $start++;
    }
    echo json_encode($result);
}

BLOCK #3 => Datatables initialized script

$(document).ready(function() {
    $('#dataTables-ss').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "includes/data_tables.html?action=read_subscriber_table",
        "aaSorting": [[4, 'desc']]
    } );
} );

BLOCK #4 => EDIT - before implementing server side the function was looking like this and it was working well.

public function read_subscriber_table() {
    $col_names = array('ID', 'name', 'email', 'confirmed', 'date');
    $this->read_table('subscribers', $col_names);
    $i = 0;
    foreach ($this->results as $item) {
        $i++;
        if ($item->confirmed == '1') {
            $confirmed = 'Confirmed';
        } else {
            $confirmed = 'Not Confirmed';
        }
        if ($item->confirmed !== '1') { $selected = 'selected'; } else { $selected = ''; }
    ?>
        <tr id="tablerow-<?php echo $item->ID; ?>">
            <td><?php echo $i; ?></td>
            <td><?php echo $item->name; ?></td>
            <td><?php echo $item->email; ?></td>
            <td>                    
                <select class="select_users form-control" name="status-users">
                    <option class="opt-<?php echo $item->ID; ?>" value="1" <?php echo $selected ?>>Confirmed</option>
                    <option class="opt-<?php echo $item->ID; ?>" value="0" <?php echo $selected ?>>Not Confirmed</option>
                </select>
            </td>
            <td><?php echo $item->date; ?></td>
            <td><input type="checkbox" class="checkbox_subscribers" value="<?php echo $item->ID; ?>" ></td>
        </tr>
    <?php
    }
    ?>
<?php 
}

So you have a dynamically created selectlist, and the change event doesn't fire? — markpsmith, Nov 26 '14 at 13:08
ok, well it has nothing to do with PHP or datatables really does it? incidentally you've used the wrong tag for datatables. So the solution is to bind a change event to the selectlist after it has been created - see [here](http://stackoverflow.com/questions/2031826/jquery-change-function-not-working-with-dynamically-populated-select-list) — markpsmith, Nov 26 '14 at 13:13
@markpsmith Still not working. Check my edit, last block of code. — Adrian, Nov 26 '14 at 13:20
So something in that additional code is preventing it working? Do you get any errors on the console? — markpsmith, Nov 26 '14 at 13:44
@markpsmith Not a single error, when I click the select to change from Confirmed to not confirmed, nothing in the console, it's like it won't get triggered, like the html would not be there. — Adrian, Nov 26 '14 at 13:45
Using that updated code as a starting point, change `$('#dataTables-ss').on('click', 'tr', function () {` to `$('#.select_users').on('change',function(){` — markpsmith, Nov 28 '14 at 11:45
Are you using `event` anywhere? If you do as I suggest, you should see that the change event is bound. Change the alert so it just pops up with a message. — markpsmith, Nov 28 '14 at 14:00
Yes, I am using the event for getting the selected value. Tried to add only the alert as you said with the `on change`, but still not getting triggered, somehow, it needs a seconds argument and after the function. — Adrian, Nov 28 '14 at 14:15
Ok, very odd the selector is the issue. if I do it with `$('#dataTables-ss').change...` it works, but if I do it with `$('.select_users')....` it doesn't. Single different between those 2 is that the `id` for `dataTables-ss` is in the html written by me, and the `class` for `select_users` it is being added via json. — Adrian, Nov 28 '14 at 14:21
Seems like there are 2 different ways to write that line of code - the way I wrote it, and another way like `$('#parent-element').on("change", "#my-selector, function (e) {`, I don't know what the difference is — markpsmith, Nov 28 '14 at 14:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/65838/discussion-between-user3467855-and-markpsmith). — Adrian, Nov 28 '14 at 14:30

score 2 · Accepted Answer · edited Nov 28 '14 at 14:58

2

Follwing on from comments...

Using that updated code as a starting point, change $('#dataTables-ss').on('click', 'tr', function () { to $('#dataTables-ss').on('change', '.select_users', function(event){

edited Nov 28 '14 at 14:58

Adrian

2,273
4
38
78

answered Nov 28 '14 at 14:35

markpsmith

4,860
2
33
62

DataTables Server Side Processing Adding html content select tag not triggering javascript

1 Answers1