Discussion :

[majong]

bonjour, j'aimerais appeler les fonctions f1(parametre),f2(parametre),...
avec prototype.js quelqu'un a t-il une idée ? (chaq fonction fait une requete ajax en utilisant prototype.js)

J'ai essayé: window.onload = function () {...} mais cela ne marche pas toujours, cela depend du temps d'execution de chaq fonction. A mon avis il faut attendre l'execution de chaq fonction. Mais je ne sais pas comment faire ? http://dcabasson.developpez.com/arti...ototype-1.4.0/ ne soulève pas le problème !

[gwyohm]

Salut,

Ta question concerne l'execution de plusieurs fonctions au load de la page ou l'enchainement de fonctions AJAX ? Ou les 2 ?

Détecter le load (par exemple, on peut faire de différentes facons)

Code :

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

1
2
3
4
5
 
Event.observe(window, "load", function() {
  f1(params);
  f2(params);
});

Pour enchainer les appels AJAX, (si tu dois attendre le resultat d'une requete AJAX avant d'envoyer la deuxieme), il faut passer par les callback :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function f1(params) {
  new Ajax.request("url", {
    parameters: params, 
    onSuccess: function(response) {
      f2();
    }
  });
}
 
function f2() {
// ...
}

[majong]

(enchainement)
Il n'a t-il pas un proceder par prototype pour le faire automatiquement (du genre il met dans une pile d'appel ?).

Autre exemple, lorsqu'un utilisateur clique et n'attend pas la reponse, une 2° fonction peut etre appelée donc je ne pourrais pas savoir qui s'appelle qui !

[gwyohm]

Il n'a t-il pas un proceder par prototype pour le faire automatiquement (du genre il met dans une pile d'appel ?).

Non, à moins de te créer ta propre classe :

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
 
var AjaxStack = Class.create(  {
  initialize : function() {
   this.ajaxCalls = [];
  },
  push : function(url, params) {
   this.ajaxCalls.push({url: url, params: params}) ;
  },
  run : function() {
   var ajaxOpts = this.ajaxCalls.shift();
   if(ajaxOpts) {
     new Ajax.Request(ajaxOpts.url, {
      parameters: ajaxOpts.params,
      onSuccess: this.run.bind(this),
      onFailure:function() {alert("Erreur: " + ajaxOpts.url);}
     });
   }
 }
}  );
 
// ...
 
var ajaxStack = new AjaxStack();
ajaxStack.push("/une/url", {foo:"bar"});
ajaxStack.push("/une/autre/url", {jambon:"fromage"});
ajaxStack.run();

Autre exemple, lorsqu'un utilisateur click et n'attend pas la reponse, une 2° fonction peut etre appelée donc je ne pourrais pas savoir qui s'appelle qui !

Je ne comprends pas le "qui s'appelle qui "

EDIT : exemple non testé

[majong]

interressant, comment alors appeler mafonction (qui dépend de mes parametres) dans onsuccess ? (en faite, f1 appelle success_f1(reponse) en cas de succes, f2 appelle success_f2(reponse) en cas de succes)

(this.run.bind(this) ???)


Autrement dit que devient les traitements d'appel de f1 en cas de succes ?

[gwyohm]

interressant, comment alors appeler mafonction (qui dépend de mes parametres) dans onsuccess ? (en faite, f1 appelle success_f1(reponse) en cas de succes, f2 appelle success_f2(reponse) en cas de succes)

Presque rien à changer : la response est envoyé à run aux appels suivants...

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
var AjaxStack = Class.create(  {
  // ...
  run : function(response) {
   var ajaxOpts = this.ajaxCalls.shift();
   if(ajaxOpts) {
     if(response) {
       // faire quelque chose avec response
     }
     new Ajax.Request(ajaxOpts.url, {
      parameters: ajaxOpts.params,
      onSuccess: this.run.bind(this),
      onFailure:function() {alert("Erreur: " + ajaxOpts.url);}
     });
   }
 }
}  );
 
// ...

(this.run.bind(this) ???)

C'est pcq le callback est une fonction anonyme, en faisant un bind, on spécifie qui sera son contexte; dans notre cas on veut this comme this

[majong]

ou punaise, ma tete semble fumer de tous les cotés !

Je resume, je définis ma classe AjaxStack =..
puis une instance de la classe en global: ajaxStack=new ...

je laisse

Code :

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

window.onload = function(){f1(parametre);f2(parametre);...}

puis:

Code :

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

1
2
3
4
5
function f1(params) {
ajaxStack.push("url", {foo:"bar"});
ajaxStack.run();
//ici je fais le traitement comment ? :aie:
}

[gwyohm]

Alors entre parenthese, pourquoi faire du ajax au moment du load

Sinon, la classe AjaxStack avait pour but de remplacer tes fonctions f1 et f2.
Il va falloir adapter...

[majong]

j'avais le choix entre developper le module en php, puis si l'utilisateur choisit un filtre je fais un submit, mais ce site va accueillir 1500 personnes connectés simultanément, il est plus judiciable de ne pas rafraichir si cela est possible. Si je n'aarive pas à règler ce probleme, je vais faire en version php puis reprendre mon module ajax si l'utilisateur active un filtre. (Dans ma tete prototype gérait la transition des fonctions)

[majong]

Et je si je mettais les fonctions dans un tableau global, puis j'appelle la fonction de tete, j'aurais juste à mettre dans toutes mes fonctions ajax, onsucces : function(){//faire mes traitement, puis enlever la tete du tableau, et executer la fonction de la tete suivante du tableau}

[gwyohm]

Oui, c'était un peu l'objet de AjaxStack.

Peut être tu peux aussi regarder Ajax.Responders. Tu pourrais enregistrer une fonction dans le onSuccess qui se chargerait de jouer les fonctions suivantes de ton tableau.
Attention cependant, une fois ta chaine terminée, il faudra désinscrire ta fonction de l'événement success de Ajax.Responders, en particulier si tu as d'autres appels AJAX plus simples