ajax Post et form

[Michael DELIQUE]

merci, je regarderais ça des que possible !

[abertisch]

Bonjour

j'ai un code ajax qui envois des données a un form, je passe les données par l'url en GET via un champ $$return et un @urlquerystring ça marche

hors il faudrait que je les envois données en post donc plus par l'url

mais là dans mon masque je fait comment pour les récupérer ?

Salut,

Je sais que le poste date mais comment tu fais pour ajouter des données dans un document sans un agent ?!?

[Michael DELIQUE]

salut, tu passe les données dans l'url...

[abertisch]

Ah oui c'est juste, j'avais oublié cette technique. Merci

[Michael DELIQUE]

Salut

tu as tester ça sur un form ou sur un agent ?

[stloje]

Oui, à partir d'un bouton via l'événement "OnClick". Tu veux un exemple?

[Michael DELIQUE]

ouaip je dis pas non !

[stloje]

Avant d'aller plus loin, tu connais les méthodes utilitaires de Prototype? C'est juste pour savoir s'il faut que j'ajoute plus d'explications à l'exemple.

[Michael DELIQUE]

pas eu le temp de me pencher dessus, envois le tout je me débrouillerais

[stloje]

La bibliothèque « prototype-1.6.0.3.js » se trouve dans le répertoire « html\prototype » du serveur Domino. Cela m’évite de créer une bibliothèque JavaScript dans chacune des bases Notes.

Je fais appel à cette bibliothèque à partir du « contenu de titre HTML » du masque à l’aide de la commande suivante :
<b>"‹script language=\"JavaScript\" type=\"text/javascript\" src=\"/prototype/prototype-1.6.0.3.js\"› ‹/script›"</b>

J’utilise aussi la bibliothèque LightBox pour afficher mes élements. Si tu le désires, je ferai un nouveau Post consacrée à cette bibliothèque.


<b>Fonctions utilitaire Prototype</b>

Il y en a uniquement une qui sera utilisée dans cet exemple
<b>$(‘id’)</b> : cette fonction est la concaténation de la commande JS « document.getElementById (‘id’) »


<i>Voici deux exemples d’utilisation d’Ajax</i>

<b>Exemple avec « get »</b>

A partir d’un bouton, sur l’événement « OnClick », je fais appel à une fonction JS.

<b>onClick="collapse_extendCPVille ('AjaxVilleCP', '3', 'cp', 'C')</b>

La fonction suivante se trouve dans une bibliothèque JS
/*
cette fonction permet de rechercher les codes postaux et villes en Ajax sur plusieurs niveaux (catégories)
entrée :
agentName : nom de l'agent Notes pour obtenir l'information
id : l'identifiant de départ de la ligne
view : le nom de la vue pour la recherche
categorie : clé de recherche
*/
function collapse_extendCPVille (agentName, id, view, categorie){

//on recherche la ligne de départ pour insérer de nouvelles cellules dans le tableau
var tblRow = $('cell' + id + '.1').parentNode;
//est-ce que cette ligne a déjà été chargée?
if ($(id).loaded != "1"){
//on utilise la bibliothèque prototype-1.6.0.3.js pour requêter en Ajax
//chargement du detail

new Ajax.Request ("../" + agentName + "?OpenAgent&" + view + "&" + categorie, {
method: 'get',
onLoading: function () {lightbox.prototype.displayWaitBox ('block');},
onSuccess: function(transport) {
lightbox.prototype.displayWaitBox ('none');
var newLevel = transport.responseJSON;
//on vérifie si on est sur le second ou troisième niveau

if (categorie.split ("^").length < 2) {
//on est sur le niveau 2
addLevel2CPVille (newLevel, tblRow, agentName, id, view, categorie);
}
else {
//on est sur le niveau 3
addLevel3CPVille (newLevel, tblRow, id, categorie);
}
}
});

$(id).loaded = 1;
$('b' + id).src = '../btnMinus.gif';
}
else{
showHideElements (id);
}
}


Ce qui est important à retenir c’est la partie concernant <b>Ajax</b>. Plusieurs options peuvent être rattachés à la classe Ajax

<b>new Ajax.Request (URL, {options});</b>

Cette méthode initialise et procède à une requête Ajax. Dans l’exemple plus haut, les paramètres sont fournis à même l’URL : "../" + agentName + "?OpenAgent&" + view + "&" + categorie

