Appel de fonction avec parametre dans fonction

**VooDooNet** · 30/04/2010, 08h56

Bonjour,
je cherche a adapter un script "d'autocomplete" pour pouvoir passer l'id du champ de saisie en parametre, et ainsi pour appel ce script plusieurs fois dans une page.

Voila les fonctions pour les suggestions:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
var ajaxObj = getAjaxObject();
 
function autoSuggest(id,qtype)
{
   var searchInput = getElemId(id).value;
 
   var url = "modules/Samples/autosuggest.php";
   var params = "input=" + searchInput + "&qtype="+ qtype;
 
   if (trim(searchInput) !== "")
   {
	  sendRequest(ajaxObj, url, params, handleSuggestResponse(id));
   }
   else
   {
	  hideSuggestions();   
   }
}
 
function handleSuggestResponse(id)
{
   if (ajaxObj.readyState == 4)
   {
      if (ajaxObj.status == 200)
      {
		  try
		  {
			  var XMLResponse = ajaxObj.responseXML.documentElement;
			  // work with the xml response
			  var keywordsTag = XMLResponse.getElementsByTagName('keywords');
 
			  var suggestions = new Array();
 
			  for (var i = 0; i < keywordsTag.length; i++)
			  {
				 var keywords = keywordsTag.item(i).firstChild.data.toString();
				 suggestions.push(keywords);
			  }
			  showSuggestions(suggestions);
		  }
		  catch(e)
		  {
			  hideSuggestions();
			  if (trim(ajaxObj.responseText) !== "")
			  alert(ajaxObj.responseText);  
		  }
	  }
   }
}
 
function showSuggestions(suggestions)
{
   var listWrapID = getElemId("listWrap");
   listWrapID.style.visibility = "visible";
 
   var listID = getElemId("searchList");
   listID.innerHTML = "";
 
   for(var i = 0; i < suggestions.length; i++)
   {
     listID.innerHTML += "<li><a href=\"javascript:void(0);\" onclick=\"insertKeyword(this.innerHTML);\">" + suggestions[i] + "</a></li>";      
   }     
}
 
 
function hideSuggestions()
{
   var listWrapID = getElemId("listWrap");
   listWrapID.style.visibility = "hidden";	
}
 
function insertKeyword(str)
{
	getElemId("input").value = str;
	hideSuggestions();
}

et le coté ajax

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*
Ajax Library:
===========
This library contains all the code you need to initiate the xmlHTTPObject
and the general procedure of sending ajax request to the server and
receiving it.
@version: 1.0
@author:  Waseem Khan
@blog:    http://blog.pakcoders.com
*/
 
