Appel AJAX en JQuery

Version imprimable

Bonjour a tous,

Je suis sur un petit souci avec Jquery. Je suis une fervent de Prototype mais, je travail avec des développeurs qui utilisent JQuery donc je vais être obligé de m'y mettre aussi :oops:

Voici mon souci, je cherche à écrire un appel AJAX qui va interroger un agent qui format une réponse html. J'utilise le code suivant en javascritp :
Code:

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 function GoRechercheAnnuaire(start){ var CompteArebours = new Date(); annuaire_text = $('#annuaire_text').val(); annuaire_critere = $('#annuaire_critere').val(); //Construcution de l'appel AJAX request = 'http://localhost/offi.nsf/GoRechercheAnnuaire?OpenAgent&annuaire_text='+annuaire_text +'&annuaire_critere='+annuaire_critere+'&start='+start +'&time=' + CompteArebours.getSeconds(); $.ajax({ type: "GET", url: request, dataType: "html", beforeSend:function(){ $('#acc_content').css('textAlign' , 'center'); $('#acc_content').html('<img src="images/interface/ajax-loader.gif">'); }, error:function(){ $('#acc_content').css('textAlign' ,'left'); $('#acc_content').html('<ERREUR de traitement>'); }, success:function(data){ //affiche le contenu du fichier dans le conteneur dédié $('#acc_content').css('textAlign' ,'left'); $('#acc_content').html(data); } }); }
Le problème est multiple...
D'une part Le code ne réagi pas de façon équivalente entre IE et FireFox.
Tout semble fonctionner sur IE et Firefox ne capte pas le retour de "data"

Cela va même plus loin puisque avec firebug je ne voie même pas la requet "get" passer ce qui me parait tout à fait étrange!!!

Ce qui est gênant puisque je ne peux pas valider le code retournée par la requet.

Si quelqu'un a une idée je suis preneur!!!
Par avance merci.

07/09/2009, 10h55
danielhagnoul
Bonjour.

Je ne sais pas si c'est « le problème », mais vous construisez un « request» alors qu'ajax attend plutôt (exemple) :
Code:

1 2 3 4 5 6 7 8 9 $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });
Voir : http://docs.jquery.com/Ajax/jQuery.ajax#options
07/09/2009, 11h16
bigbentem

Citation:

Envoyé par danielhagnoul

Bonjour.

Je ne sais pas si c'est « le problème », mais vous construisez un « request» alors qu'ajax attend plutôt (exemple) :

Il attend une page à interroger, pour ma part la page est un agent de traitement qui renvoi un page web donc pas de souci juste je fabrique mon appel de façon dynamique pour que ce soir lisible.

Donc non je ne pense pas que ce soit le souci, d'autant que sous IE, le problème n'existe pas il envoi bine la requête et reçoit le résultat convenablement...

Si ça peut aider si je renvoi dans ma sortie sur le success pas data mais un text brut type 'coucou' ça fonctionne très bien!!!!

donc la requête part, revient semble-t-il mai je ne peux capter le flux de donner pour l'afficher...

Je me permet de relancer le sujet parce que là je peine franchement!!!

J'ai écrit mon code avec prototype et ça fonctionne...

J'ai essayer différente choses avec JQuery et pour le moment je tourne en rond.
Je sais que l'appel à ma page extérieur fonctionne puis que le résultat de la page s'affiche convenablement lorsque je fais l'appel avec prototype.

En revanche avec JQuery la requête est semble-t-il bien transmise mais impossible de lire le résultat...

J'ai testé en mettant une requête en "POST", même si je ne voie pas l'utilité puisque je veux lire une page HTML donc le "GET" me semble plus approprié!!!!
Résultat sensiblement différent il me recharge la page d'origine sans prendre en compte la page de retour que je génère!!!

Je suis preneur de toutes les idées.... Merci :calim2:

