Utiliser les données d'un Cfquery avec AJAX

Résolu
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009 - 29 juil. 2008 à 12:04
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009 - 4 août 2008 à 12:56
Lut à tous,

Grâce aux bonnes âmes de ce site j'ai réussi à adapter un système d'autocompletion.

Nickel ... à part que celui utilise dans l'exemple un tableau java

suggests = new Array('aaaa','aaab','aabb','abbb','abbc','0000','0001','0011','0111','0112');

Evidement  ce que je veux c'est utiliser les données d'un Cfquery

Ma question est donc simple. Peux t'on transférer les données issues de mon cfquery vers un tableau
java

suggests = new Array(LES DONNEES RESULTANTES DE MON CFQUERY);

Pff dur dur les débuts dans le monde de la prog

Par avance merci les gars

10 réponses

nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
29 juil. 2008 à 14:58
Re,

<cfloop query = "ListeGlobFR">
   #ArrayAppend(suggests, "#Nom# #Téléphone# #Portable#")#
</cfloop>
<cfreturn suggest/>

et que la seule chose que je veux c'est remplir un tableau java >> Javascript tu veux dire ???
Mais je suppose que tu souhaites afficher ton tableau javascript ?
Dans ce cas tu auras plus simple en récupérant ton tableau au format HTML (<table><tr>....), tu n'auras pas à faire la mise en page coté client !

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Mon Blog
3
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
30 juil. 2008 à 12:18
Re,

c'est normal puisque "suggests" est déclaré coté serveur.
Ce que le serveur renvoie c'est un array et non un array nommé "suggests".

Peux-tu me dire quand et comment est appelées ta fonction javascript "ShowValue" ?

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Mon Blog
3
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
30 juil. 2008 à 14:11
Pour en savoir plus sur Ajax et XMLHTTPRequest

http://toutjavascript.com/savoir/xmlhttprequest.php3

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Mon Blog
3
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
29 juil. 2008 à 13:11
Re,

tu as plusieurs solution pour renvoyer les données à l'utilisateur :
- sous forme XML qu'il faudra remettre en page coté client
- Jquery qu'il faudra remettre en page coté client
- Array qu'il faudra remettre en page coté client
...autres formats
- formaté directement en HTML (ex: un tableau) qu'il suffit de placer dans un conteneur coté client

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Mon Blog
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009
29 juil. 2008 à 14:23
 Je pensais m'en sortir avec un truc du style

<cfloop query = "ListeGlobFR">
   #ArrayAppend(suggests, "#Nom# #Téléphone# #Portable#")#
</cfloop>

dans la mesure où je n'ai pas besoin de mise en page particulière et que la seule chose que je veux c'est remplir un tableau java avec les données issues du query

Merci
0
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009
29 juil. 2008 à 15:26
Javascript oui :-)

Et non je ne veux pas l'afficher, il va juste servir à alimenter l'affichage fait par l'autocompletion (javascript trouvé sur ce site, et mes histoires de menus dynamiques où tu m'as déjà pas mal aidé)

J'ai cependant trouvé un petit lien qui explique tous ça pous CS8, je vais tenter d'adapter ça à mon cas.

http://www.ajax-tutorials.com/tutorial-list/resource/ColdFusion-Ajax-Tutorial-Related-Selects/

Merci
0
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009
30 juil. 2008 à 11:36
Lut,

Encore un petite question pour finaliser tous ça

J'ai un fichier cfc qui contient le code suivant

<cfcomponent output="false">
<cfset THIS.dsn="cfartgallery">
<cffunction name="getChoose" access="remote" returnType="array">  
 <cfset var suggests=ArrayNew(2)>
 <cfset var i=0>
 <cfquery name="ListeGlobFR" datasource="Access">
  SELECT Nom, Téléphone, Portable
  FROM Personnel
  ORDER BY Nom ASC
 </cfquery>
 <cfloop index="i" from="1" to="#ListeGlobFR.RecordCount#">
      <cfset suggests[i][1]=ListeGlobFR.Nom[i]>
      <cfset suggests[i][2]=ListeGlobFR.Téléphone[i]>
  <cfset suggests[i][3]=ListeGlobFR.Portable[i]>
 </cfloop>   
 <cfreturn suggests>
