Question

I’m using dataTables to retrieve, display and organise data from a PHP script (which in turn pulls the information from a MySQL database).

Using the following code, dataTables retrieves the information and puts it into a.. well, table.

$('#content div').html( '<table id="example"></table>' );
var oTable = $('#example').dataTable( {
    "bJQueryUI": true,
    "bProcessing": true,
    "bServerSide": true,
    "sPaginationType": "full_numbers",
    "sAjaxSource": "dataTables.php",
    "aoColumns": [
        /* UID */           { "bSearchable": false,
                                "bVisible":  false },
        /* Datetime */      { "asSorting": [ "desc" ] },
        /* Staff Name */    null,
        /* Room */          null,
        /* Reason */        null,
        /* Urgency */       null,
        /* Processed? */    null ],
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        var sDirectionClass;

        if ( aData[6] === null ) {
            sDirectionClass = "new";
            if ( row % 2 !== 0 )
                sDirectionClass = "new_odd";
        } else {
            sDirectionClass = "std";
        }

        row++;

        $(nRow).addClass( sDirectionClass );
        return nRow;
    }
} );

Most of this, I hope, is quite straightforward – this function takes the sAjaxSource property and looks at my dataTables.php file, which simply reads the MySQL DB and returns some information in a JSON-encoded format.

This all works fine, but I’m trying to turn one of my table’s columns into a clickable link.

The brief PHP for this is;

if ( $aColumns[$i] == "Processed" )
{
    $link = '<img src="tick.png" id="' . $aRow[ $aColumns[0] ] . '" />';
    $row[] = ( empty( $aRow[ $aColumns[$i] ] ) ) ? $link : $aRow[ $aColumns[$i] ];
}

The pseudo for that is basically if Processed field is NULL display an image with the UID of that row; otherwise display the value of Processed field.

What I’d like to do now is make that image JS-clickable to run an AJAX function. I thought that the following code (in situ immediately after the above JS):

oTable.find('img').click(function(){
    var process = $(this).attr("id");
    $.ajax({
        url: "check_alerts.php",
        data: { process: id }
    }).done(function() { 
        oTable.fnDraw(false);
    });
});

Unfortunately, it appears to do nothing. I’d imagine this is because the img I’m creating is created in the DOM and as such when the above function runs, it won’t find any img tags.

How can I amend the code so that those images will run my AJAX function?

Thanks in advance,

Answer 1

To make sure that your new DOM elements also listen to the click event you should use “on”.

oTable.on("click", "img", function() {
  var process = $(this).attr("id");
  $.ajax({
    url: "check_alerts.php",
    data: { process: id }
  }).done(function() { 
    oTable.fnDraw(false);
  });
});

See the documentation