function getAjaxObject()
{
  // initially set the object to false 
  var XMLHttpRequestObject = false;
  if (window.XMLHttpRequest)
  {
      // check for Safari, Mozilla, Opera...
	  XMLHttpRequestObject = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) 
  {
      // check for Internet Explorer
	  XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (!XMLHttpRequestObject)
  {
	  alert("Your browser does not support Ajax.");
	  // return false in case of failure
	  return false;
  }
  // return the object in case of success
  return XMLHttpRequestObject;
}
 
 
function sendRequest(xmlHTTPObject, url, parameters, handleResponse)
{
   if(xmlHTTPObject)
   {
      // continue if the object is idle
      if (xmlHTTPObject.readyState == 4 || xmlHTTPObject.readyState == 0) 
      {
		 // open connection and send "GET" request to server
		 xmlHTTPObject.open("POST", url, true);
		 // send the appropriate headers
		 xmlHTTPObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		 // set the function to be called on a change in ajaxObj state
		 xmlHTTPObject.onreadystatechange = handleResponse;
		 // set additional parameters (to be sent to server) to null
         xmlHTTPObject.send(parameters);
      }
   }
}

j'ai ajouté un parametre id a la fonction autoSuggest, puis a la fonction handleSuggestResponse(id), mais a ce moment la, j'obtiens l'erreur:
non implementé

sendRequest(ajaxObj, url, params, handleSuggestResponse(id));

Je ne comprensd pas ce qui cloche. D'un autre coté, je suis bloqué aussi pour trimbaler ma variable id jusqu'a la fonction insertKeyword ...

Un peu de lumiere me ferait du bien!!

A+
VooDoo

**vermine** · 30/04/2010, 09h04

Bonjour,

Il me semble que vous devez vous trimballer la variable sur tout le chemin, donc en la précisant ici:

Code :

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

1
2
 
var params = "input=" + searchInput + "&qtype="+ qtype + "&ma_variable=" + ma_variable;

Ensuite, Ajax devra la réenvoyer également à la fonction callback. Elle se trouve alors dans "parameters" et là vous pourrez l'utiliser librement.

**SpaceFrog** · 30/04/2010, 09h08

il faut aussi penser à echapper les paramètres si ceux ci contiennent des espaces ou des caractères spéciaux...
cf escape() ou encodeURIComponent()

**Bovino** · 30/04/2010, 09h22

Ne connaissant pas ta fonction sendRequest(), on ne peut que supposer, mais j'imagine qu'elle doit contenir une ligne du style

Code :

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

ajaxObj.onreadyStateChange = handleSuggestResponse(id);

ce qui est une erreur puisque dans ce cas, tu affectes à ton gestionnaire le résultat de l'exécution de la fonction et non l'appel de la fonction.
Il faut t'arranger pour obtenir un code équivalent à

Code :

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

ajaxObj.onreadyStateChange = function(){handleSuggestResponse(id);}

**VooDooNet** · 30/04/2010, 11h42

Merci pour vos reponses.
Vermine et SpaceFrog, votre suggestions amenera ma variable sur mon code php, qui lui fait uniquement la requete et renvoi les données en xml. Donc pas moyen d'y specifier la destination non?

Bovino, la fonction est dans le code coté ajax.. il faut que je la transforme en ca ??

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
function sendRequest(xmlHTTPObject, url, parameters, {handleSuggestResponse(id);})
{
   if(xmlHTTPObject)
   {
      // continue if the object is idle
      if (xmlHTTPObject.readyState == 4 || xmlHTTPObject.readyState == 0) 
      {
		 // open connection and send "GET" request to server
		 xmlHTTPObject.open("POST", url, true);
		 // send the appropriate headers
		 xmlHTTPObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		 // set the function to be called on a change in ajaxObj state
		 xmlHTTPObject.onreadystatechange = handleResponse;
		 // set additional parameters (to be sent to server) to null
         xmlHTTPObject.send(parameters);
      }
   }
}

**Bovino** · 30/04/2010, 13h12

Non, pas du tout, ta notation ne correspond à rien...

Ce qu'il faut comprendre, c'est que dans un code JavaScript, en supposant que tu aies une fonction appelée ma_fonction, lorsque tu as une ligne

Code :

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

ma_fonction();

ou

Code :

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

var toto = ma_fonction();

tu t'attends bien à ce que la fonction soit exécutée et dans le 2e cas, que le résultat de cette exécution soit affecté à la variable toto.

Donc quand tu écris

Code :

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

sendRequest(ajaxObj, url, params, handleSuggestResponse(id));

ou

Code :

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

ajaxObj.onreadyStateChange = handleSuggestResponse(id);

il n'y a aucune raison pour que ce soit différent !

En revanche, en écrivant

Code :

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

sendRequest(ajaxObj, url, params, handleSuggestResponse);

ou

Code :

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

ajaxObj.onreadyStateChange = handleSuggestResponse;

ce sont bien les référence à ta fonction qui sont affectés au paramètre de la fonction ou à la propriété onreadyStateChange de l'objet XMLHttpRequest

Dans ton cas, il me semble que le plus simple serait de faire :

Code :

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

sendRequest(ajaxObj, url, params, handleSuggestResponse, un_id);

tu remarqueras au passage que j'ai modifié le nom du paramètre, il est très maladroit de donner à des fonctions, variables, paramètres ou autres des mots clé du langage

puis

Code :

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

1
2
3
ajaxObj.onreadyStateChange = function(){
    handleSuggestResponse.call(this, un_id);
}

**VooDooNet** · 30/04/2010, 15h51

Merci pour la belle explication.
J'ai tout compris sauf la fin :

Code :

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

1
2
3
ajaxObj.onreadyStateChange = function(){
    handleSuggestResponse.call(this, un_id);
}

et j'ai essayé d'implementer ca mais j'ai bataillé toute l'aprem, impossible de trimbaler le parametre... (qui maintenant s'appelle targetid)

j'ai meme essayé la proposition de Vermine avec ton call, mais idem...
je pensais pas que ca serait si compliqué d'adapter ce script....

**VooDooNet** · 30/04/2010, 17h24

Bon j'ai trouvé une parade avec la piste de vermine.
Je passe le targetid au php, et je le redonne en xml...

c'est peut etre pas la meilleure methode, mais ca marche!!

Par contre j'ai un souci avec les elements contenu dans ma table, certains contiennent ces caracteres:
/:.-()*%

A quel moment dois-je echapper pour pouvoir afficher ces caracteres, et comment????

**SpaceFrog** · 30/04/2010, 20h13

escape() ou encodeUriComponent()

**VooDooNet** · 02/05/2010, 10h58

pareil

j'ai essayé coté php et js...
en fait j'ai ce genre de chose dans ma table:
ALBERDINGK® RIZINUSÖL C

et par exemple, ces 2 ® Ö caracteres ne passent pas...
ma table est une table mySQL innodb latin1_general_ci

comment on les gere ces caracteres???

**VooDooNet** · 03/05/2010, 18h40

résolu avec php: utf8_encode

Appel de fonction avec parametre dans fonction

JavaScript

Discussions similaires

Partager

Partager