Using CFGRID with JQuery
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/javascr开发者_StackOverflow中文版ipt" 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.
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.
加载中,请稍侯......
精彩评论