Fancybox does not seem to work with Coldfusion CFGRID tag

I am trying out CFGRID for the first time. While the grid itself works just fine, I can not get a Fancybox link to work inside the columns. I've added relevant code below. Basically, I do a query, add a query column that contains a link, then output the results in a cfgrid:

<cfquery name="qSessions" datasource="">
    SELECT id, title
    FROM EVENTS
    WHERE c_fkid = 1
</cfquery>
<cfset QueryAddColumn(qSessions,"edit_link","varchar",ArrayNew(1))>
<cfset i = 0>
<cfloop query="qSessions">
    <cfset i = i + 1>
    <cfset thisText = "<a href='./datagridFB.cfm?no_app=1' class='edit-session' id=" & i & ">Edit this session</a>">
    <cfset QuerySetCell(qSessions,"edit_link",thisText, currentRow)>
</cfloop>


<head>
    <!--- Javascript library/CSS links would go here --->
    <script type="text/javascript">
        $j = jQuery.noConflict();

        /* Reload the page */
        function refreshParent(){
            window.location.reload(true);
        }

        /* Initialization actions on doc ready */
        $j(document).ready(function() {
            $j(".edit-session").fancybox({
                'width'             : 600,
                'height'            : 350,
                'hideOnContentClick': false,
                'transitionIn'      : 'elastic',
                'transitionOut'     : 'fade',
                'type'              : 'iframe',
                'href'              : $j(this).href,
                'overlayOpacity'    : 0.6,
                'onCleanup'         : function(){refreshParent()}
            });
        });
    </script>       
</head>

<body>
    <!---Test Fancybox links outside the CFGRID--->
    <a href="./datagridFB.cfm?no_app=1" id="test-link" class="edit-session">Test FB</a>

    <!--- Output the results of the query --->
    <h2 class="header">Sessions in the Database</h2>
    <cfform id="testForm" name="testForm" method="post">
        <cfgrid name="testGrid" format="html" query="qSessions" width="500">
            <cfgridcolumn name="id" header="ID">
            <cfgridcolumn name="title"  header="Session Title" width="300"> 
            <cfgridcolumn name="edit_link" header="Edit">
        </cfgrid>
    </cfform>
</body>

The thing is that the test link (outside the CFGRID) works just fine. Click it and the Fancybox iFrame opens up. But the links inside the CFGRID don't produce a pup-up - they take you to the page directly. can anyone provide some guidance on this? Is it related to the fact that CFGRID is built on Ext.js or something? Thanks!

Solution

Unfortunately, mixing jQuery and cfform's ajax is never a good idea. Maybe consider porting the use of cfgrid to one of the jQuery grid plugin?

Or use <cfwindow> instead of Fancybox?