将 CFGRID 与 JQuery 结合使用
我在使用 CFGRID 和 JQuery 时遇到问题。以下是使用 CFARTGALLERY 数据库的示例代码：
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>
它有一个简单的 cfselect 控件来选择艺术家的姓名，单击时，cfgrid 将显示艺术品的名称。
这是 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>
到目前为止一切顺利。但是，如果我使用 JQuery 的加载函数来使用包装页面，如下所示（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>
cfgrid 会消失，只留下一个边界框。在 IE 中，它报告“Ext.EventObject 为 null 或不是对象”错误。网上搜索表明 Ext 库被多次加载导致了问题，但我看不到它在哪里被多次加载。
这是 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/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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我目前无法访问CF服务器，所以如果我错了，大家可以随时纠正我。
IIRC，当您创建 CFForm 时，CF 会处理 HEAD 块以添加适当的 EXT JavaScript 文件。但是，在这种情况下，您将 cfm 作为页面部分而不是整个页面加载，因此浏览器不会处理第二个（加载的）HEAD 块。
我会尝试一些方法来看看哪种效果最好：
1）将您正在加载的 div 包裹在 CFForm 中，而不是将其放在您正在远程加载的子部分中。
2) 在父页面中创建一个空白的、未使用的 CFForm，以便为此加载适当的 JS。
当我这样做时，如果我没记错的话，您不需要在您正在加载的小节中使用完整的页面定义（HEAD、BODY 标记等）。您只需要想要显示的标记。 HEAD 信息等将来自调用页面。
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.