CFGRID를 JQuery와 함께 사용

CFGRID를 JQuery와 함께 사용하는 중에 문제가 발생했습니다. 여기에 CFARTGALLERY 데이터베이스를 사용하여 샘플 코드는 다음과 같습니다CFGRID를 JQuery와 함께 사용

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를이 작품의 이름을 보여줍니다.

는 여기 연합사 (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>

지금까지 너무 좋아. 내가 그렇게 (gridtestmain.cfm) 같은 jQuery의로드 기능을 사용하여 래퍼 페이지를 사용한다면 :

는

<!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의 제한 사항입니까? 아니면 내가 잘못하고있는거야? 어떤 제안이라도 대단히 감사합니다.

출처

2010-08-03 lawrencem49

저는 현재 CF 서버에 액세스 할 수 없으므로 모든 사람이 틀렸을 때 저를 고칠 수 있습니다.

IIRC를 사용하면 CFForm을 만들 때 CF가 HEAD 블록을 처리하여 적절한 EXT JavaScript 파일을 추가합니다. 그러나이 경우 전체 페이지가 아닌 페이지 섹션으로 cfm을로드하므로 두 번째 (로드 된) 헤드 블록이 브라우저에서 처리되지 않습니다.

나는 가장 적합한보고 몇 가지를 시도 할 것입니다 :

1) 당신이 원격로드 하위 섹션에 넣는 대신 CFFORM에로드 사업부 랩.

2) 부모 페이지에 사용되지 않은 빈 CFForm을 만들어 적절한 JS가로드되도록합니다.

제대로 읽었을 때로드중인 하위 섹션에 전체 페이지 정의 (HEAD, BODY 태그 등)가 필요하지 않습니다. 표시된 마크 업만 필요합니다. HEAD 정보 등은 호출 페이지의 정보입니다.

출처

2010-08-03 12:59:48

안녕하세요 Ben, 잠시 동안 프로젝트에서 벗어났습니다. 지금까지 제안을 테스트 할 수 없습니다. 당신 말이 맞아요. 저는 폼을 원격으로 호출하는 대신 호출 페이지에서 div에있는 폼을 래핑했습니다. 나는이 경우에 모듈성이 문제가 아닐 것이라고 생각한다. :) – lawrencem49

모듈 방식으로이 작업을 수행 할 수있는 방법은 많습니다. 그러나 기본적으로 JS 라이브러리가 이미로드되어 있어야합니다 (또는 사용자의 양식에 수동으로 링크되어 있어야합니다). –

CFGRID를 JQuery와 함께 사용

답변

관련 문제