Utilisation de CFGRID avec JQuery

Je rencontre un problème lors de l'utilisation de CFGRID avec JQuery. Voici les codes d'échantillons en utilisant la base de données CFARTGALLERY:Utilisation de CFGRID avec 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>

Il a un contrôle simple CFSELECT pour sélectionner le nom de l'artiste, et quand on clique dessus, l'cfgrid montre les noms des œuvres d'art.

Voici le 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>

Jusqu'à présent, si bon. Mais si j'utilise une page d'emballage en utilisant la fonction de charge de JQuery, comme si (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>

Le cfgrid disparaît avec seulement une boîte de limite. Dans IE, il signale une erreur de 'Ext.EventObject est null ou un objet.' La recherche sur le réseau suggère que la bibliothèque Ext a été chargée plusieurs fois à l'origine du problème, mais je ne vois pas où elle est chargée plus d'une fois.

Est-ce une limitation de JQuery? Ou est-ce que je le fais de la mauvaise façon? Toutes les suggestions sont très appréciées.

Source

2010-08-03 lawrencem49

Je n'ai pas accès à un serveur CF pour l'instant, donc tout le monde se sent libre de me corriger si je me trompe. IIRC, lorsque vous créez un CFForm, CF traite le bloc HEAD pour ajouter les fichiers JavaScript EXT appropriés. Cependant, dans ce cas, vous chargez le cfm en tant que section de page, pas une page entière, de sorte que le second bloc HEAD (chargé) n'est pas traité par le navigateur.

Je voudrais essayer quelques choses à voir qui fonctionne le mieux:

1) Enveloppez la div que vous chargez dans le formulaire ColdFusion au lieu de le mettre dans la sous-section que vous chargez à distance.

2) Créez un CFForm vide et inutilisé dans la page parente, afin que le JS approprié soit chargé pour cela. Pendant que j'y suis, si je me souviens bien, vous n'avez pas besoin d'une définition de page complète (étiquettes HEAD, BODY, etc.) dans la sous-section que vous chargez. Vous avez seulement besoin du balisage que vous voulez afficher. Les informations HEAD et al seront celles de la page d'appel.

Source

2010-08-03 12:59:48

Salut Ben, je suis loin du projet depuis un moment et je ne peux pas tester votre suggestion jusqu'à maintenant. Vous avez raison, je dois envelopper le formulaire dans la div de la page d'appel au lieu d'appeler le formulaire à distance. Je suppose que dans ce cas, la modularité est hors de question. :) – lawrencem49

Il existe de nombreuses façons de le faire de façon modulaire. Mais, fondamentalement, vous devez avoir les bibliothèques JS déjà chargées (ou liées manuellement dans votre formulaire) pour que cela fonctionne. –

Répondre

Questions connexes