Home/ Questions/Q 980741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T04:25:58+00:00

I am encountering a problem using CFGRID with JQuery. Here are the sample codes

  • 0

I am encountering a problem using CFGRID with JQuery. Here are the sample codes using the CFARTGALLERY database:

gridtest.cfm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <cfajaximport tags="cfform,cfgrid">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CFGRID Test</title>
    </head>
    <cfinvoke component="gridtest" method="getartistname" returnvariable="artistname" />
    <body>
        <cfform name="frmArtists" format="html">
                <cfselect name="selArtist" query="artistname" queryPosition="below" display="lastname" value="artistid">
                    <option value="0">Select artist...</option>
                </cfselect>
                <p></p>
                <cfgrid name="artgrid"
                            bind="cfc:gridtest.getartname({cfgridpage},
                                                             {cfgridpagesize},
                                                             {cfgridsortcolumn},
                                                             {cfgridsortdirection},
                                                             {selArtist})"
                            format="html"
                            pagesize="8"
                            bindOnLoad="false"
                            selectmode="browse"
                            width="400">
                    <cfgridcolumn name="artname" header="Art Name" display="yes" width="400">
                </cfgrid>
        </cfform>
    </body>
    </html>

It has a simple cfselect control to select the artist’s name, and when clicked, the cfgrid shows the artworks’ names.

Here’s the CFC (gridtest.cfc):

<cfcomponent>
    <cfset application.datasource="cfartgallery">
    <cfset cfartgallery=#application.datasource#>

    <cffunction name="getArtistName" access="public" returntype="query">
        <cfquery name="artistname" datasource="#cfartgallery#">
                SELECT ARTISTID,LASTNAME
                FROM ARTISTS
                ORDER BY LASTNAME
        </cfquery>
        <cfreturn artistname>
    </cffunction>

    <cffunction name="getartname" access="remote" returntype="struct">
        <cfargument name="page" type="numeric" required="true">
        <cfargument name="pagesize" type="numeric" required="true">
        <cfargument name="pagesortcolumn" type="string" required="false" default="">
        <cfargument name="pagesortdir" type="string" required="false" default="">
        <cfargument name="artistid" type="numeric" required="yes">
        <cfset var artname="">
        <cfquery name="artname" datasource="#cfartgallery#">
                SELECT ARTNAME
                FROM ART
                WHERE ARTISTID=<cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.artistid#">
        </cfquery>
        <cfreturn QueryConvertForGrid(artname,page,pagesize)>
    </cffunction>

</cfcomponent>

So far so good. But if I use a wrapper page using JQuery’s load function, like so (gridtestmain.cfm):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#div1').load('gridtest.cfm');
    });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CFGRID Test Under JQuery</title>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

The cfgrid disappears with only a boundary box. In IE it reports an error of ‘Ext.EventObject is null or not an object.’ Searching the net suggests that the Ext library was loaded multiple times causing the problem, but I can’t see where it is loaded more than once.

Is this a limitation of JQuery? Or am I doing it the wrong way? Any suggestions is much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t have access to a CF server at the moment, so everyone feel free to correct me if I’m wrong.

    IIRC, when you create a CFForm, CF processes the HEAD block to add the appropriate EXT JavaScript files. However, in this case, you are loading the cfm as a page section, not a whole page, so the second (loaded) HEAD block is not processed by the browser.

    I would try a couple of things to see which works best:

    1) Wrap the div you are loading in the CFForm instead of putting it in the sub-section you are loading remotely.

    2) Create a blank, unused CFForm in the parent page, so the appropriate JS gets loaded for that.

    While I’m at it, if I recall correctly, you don’t need a full page definition (HEAD, BODY tags, etc.) in the subsection you are loading. You only need the markup you want displayed. The HEAD information et al will be the one from the calling page.

    • 0