Использование CFGRID с JQuery - PullRequest
Новая
       13

Использование CFGRID с JQuery

1 голос
/ 03 августа 2010

Я столкнулся с проблемой использования 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? Или я делаю это неправильно? Любые предложения приветствуются.

1 Ответ

2 голосов
/ 03 августа 2010

В данный момент у меня нет доступа к серверу CF, поэтому все могут поправить меня, если я ошибаюсь.

IIRC, когда вы создаете CFForm, CF обрабатывает блок HEAD вдобавьте соответствующие файлы EXT JavaScript.Однако в этом случае вы загружаете cfm как раздел страницы, а не как целую страницу, поэтому второй (загруженный) блок HEAD не обрабатывается браузером.

Я бы попробовал пару вещей, чтобыпосмотрите, что лучше всего работает:

1) Оберните div, который вы загружаете, в CFForm, вместо того, чтобы помещать его в подраздел, который вы загружаете удаленно.

2) Создайте пустой, неиспользованный CFFormна родительской странице, поэтому для этого загружается соответствующий JS.

Пока я на этом, если я правильно помню, вам не нужно полное определение страницы (теги HEAD, BODY и т. д.)в подразделе вы загружаете.Вам нужна только разметка, которую вы хотите отобразить.Информация HEAD и др. Будет на странице вызова.

...