Using CFGRID with JQuery

Hi all,

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"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
<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.

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.

Hi Ben, 've been away from the project for a while so can't test your suggestion until now. You're right, I've to wrap the form in the div from the calling page instead of calling the form remotely. I guess in this case modularity is out of the question. :)

lawrencem49 2010-08-27 08:03:34

There are plenty of ways to do this modularly. But, basically, you need to have the JS libraries already loaded (or linked manually in your form) for this to work.

Ben Doom 2010-08-27 13:40:34

ansaurus

tags:

views:

answers:

Using CFGRID with JQuery

related questions