Colorbox / Thickbox class not getting applied

kikloo

I am using very basic integration of datatables but loading the data using ajax (ssp-class). The data is coming fine. I am applying colorbox / thickbox class to a specific col for eg. I have that col coming like this: <a href='sys.php' class='thickbox'>Somethign</a> its coming fine but upon clicking the thickbox / colorbox is not working and it loads the target page. Can anyone please shed some light as to why the colorbox / thickbox is not triggering ? P.S thickbox / colorbox is working outside of datatables on the same page as datatables.

rf1234

don't see your code, hard to tell.

Reason might be that the element you are applying the class to doesn't exist in the dom yet at the time you are applying it.

You might want to use an event for it to make sure the data table is ready when the class is being applied. "on init" could be the right one:
https://datatables.net/reference/event/init

kikloo

Hi,

my code is following:

<script>
$(document).ready(function() {
    $('#tblProducts').DataTable({
        "pageLength": 50,
        "aoColumnDefs": [
            { 
                'bSortable': false, 
                'aTargets': [ 9,10,11 ] 
            }
        ],
        "bProcessing": true,
        "serverSide": true,
        "ajax":{
            url :"ssp-products.php", // json datasource
            type: "get"  // type of method  , by default would be get
        }
    });   

    $(".thickbox").colorbox({ width:"75%", height:"75%" });
    $(".ajax").colorbox();
});         
</script>

Ajax sends this code for colorbox / thickbox link:

<center><a class='thickbox' href='../pictures/" . $d . "'><i class='fa fa-picture-o' aria-hidden='true'></i></a> <input type='radio' name='pid' value=" . $d . " /></center>

Can anyone please shed some light as to why thickbox / colorbox class is not applying where as font awesome is working fine ?

Thanks.

rf1234

Try with an event:

<script>
$(document).ready(function() {
    var table = $('#tblProducts').DataTable({
        "pageLength": 50,
        "aoColumnDefs": [
            {
                'bSortable': false,
                'aTargets': [ 9,10,11 ]
            }
        ],
        "bProcessing": true,
        "serverSide": true,
        "ajax":{
            url :"ssp-products.php", // json datasource
            type: "get"  // type of method  , by default would be get
        }
    });  
 
    table.on ('init', function () {
        $(".thickbox").colorbox({ width:"75%", height:"75%" });
        $(".ajax").colorbox();
    });
    
});        
</script>

kikloo

Hi,

thanks it kind of works for only the 1st page in datatables, if i search for something or goto any other page then it is not working. Any suggestion ?

Thanks.

rf1234

check the data tables event list and try some other events.
Candidates to try would be "on preDraw" or "on draw". Maybe "on page". Easy to try it ...

https://datatables.net/reference/event/

https://datatables.net/reference/event/preDraw
https://datatables.net/reference/event/draw
https://datatables.net/reference/event/page

kikloo

Hi,

draw event works fine.

Thanks.