0

I just implemented a DataTable in my app, but it seems like javascript doesn't work within the DataTable.

I've attached all code below for better readability.

As you can see, the ccbtn_action="delete" bit is present, but Chrome/IE/FF doesn't seem to want to do anything when the glyphicon is clicked.

This code works perfectly when called from outside the DataTable.

What gives? Is it something to do about JavaScript not being applied to dynamically generated elements?

Thank you!

Here is the Javascript code that doesn't work:

$(document).ready(function(){

    // Delete Records

    $('[ccbtn_action="delete"]').on('click', function() {
        var type = $(this).attr('ccbtn_value_type');
        var value = $(this).attr('ccbtn_value_id');
        console.log('type=' + type + '&id=' + value);


        if (confirm('Are you sure you want to PERMANENTLY delete this record? There is NO TURNING BACK!')) {
            $.ajax({
            type: 'POST',
            url: 'includes/crmcore_action.php?action=cc_delete',
            data: 'type=' + type + '&id=' + value,
            success: 
            function() {
                $('#cc_pagetop_status').html("<div class='alert alert-success'><strong>Success!</strong> The record was successfully deleted.</div>");

                if (type == "company")
                {
                    window.location = "companies_list.php";
                }
                else
                {
                    location.reload();
                }

            }
        });
} else {
    // Do nothing!
}

    });
});

Here is the code for the DataTable:

$(document).ready(function() {
    var t = $('#DataTable').DataTable({
        "order": [[ 1, 'asc' ]],
        ajax: {
            url: 'includes/dt_ss.php?getwhat=company',
            dataSrc: ''
        },
        columns: [
        {data: null},
        {"data": null,
        "render": function (data, type, row)
            {
                return '<a href="companies_viewrecord.php?id='+data.id+'">'+data.name+'</a>';
            }
        },
        //{data: 'name'},
        {data: 'tel'},
        {
            "data": "id",
            "render": function ( data, type, full, meta )
            {
                return '<span class="glyphicon glyphicon-remove" ccbtn_action="delete" ccbtn_value_type="company" ccbtn_value_id="'+data+'" data-toggle="tooltip" data-placement="bottom" title="Click me to delete"></span>';
            }
        }
        ],
    });

     t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
});
ryanswj
  • 65
  • 10

3 Answers3

2

Try delegating your event like this:

$('#DataTable').on('click', '[ccbtn_action="delete"]', function() { ...

My guess is the click event is attached before your ajax request loads the DataTable rows. You can read more here about jQuery event delegation with on(). Specifically:

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()

But those new buttons though..
  • 21,377
  • 10
  • 81
  • 108
2

Since the js looks ok, this is most probably a timing issue. You part of script that binds the events is executed before the actual elements are created.

To fix that, you can:

  1. Make sure the script runs binding after elements creation

  2. Use dynamic binding (like .delegate() http://api.jquery.com/delegate/)

zozo
  • 8,230
  • 19
  • 79
  • 134
1

Try like this, but jquery version must be 1.9+

$(document).on('click', '[ccbtn_action="delete"]', function() { // your remaining code
Suyash
  • 176
  • 5