</cffunction>
</cfcomponent>

Un fichier cfm qui contient

<cfobject component="getChoose" name="analyse">
<cfinvoke component="getChoose" method="getChoose" returnvariable="suggests"> </cfinvoke>
<cfdump var = "#suggests#" >

Le cfdump m'affiche bien le contenu de #suggests# sous entendu (ce que je comprend en fait lol) que ma fonction à bien ajouter les datas du cfquery dans
un tableau nommé suggests.

Alors Pkoi ma fonction javasript n'arrive pas à utiliser ce tableau et que pour IE
suggests est indéfini ? Le fait de retourner le tableau suggests comme résultat
ne suffit pas pour être utilisé ?

Par avance merci

function showValue(inside)
{
 divDest      = document.getElementById('menuRightHidden');
 divDest.innerHTML   = '';
 valueOfElement    = '';
 exist      = 0;
 nbOfElement     = 0;
 divDest.style.top   = positionAbsolute(inside, 'top') + inside.offsetHeight;
 divDest.style.left   = positionAbsolute(inside, 'left');
 divDest.style.width   = inside.offsetWidth - 3;
   
 for (i = 0; i < suggests.length; i++)
 {
  if (suggests[i].indexOf(inside.value) == 0 && inside.value != '')
  {
   nbOfElement++;
   exist     = 1;
   valueOfElement   = suggests[i];
   currentDiv    = document.createElement("div");
   currentInner   = document.createTextNode(suggests[i]);
   currentDiv.indice  = suggests[i];
   currentDiv.className = 'currentDiv';
   currentDiv.onclick  = function()
   {
    inside.value = this.indice;
    divDest.style.visibility = 'hidden';
   }
   currentDiv.appendChild(currentInner);
   divDest.appendChild(currentDiv);
  }
 } if (exist 0 || (valueOfElement.length  inside.value.length && nbOfElement == 1))
  divDest.style.visibility = 'hidden'
 else
  divDest.style.visibility = 'visible';
}
0
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009
30 juil. 2008 à 13:30
Plusieurs fonctions (voir ci dessous) en fait avec un appel dans le cfm (la seule chose qu'il y a d'ailleurs)

   ----

         

    ,
         ,
   

Si on ajoute cette ligne ça fonctionne, (puisque le tableau existe coté client est ce ça ?)

suggests = new Array('aaaa','aaab','aabb','abbb','abbc','0000','0001','0011','0111','0112');

Donc comment la faire exister coté client ?????? Je sèche complet sur le sujet
HELP

FONCTIONS

function positionAbsolute(obj, mode)
{
 currentValue = 0;
 if (obj.offsetParent)
 {
  if (mode == 'top')
   currentValue = obj.offsetTop;
  else if (mode == 'left')
   currentValue = obj.offsetLeft;
  while (obj = obj.offsetParent)
   if (mode == 'top')
    currentValue += obj.offsetTop;
   else if (mode == 'left')
    currentValue += obj.offsetLeft;
 }
 return currentValue;
}
  
function showValue(inside)
{
 divDest      = document.getElementById('menuRightHidden');
 divDest.innerHTML   = '';
 valueOfElement    = '';
 exist      = 0;
 nbOfElement     = 0;
 divDest.style.top   = positionAbsolute(inside, 'top') + inside.offsetHeight;
 divDest.style.left   = positionAbsolute(inside, 'left');
 divDest.style.width   = inside.offsetWidth - 3;
   
 for (i = 0; i < suggests.length; i++)
 {
  if (suggests[i].indexOf(inside.value) == 0 && inside.value != '')
  {
   nbOfElement++;
   exist     = 1;
   valueOfElement   = suggests[i];
   currentDiv    = document.createElement("div");
   currentInner   = document.createTextNode(suggests[i]);
   currentDiv.indice  = suggests[i];
   currentDiv.className = 'currentDiv';
   currentDiv.onclick  = function()
   {
    inside.value = this.indice;
    divDest.style.visibility = 'hidden';
   }
   currentDiv.appendChild(currentInner);
   divDest.appendChild(currentDiv);
  }
 } if (exist 0 || (valueOfElement.length  inside.value.length && nbOfElement == 1))
  divDest.style.visibility = 'hidden'
 else
  divDest.style.visibility = 'visible';
}
  
