Question

So basically I am using jQuery Datatables server-side functionality with PHP to retrieve a table with details from MySQL as illustrated here

From the HTML side, the following jQuery script (1) references the PHP script that grabs the data from MySQL and (2) then defines the table and customizes the columns in the row details.

My problem is getting the links in the row details to collaborate with ColorBox.

Here is the script I am using:

 <script type="text/javascript" charset="utf-8">

        $(document).ready(function() {
            memTable = $('#members').dataTable( {
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "detailsm.php",
                "aoColumns": [
                    { "sClass": "center", "bSortable": false },
                    null,
                    null,
                    null,
                    { "sClass": "center" },
                    { "sClass": "center" },
                    { "sClass": "center" },
                { "sClass": "center" },

                    { "sClass": "center" }
                ],
                "aaSorting": [[1, 'desc']]
            } );

            $('#members tbody td img').live( 'click', function () {
                var memTr = $(this).parents('tr')[0];
                if ( memTable.fnIsOpen(memTr) )
                {
                    /* This row is already open - close it */
                    this.src = "datatables/details_open.png";
                    memTable.fnClose( memTr );
                }
                else
                {
                    /* Open this row */
                    this.src = "datatables/details_close.png";
                    memTable.fnOpen( memTr, fnFormatMemberDetails(memTr), 'details' );
                }
            } );
        } );

        var memTable;

        /* Formating function for row details */
        function fnFormatMemberDetails ( memTr )
        {

            var mData = memTable.fnGetData( memTr );
            var smOut = '<table cellpadding="2" cellspacing="0" border="0" style="padding-left:20px;">';
            smOut += '<tr><td><b>Member Functions:</b></td><td></td><td><b>Details:</b></td><td></td></tr>';
            smOut += '<tr><td><a class="iframesmall" href="changecontact.php?userid='+mData[1]+'&fn=chusr">Update Info</a></td><td><a class="iframe"  href="notifymember.php?memberid='+mData[1]+'">Notify</a></td>'
            +'<td>Full Name: '+mData[14]+' '+mData[3]+'</td><td>Category: '+mData[11]+' | Created by: '+mData[12]+'</td></tr>';
            smOut += '<tr><td><a class="iframe" href="renewmember.php?memberid='+mData[1]+'">Renew Subscription</a></td><td><a class="iframe" href="rp.php?memberid='+mData[1]+'">Reset Password</a></td>                                   <td>Address: '+mData[15]+', '+mData[16] +', '+mData[17]+'</td><td>Mobile: '+mData[18]+'</td></tr>';
            smOut += '<tr><td><a class="iframe" href="disactivatemember.php?memberid='+mData[1]+'">Disactivate</a></td><td><a class="iframe" href="deletemember.php?memberid='+mData[1]+'">Delete</a></td>                  <td>Last Login: '+mData[10]+ '</td><td>Last Updated: '+mData[13]+'</td></tr>';
            smOut += '</table>';
            return smOut;
        }

    </script>

My ColorBox jquery script defines the class iframesmall, which is referenced above in the fnFormatMemberDetails function that formats row details for the jquery data table.

Here is the part of the code from fnFormatMemberDetails that formats my row details as you can see above:

smOut += '<tr><td><a class="iframesmall" href="changecontact.php?userid='+mData[1]+'&fn=chusr">Update Info</a></td><td><a class="iframesmall"  href="notifymember.php?memberid='+mData[1]+'">Notify</a></td>'
            +'<td>Full Name: '+mData[14]+' '+mData[3]+'</td><td>Category: '+mData[11]+' | Created by: '+mData[12]+'</td></tr>';

And here is my jQuery ColorBox script, which works on the same page when called through regular HTML (but not through HTML output via jQuery/javascript):

<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".photogall").colorbox({rel:'photogall'});
$(".photothumbs").colorbox({rel:'photothumbs'});
$(".iframesmall").colorbox({iframe:true, width:"800px", height:"80%"});


});
</script>

To sum it up: How do I get ColorBox to work with html links that are generated via jQuery/javascript? All suggestions are welcome. Thank you.

Answer 1

Simply reapply colorbox() after you add the elements dinamicallhy

            else
            {
                /* Open this row */
                this.src = "datatables/details_close.png";
                //here you add the data
                memTable.fnOpen( memTr, fnFormatMemberDetails(memTr), 'details' );
                //here you should add colorbox for the newly added elements
                $(".iframesmall").colorbox({iframe:true, width:"800px", height:"80%"});
            }