Utiliser les données d'un Cfquery avec AJAX [Résolu]

Timwaz 23 Messages postés lundi 5 mai 2008Date d'inscription 12 mai 2009 Dernière intervention - 29 juil. 2008 à 12:04 - Dernière réponse : Timwaz 23 Messages postés lundi 5 mai 2008Date d'inscription 12 mai 2009 Dernière intervention
- 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
Afficher la suite 

Votre réponse

10 réponses

Meilleure réponse
nickadele 1253 Messages postés mercredi 7 août 2002Date d'inscription 10 avril 2013 Dernière intervention - 29 juil. 2008 à 14:58
3
Merci
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

Merci nickadele 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 92 internautes ce mois-ci

Commenter la réponse de nickadele
Meilleure réponse
nickadele 1253 Messages postés mercredi 7 août 2002Date d'inscription 10 avril 2013 Dernière intervention - 30 juil. 2008 à 12:18
3
Merci
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

Merci nickadele 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 92 internautes ce mois-ci

Commenter la réponse de nickadele
Meilleure réponse
nickadele 1253 Messages postés mercredi 7 août 2002Date d'inscription 10 avril 2013 Dernière intervention - 30 juil. 2008 à 14:11
3
Merci
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

Merci nickadele 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 92 internautes ce mois-ci

Commenter la réponse de nickadele
nickadele 1253 Messages postés mercredi 7 août 2002Date d'inscription 10 avril 2013 Dernière intervention - 29 juil. 2008 à 13:11
0
Merci
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
Commenter la réponse de nickadele
Timwaz 23 Messages postés lundi 5 mai 2008Date d'inscription 12 mai 2009 Dernière intervention - 29 juil. 2008 à 14:23
0
Merci
 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
Commenter la réponse de Timwaz
Timwaz 23 Messages postés lundi 5 mai 2008Date d'inscription 12 mai 2009 Dernière intervention - 29 juil. 2008 à 15:26
0
Merci
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
Commenter la réponse de Timwaz
Timwaz 23 Messages postés lundi 5 mai 2008Date d'inscription 12 mai 2009 Dernière intervention - 30 juil. 2008 à 11:36
0
Merci
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';
}
Commenter la réponse de Timwaz
Timwaz 23 Messages postés lundi 5 mai 2008Date d'inscription 12 mai 2009 Dernière intervention - 30 juil. 2008 à 13:30
0
Merci
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>
Commenter la réponse de Timwaz
nickadele 1253 Messages postés mercredi 7 août 2002Date d'inscription 10 avril 2013 Dernière intervention - 30 juil. 2008 à 14:05
0
Merci
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
Commenter la réponse de nickadele
Timwaz 23 Messages postés lundi 5 mai 2008Date d'inscription 12 mai 2009 Dernière intervention - 4 août 2008 à 12:56
0
Merci
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
Commenter la réponse de Timwaz

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.