Je remet le code de mon appel javascript au cas ou puisque je l'ai changé
Code:

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 function GoRechercheAnnuaire(annu_text , annu_critere , nb_start){ var col_g_txt = '<div id="col_gauche"><div><img alt="" class="float_left" src="images/interface/tetieres_coin_gauche1.gif" /><h2 class="tetiere4">Annuaire</h2></div><div id="autres_annu"><h4 class="droite couleur03">communauté</h4>Vous pouvez également, sous Lotus, consulter les annuaires suivants :<br /><a href="#" class="js_lien_externe">Annuaire Aramice</a><br /><a href="#" class="js_lien_externe">Annuaire Audiens</a><br /><a href="#" class="js_lien_externe">Annuaire Novalis-Taitbout</a></div><div id="col_gauche_site"></div></div>'; $('#acc_content').html(col_g_txt + '<div id="col_centrale"></div>'); var CompteArebours = new Date(); //Construcution de l'appel AJAX request = 'http://vpa1ddoe1/test/W3/offi.nsf/GoRechercheAnnuaire?OpenAgent&annuaire_text='+annuaire_text +'&annuaire_critere='+annuaire_critere+'&start='+nb_start+'&time=' + CompteArebours.getSeconds(); $.ajax({ type: 'get', url: request, dataType: 'html', beforeSend:function(){ $('#col_centrale').html('<h1>Recherche en cours</h1><img src="images/interface/ajax-loader.gif">'); }, error:function(){ $('#col_centrale').html('<ERREUR de traitement>'); }, success:function(data){ //affiche le contenu du fichier dans le conteneur dédié $('#col_centrale').html(data); } }); }

Personnelement je dirais un truc du style :

Code:

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
 
	var requestURL = 'http://vpa1ddoe1/test/W3/offi.nsf/GoRechercheAnnuaire' ;
 
jQuery.ajax({
	type: "POST",
	url: requestURL,
	cache: false,
	data: ({OpenAgent: '',
		  annuaire_text: annuaire_text,
		  annuaire_critere: annuaire_critere,
		  start: nb_start,
		  time: CompteArebours.getSeconds()
		}),
	dataType: "html",
	beforeSend:function(){
			$('#col_centrale').html('<h1>Recherche en cours</h1><img src="images/interface/ajax-loader.gif">');
		},
	error:function(){
alert("error") ;
		$('#col_centrale').html('<ERREUR de traitement>');
	},
	success:function(data){
alert("succes : " + data) ;
		//affiche le contenu du fichier dans le conteneur dédié
		$('#col_centrale').html(data);
	}
});

PS : verifie aussi si tout ce passe bien dans ton agent Notes (j'ai souvent eu des problèmes avec cela)

08/09/2009, 10h06
bigbentem
Merci je test ça tout de suite...

Du coté agent Notes tout est ok en appel via Prototype il passe bien et en appel manuel de l'adresse il répond correctement....

Je te tiens au courant sur le test.

Ok, je viens de tester alors j'ai deux phénomènes...
1. La requête part semble-t-il et elle revient bien dans le alert avec un problème d'argument, que je vais trouver je ne sais pas si c'est notes ou javascript encore...
  Ok donc le souci est que le Querystring qui arrive sous Notes est Vide!!!
2. Une fois le alert passé les data ne sont pas insérés dans le $('#col_centrale').html(data)

Tu peux egalement passer cela en GET (je ne sais plus si Notes traite de maniere differente POST et GET)

de plus essaye de modifier (car le openagent n'a pas de valeur)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 requestURL = 'http://vpa1ddoe1/test/W3/offi.nsf/GoRechercheAnnuaire?OpenAgent' ; jQuery.ajax({ type: "POST", url: requestURL, cache: false, data: ({annuaire_text: annuaire_text, annuaire_critere: annuaire_critere, start: nb_start, time: CompteArebours.getSeconds() }), ....

08/09/2009, 11h35
bigbentem

J'ai également fais ce teste ce matin mais le traitement recharge la page principal dont je viens et donc écrase mon évènement...
De plus je ne voie jamais les alert depuis 1h30 c'est franchement étrange ça sent le cache à plein nez me d'où je ne sais pas!!! :?

tu peux essayer de changer tes methodes error et succes par

Code:

1
2
3
4
5
 
	complete : function(data, status) {
alert("complete : " + status + "/ " + data ) ;
$('#col_centrale').html(data);
        }

08/09/2009, 12h27
bigbentem

La c'est le ponpon il ne passe plus dans rien ne fait pas les alert...

Je vais passer tout ça par la fenêtre moi.... :evilred:

Je reprends le problème au début!!!
Je viens de ré-écrire tout le code sans m'occuper de la bibliothèque JQuery j'ai donc tout fais à la main....

J'arrive à :

Code:

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
40
41
42
43
44
45
46
47
48
49
 
// JavaScript Document
function getXhr(){
  var xhr = null; 
  if(window.XMLHttpRequest) // Firefox et autres
    xhr = new XMLHttpRequest(); 
  else if(window.ActiveXObject){ // Internet Explorer 
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
	}
  else { // XMLHttpRequest non supporté par le navigateur 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    xhr = false; 
	} 
  return xhr
}
 
/**
* Méthode qui sera appelée sur le click du bouton
*/
function GoRechercheAnnuaire(annu_text , annu_critere , nb_start){
  var xhr = getXhr()
 
  var col_g_txt  = 	'<div id="col_gauche"><div><img alt="" class="float_left" src="images/interface/tetieres_coin_gauche1.gif" /><h2 class="tetiere4">Annuaire</h2></div><div id="autres_annu"><h4 class="droite couleur03">communaut&eacute;</h4>Vous pouvez &eacute;galement, sous Lotus, consulter les annuaires suivants :<br /><a href="#" class="js_lien_externe">Annuaire Aramice</a><br /><a href="#" class="js_lien_externe">Annuaire Audiens</a><br /><a href="#" class="js_lien_externe">Annuaire Novalis-Taitbout</a></div><div id="col_gauche_site"></div></div>';
  alert('coucou annuaire_js');
	document.getElementById("acc_content").innerHTML = col_g_txt + '<div id="col_centrale"></div>';
 
	var CompteArebours = new Date();
  var request = 'http://vpa1ddoe1/test/W3/offi.nsf/GoRechercheAnnuaire?OpenAgent&annuaire_text='+annu_text
	+'&annuaire_critere='+annu_critere+'&start='+nb_start+'&time=' + CompteArebours.getSeconds();
 
  // On défini ce qu'on va faire quand on aura la réponse
  xhr.onreadystatechange = function(){
  // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    if(xhr.readyState == 4){
      if (xhr.status == 200){
        alert("réponse " + xhr.responseText);
      }
    }else{
      alert("La requet est en cours - status = " + xhr.status);
    }
  }
 
	xhr.open("GET",request,false);
	xhr.send(null);
}

Dans le cas présent je voie le tout premier alert.
Le changement de status est de 1 ou 2 mais pas 4 semble-t-il
Erreur elle passe bien à 4 mais le status est à 0 et non 200 pour la page valide...
Ce qui est étrange c'est que la page se recharge pour revenir à la page d'origine... Phénomène non constaté avec prototype... Je sais que c'est plutot capilotracté là mais bon j'en suis aux trucs étrange donc je chercher...

Pour info le morceau de page HTML est consu comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<form name="RechercheAnnuaire" onSubmit="GoRechercheAnnuaire($('#annuaire_text').val() , $('#annuaire_critere').val() , '0')">
	<!-- <form action="annuaire.htm" method="post"> -->
	<div class="recherche_annuaire"><h5><label for="annuaire_text">Annuaire</label></h5>
		<input id="annuaire_text" type="text" value="ma recherche" onclick="$('annuaire_text').val('');" /><br />
		<label class="couleur02 gras par" for="annuaire_critere">par</label>
		<select id="annuaire_critere">
			<option value="Searchnom">nom</option>
			<option value="Searchprenom">pr&eacute;nom</option>
			<option value="Searchnumero_de_telephone_poste">n° de poste</option>
			<option value="Searchcode_etablissement">code &eacute;tablissement</option>
			<option value="Searchlieu_ville">localisation</option>
			<option value="Searchpiece">pi&egrave;ce</option>
			<option value="Searchresponsable">responsable</option>
			<option value="Searchlibelle_service">service</option>
			<option value="Searchlibelle_departement">branche</option>
		</select>
		<a onclik="submit()" style="cursor:pointer">
		<input class="recherche_annuaire_submit" src="images/interface/bouton_ok_fond_grisfonce.gif" title="Chercher dans l'annuaire" type="image" value="Ok" />
		</a>
	</div>
</form>

08/09/2009, 13h41
Bovino

Code:

onSubmit="GoRechercheAnnuaire($('#annuaire_text').val() , $('#annuaire_critere').val() , '0'); return false"
08/09/2009, 15h50
bigbentem

Citation:

Envoyé par Bovino

Code:

onSubmit="GoRechercheAnnuaire($('#annuaire_text').val() , $('#annuaire_critere').val() , '0'); return false"

Oui il semble que ce soit ça d'après une discutions avec rberthou qui me conseil de ne pas passer de submit() sur le form...

Je suis en cours de modification en mettant l'appel à ma fonctin sur le onclick du <a></a>

Mais pour le moment ce n'est pas concluant encore.
08/09/2009, 15h54
rberthou

Oui mais je pense que le "return false" doit fonctionner parfaitement (et est peut etre plus simple pour toi).
08/09/2009, 16h05
bigbentem

Bonheur!!!!! :ccool::ccool::ccool:

Merci à tout les deux!!!

Ca fonctionne enfin, bon je ne sais toujours pas pouquoi firefox ça ne fonctionne pas mais c'est moins grave e public est ciblé sur IE et aucune chance pour que il y ai des accès FF