function initMenuRightDiv()
{
 menuRightDiv   = document.createElement("div");
 menuRightDiv.className = 'hiddenDiv';
 menuRightDiv.id   = 'menuRightHidden';
 window.document.body.appendChild(menuRightDiv);
}
  
window.onload = initMenuRightDiv;
</script>
0
nickadele Messages postés 1251 Date d'inscription mercredi 7 août 2002 Statut Modérateur Dernière intervention 10 avril 2013
30 juil. 2008 à 14:05
Pour résumé le principe avec Ajax dans ton cas de figure :
1. L'utilisateur encode une valeur à rechercher
2. Une fonction javascript récupère la valeur et la transmet au serveur.
   -Lors de l'envoie via Ajax, tu dois définir quelle fonction va récupérer la valeur renvoyée par le serveur.
3. Traitement au niveau du serveur.
4. Le serveur renvoie le résultat au client.
5. La fonction déclarée au point 2 récupère les données envoyées par le serveur.
6. Traitement coté client pour afficher le résultat.

Dans le code ci-dessus je ne voit pas l'appel Ajax que tu fais !

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Mon Blog
0
Timwaz Messages postés 23 Date d'inscription lundi 5 mai 2008 Statut Membre Dernière intervention 12 mai 2009
4 août 2008 à 12:56
Lut,

BINGO !!! Ca marche enfin
Merci aux membres de ce site et en particulier à Nickadel

Il faut effectivement utiliser AJAX pour réussir à faire ce système d'autocompletion. Et CF8, intègre ces fonctions, ce qui évite la galère (du moins pour moi) du javascript (idem pour l'autosuggest)

Le truc c'est qu'il faut utiliser les cfgrid et un fichier cfc qui donne pour la partie cfm

<cfform>
  

     <cfgrid name= "Liste" bgcolor="##FFFFFF"
         format="html" textcolor="" rowheadertextcolor=""
         pagesize="10"
         striperows="yes"
         bind="cfc:CompTel.getPers({cfgridpage},
                              {cfgridpagesize},
                              {cfgridsortcolumn},
                              {cfgridsortdirection})">
       <cfgridcolumn name="Nom" header="Nom" width="100"/>
       <cfgridcolumn name="Téléphone" header="Téléphone" width="100"/>
       <cfgridcolumn name="Portable" header="Portable" width="200"/>
       <cfgridcolumn name="Site" header="Site" width="200"/>
     </cfgrid>
  

</cfform>

et la partie cfc

<cfcomponent output="false">


   <cfset THIS.dsn="Access">


   <!--- Get Personnel --->
   <cffunction name="getPers" access=" remote " returntype ="struct">
      <cfargument name="page" type="numeric" required="yes">
      <cfargument name="pageSize" type="numeric" required="yes">
      <cfargument name="gridsortcolumn" type="string" required="no" default="">
      <cfargument name="gridsortdir" type="string" required="no" default="">


      <!--- Local variables --->
      <cfset var Personnels="">


      <!--- Get data --->
     <cfquery name="Personnels" datasource="Access">
     SELECT Nom, Téléphone, Portable, Site
FROM Personnel
     <cfif ARGUMENTS.gridsortcolumn NEQ ""
         and ARGUMENTS.gridsortdir NEQ "">
  ORDER BY #ARGUMENTS.gridsortcolumn# #ARGUMENTS.gridsortdir#</cfif>
     </cfquery>
      <!--- And return it as a grid structure --->
      <cfreturn QueryConvertForGrid(Personnels,
                     ARGUMENTS.page,
                     ARGUMENTS.pageSize)>
   </cffunction>

Le tout à adpater à convenance.

Ou plus simplement le code de Serge à l'adresse suivante

http://www.create2.be/public/blog/2005/11/cfgrid-recherche-en-saisissant-les.html

Bref que du bonheur

A+ et encore merci de votre aide
0
Rejoignez-nous