Discussion :

[coeurdange]

Bonjour,

J'ai un problème pour utiliser JQUERY et ajax dans des listes déroulantes d'un formulaire d'une page d'un fichier Coldfusion (cfm). J'utilise Coldfusion (fichier cfc) pour faire une requête pour récupérer les résultats d'une base de données Oracle.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<cfcomponent output="false">
	<cffunction name="getTransports" access="remote" returnFormat="json"  returnType="Array">
        <cfargument name="VIL_CD_DEST" type="string" required="yes">  
        <cfargument name="VIL_CD_ORIG" type="string" required="yes"> 
 
 
	<cfquery name ="transport" datasource="#application.datasource#">
	<!---Query Transports--->
		select * from APP_GEN_CODE_T where ST_CLASS_CODE = 'BUD_CTRP'
    </cfquery>
 
	<cfset transports = arrayNew(1)>
 
	<cfloop query="transport">		
 
		<cfquery name="defined_transport" datasource="#application.datasource#">
			select * from TABLE_FRAIS 
			where VIL_CD_DEST = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.VIL_CD_DEST#">
			and VIL_CD_ORIG = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.VIL_CD_ORIG#">
			and CTRP_ST_CODE = '#transport.ST_CODE#'	
		</cfquery>
 
	  <cfif defined_transport.recordCount eq 0>
	    <cfset transport_value = "#transport.ST_DESCRIPTION# (not defined)">
	  <cfelse>  
		<cfset transport_value = "#transport.ST_DESCRIPTION#">
	  </cfif>
 
		<cfset transports[currentRow]["ID"] = #transport.ST_CODE#>
		<cfset transports[currentRow]["VALUE"] = #transport_value#>
	</cfloop>
 
		<cfreturn transports>
	</cffunction>
</cfcomponent>

Cette fonction lancée dans mon navigateur est fonctionnelle et récupère correctement les résultats sous un format JSON:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"VALUE":"Apex (not defined)","ID":"APEX"},{"VALUE":"Plane (not defined)","ID":"AVI"},{"VALUE":"Train 1st class","ID":"TRAIN 1"},{"VALUE":"Car","ID":"VOIT"},{"VALUE":"Cost 0 (not defined)","ID":"ZERO"}]

Je ne sais pas si le format de ce JSON est correct pour fonctionner avec le script JQUERY.

Dans le script JQUERY, la fonction success ne récupère pas les résultats et un console.log(result) affiche "undefined". Si j'essaye de faire console.log(result.length), le script lance error et affiche l'erreur en retour.

Dans firebug, je peux voir dans l'onglet XHR que la requête a été lancée et les résultats en JSON (ci-dessus) sont récupérés.

Voici mon script QUERY script dans mon fichier CFM:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$().ready(function() {
     $.ajax({
        type:   'GET',
        url:    'transport.cfc',
        data: {
            method:     'getTransports',
            CITY_TO:    'LUX',
            CITY_FROM:  'UWP'
        },
        dataType:       'json',
        contentType:    'application/json',
 
        success: function(result) {
            var select = $("##transp"); // utilisation de ## pour échapper # car nous sommes en coldfusion
            select.empty();
            select.append(
                new Option('Select transport', '-1')
            );
            console.log(result) // affiche "undifined"
 
            /* GENERE ERREUR
            $.each(result, function(i, item) {
                select.append(
                    new Option(item.ID, item.VALUE)
                );
            });*/
        },
 
        error: function(xhr, message) {
            alert('ajax request failed');
            console.log(xhr, message);
        }
     });
});

J'utilise la version JQUERY 1.1.2. et j'ai essayé d'utiliser la dernière version, mais le problème persiste.

J'ai essayé de suivre la solution proposée dans un forum: remplacer json par jsonp. En faisant cela, les résultats sont bien affichés dans la console grâce au console.log(result) mais la boucle each n'est pas parcourue et l'erreur 'ajax request failed' apparaît à nouveau.

Pourriez-vous m'aider à résoudre ce problème svp car je ne sais pas comment faire cela.

Merci d'avance pour votre aide

[danielhagnoul]

Avec la dernière version de jQuery, je vous conseille de tester le code suivant en JSON ou en JSONP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$( function(){ // forme abrégée de $(document).ready( function( ){      
 
  var
    jqXHR = $.getJSON( "transport.cfc", {
      "method" : "getTransports",
      "CITY_TO" : "LUX",
      "CITY_FROM" : "UWP"    
    });
 
  setTimeout( function(){
    // Si l'objet différé existe dans l'état "attendre", 
    // alors exécute la méthode fail()
 
    if ( jqXHR && jqXHR.state() === "pending" ){
      jqXHR.abort();
    }
  }, 3000 ); // 3s
 
  jqXHR.done( function( data, textStatus, jqXHR ){
    // succès de la transaction, on doit traiter le contenu de data
    console.log( data, textStatus, jqXHR );
 
  });
 
  jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
    // échec de la transaction, gérer la catastrophe
    console.log( jqXHR, textStatus, errorThrown );
 
  });
 
  jqXHR.always( function( jqXHR, textStatus ){
    // la transaction est terminée
    // nettoyage
    // exécution d'un code dépendant
    console.log( jqXHR, textStatus );
 
  })
 
});

[coeurdange]

Merci ce code est fonctionnel. Pourriez-vous me dire comment avec ce code mettre un message de chargement (image ou texte "Loading..." dans les listes déroulantes) avant que le résultat ne soit renvoyé par AJAX?

Merci d'avance pour votre aide

[danielhagnoul]

Les transactions AJAX sont toujours asynchrones et généralement rapides, donc elles ne bloquent pas l'utilisateur. La plupart du temps, un "loading..." n'est pas utile. Dans le cas contraire, il faut mettre en place le "loading..." juste avant l'appel à $.getJSON() et l'enlever dans jqXHR.always() (transaction AJAX terminée).