<i>Les options utilisées sont les suivantes :</i>
<b>method</b> : get : indique au serveur qu’on veut recevoir uniquement des données ;
<b>onLoading: function () {}</b> : indique à Ajax les instructions à compléter avant l’envoi de la requête au serveur; utile pour faire afficher une fenêtre d’attente à l’utilisateur ;
<b>onSuccess: function(transport) {}</b> : indique à Ajax les instructions à exécuter lorsque la requête a réussis. Le paramètre <b>Transport</b> est un objet de la méthode Ajax.Response. C’est lui qui contient le résultat provenant de la requête.


<b>Exemple avec « post »</b>

Je vais reprendre le même exemple que celui en haut, mais cette fois-ci ce sera en <b>post</b>.

/*
cette fonction permet de rechercher les codes postaux et villes en Ajax sur plusieurs niveaux (catégories)
entrée :
agentName : nom de l'agent Notes pour obtenir l'information
id : l'identifiant de départ de la ligne
view : le nom de la vue pour la recherche
categorie : clé de recherche
*/
function collapse_extendCPVille (agentName, id, view, categorie){

//on recherche la ligne de départ pour insérer de nouvelles cellules dans le tableau
var tblRow = $('cell' + id + '.1').parentNode;
//est-ce que cette ligne a déjà été chargée?
if ($(id).loaded != "1"){
//on utilise la bibliothèque prototype-1.6.0.3.js pour requêter en Ajax
//chargement du detail

new Ajax.Request ("../" + agentName + "?OpenAgent", {
method: 'post',
postBody: view + "&" + categorie,
onLoading: function () {lightbox.prototype.displayWaitBox ('block');},
onSuccess: function(transport) {
lightbox.prototype.displayWaitBox ('none');
var newLevel = transport.responseJSON;
//on vérifie si on est sur le second ou troisième niveau

if (categorie.split ("^").length < 2) {
//on est sur le niveau 2
addLevel2CPVille (newLevel, tblRow, agentName, id, view, categorie);
}
else {
//on est sur le niveau 3
addLevel3CPVille (newLevel, tblRow, id, categorie);
}
}
});

$(id).loaded = 1;
$('b' + id).src = '../btnMinus.gif';
}
else{
showHideElements (id);
}
}

<i>Les options utilisées sont les suivantes :</i>
<b>method</b> : post : indique au serveur qu’on envoi et qu’on recoit des données ;
<b>postBody</b> : c’est par cette option qu’on passe les paramètres au serveur. Les paramètres envoyés ici sont identiques à ceux envoyés dans l’URL de l’exemple précédent. A noter que le champ qui récupère ces valeurs sur le serveur Notes est <b>REQUEST_CONTENT</b>
<b>onLoading: function () {}</b> : idem à l’exemple précédent ;
<b>onSuccess: function(transport) {}</b> : idem à l’exemple précédent ;

[stloje]

J'ai apporté un correctif au message précédent concernant le POST. J'avais oublier d'insérer la commande "?OpenAgent" pour que le serveur Notes exécute l'agent.

[Michael DELIQUE]

c'est bien la que le bas blesse, tu passe par un agent qui lui reconnait la vairable CGI Request_content

moi ce que je veux faire c'et d'appeller directement un form qui lui ne connais pas la variable cgi Request_content

mais bon je vais faire des teste et voir ça

[stloje]

L'exemple que j'ai donné se fait avec un agent, mais tu peux passer n'importe quelle commande dans l'url, en autant que ça retourne de l'information, un fichier HTML, une image, etc.

[amahi]

pour envoyer un form au serveur, il suffit juste que les champs correspondent a celui du Form domino. Par contre tous les champs doivent etre present au niveau du form sinon erreur 500.
Il suffit donc que dans la balise form d'avoir un truc de ce genre:

method="post" action="/xxxx/documents.nsf/mFichesuivie?OpenForm&amp;Seq=1"

[Michael DELIQUE]

re je veux pas envoyer un form au server je veux utiliser un form comme un agent pour faire un evaluate.

ça marche bien, mais je dois passer les parametre dans l'url, j'aimerais le faire en post et non en get mais le souci c'est que le form ne connais pas la variable cgi request_content qui permet de récupéré les valeur envoyé en post via de l'ajax (alors qu'un agent connais cette variable)