Discussion :

[error404]

Afin de distinguer au possible le comportement du contenu de ma page HTML, je souhaiterais éviter l'utilisation des attributs "on***" sur les balises et les remplacer par les gestionnaires d'événements que l'on peut notamment utiliser grâce à Prototype.

Voici le code du formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
 
    <form id="formulaire" method="post" action="form">
        <legend>Saisir un commentaire :</legend>
        <fieldset>
            <input type="text" name="id_user" value="13"/><br/>
            <textarea id="textarea1" name="textarea1"></textarea>
            <input type="submit" value="envoyer"/>
        </fieldset>
    </form>

Côté Javascript, je souhaiterais placer l'événement suivant :
- au submit du formulaire, executer la fonction comment_add

Voici actuellement le code .js :

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
 
Event.observe('formulaire', 'submit', add_comment('formulaire','textarea1','commentaire'));
/**
 * add_comment()
 * @param form : form
 * @param comment_field : comment_field id
 * @param comment_list : comment_list id
 */
function add_comment(form,comment_field,comment_list) {
    // serialize : Create a string with each field value
    var champs = Form.serialize(form);
    Form.disable(form);
 
    // Ajax Request
    var laRequete = new Ajax.Request('comment_add.php',{method: 'post',parameters:champs,
        onSuccess: function() { alert('Requête terminée avec succès.') },
        onFailure: function() { alert('Requête échouée.') }
    });
}

comment_field me permettant à terme un focus si le champ n'est pas rempli ainsi qu'une modification de la couleur.

Bien évidemment ce que j'ai fais ne fonctionne pas (au niveau de event.observe) ^^ Merci de m'éclairer

[Bovino]

Code :

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

1
2
3
4
Event.observe(window,'load',chargement);
function chargement(){
Event.observe('formulaire', 'submit', add_comment('formulaire','textarea1','commentaire'));
}

[error404]

Bon, j'ai un peu revu mon code, mais il subsiste quelques problèmes dont je n'arrive pas à mettre de solutions. Tout d'abord, mon gestionnaire d'événement n'attend pas le submit du formulaire. Dès le chargement de la page, il exécute la fonction bindForm.

D'autre part, je n'arrive pas à récupérer la réponse générée par la requête pour ensuite en faire une insertion au sein de la page dans ma div "commentaire".

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
 
function bindForm(){
    Event.observe($('formulaire'), 'submit', add_comment('formulaire','textarea1','commentaire'));
}
 
function add_comment(form,comment_field,comment_list){
 
    var data = Form.serialize(form);
 
    alert(data);
    Form.disable(form);
 
    new Ajax.Request('comment_add.php',{method:'post',parameters:data,
	onSuccess:function(transport)
	{
            insertion:Insertion.Bottom(comment_list,transport.responseText);
            Form.disable(form);
        },
        onFailure:function(){
            alert('Un problème est survenu lors du traitement de l\'information.');
            Form.disable(form);
        }
    });
}
 
Event.observe(window, 'load', bindForm);

Et voici le code tel quel dans le fichier comment_add.php :

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
 
<?php
$login = "toto";
$pass = "caca";
$serveur = "localhost";
$database_cnx = "mabase";
$cnx = mysql_pconnect($serveur, $login, $pass) or die (mysql_error());
 
mysql_select_db($database_cnx, $cnx);
 
$sql = "INSERT INTO aj_comment
    (
        id_user,
        contenu_comment
    )VALUES(
        '".$_POST['id_user']."',
        '".$_POST['textarea1']."'
    )";
 
$Result1 = mysql_query($sql, $cnx) or die(mysql_error());
?>

A l'aide

[Bovino]

Code :

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

insertion:Insertion.Bottom(comment_list,transport.responseText);

Attention :

As of Prototype 1.6, the complete Insertion class has been deprecated in favor of Element#insert.

ensuite, comment_add.php ne renvoie rien... tu as essayé un test sur responseText (alert(transport.responseText)) ?

[error404]

Formidable Bovino.
Rah oui forcement ! Ca évolue à une vitesse...

Pour le fichier .php, j'ai donc rajouté un echo de ma réponse :

Code :

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

echo "ajoute par".$_POST['id_user']."<p>".$_POST['textarea1']."</p>";

Maintenant il y a juste le gestionnaire d'événéments qui ne fonctionne toujours pas convenablement.
Au chargement de la page, paf, il exécute ma fonction d'ajout de commentaire. Et le comble, il y a un refresh de la page quand je click sur submit. Je vais retourner le bouquin d'Ajax.

[Bovino]

Pour éviter le rechargement :

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
function bindForm(){
    Event.observe($('formulaire'), 'submit', add_comment(event,'formulaire','textarea1','commentaire'));
}
 
function add_comment(event,form,comment_field,comment_list){
    Event.stop(event);
    var data = Form.serialize(form);
    
    alert(data);
    Form.disable(form);
    
    new Ajax.Request('comment_add.php',{method:'post',parameters:data,
	onSuccess:function(transport)
	{
            insertion:Insertion.Bottom(comment_list,transport.responseText);
            Form.disable(form);
        },
        onFailure:function(){
            alert('Un problème est survenu lors du traitement de l\'information.');
            Form.disable(form);
        }
    });
}
 
Event.observe(window, 'load', bindForm);

Pour le lancement au chargement, je ne vois pas d'emblée la raison, je regarde d'un peu plus près...

[error404]

Pour le rechargement rien à faire "event is not defined"... Pourtant j'avais réussis auparavant à faire une execution sans refresh...

[Bovino]

Code :

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

1
2
3
function bindForm(){
    Event.observe($('formulaire'), 'submit', add_comment('formulaire','textarea1','commentaire'));
}

Devrait le faire, il me semble effectivement que l'argument event est envoyé d'office à la fonction cible...

[error404]

Pour plus de clarté je me permets de reposter les scripts. A l'heure actuelle après avoir tenté en vain les solutions de Bovino, ça ne fonctionne toujours pas.

Fichier JS :

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
function bindForm(){
    Event.observe($('formulaire'), 'submit', add_comment('formulaire','textarea1','commentaire'));
}
 
function add_comment(form,comment_field,comment_list){
    var data = Form.serialize(form);
    Form.disable(form);
 
    new Ajax.Request('comment_add.php',{method:'post',parameters:data,
	onSuccess:function(transport)
	{
            alert(transport.responseText);
            Element.insert($(comment_list), {bottom: transport.responseText});
            Form.enable(form);
        },
        onFailure:function(){
            alert('Un problème est survenu lors du traitement de l\'information.');
            Form.enable(form);
        }
    });
}
 
Event.observe(window, 'load', bindForm);

Fichier PHP :

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
$login = "toto";
$pass = "caca";
$serveur = "localhost";
$database_cnx = "mabase";
$cnx = mysql_pconnect($serveur, $login, $pass) or die (mysql_error());
 
mysql_select_db($database_cnx, $cnx);
 
 
$sql = "INSERT INTO aj_comment
    (
        id_user,
        contenu_comment
    )VALUES(
        '".$_POST['id_user']."',
        '".$_POST['textarea1']."'
    )";
 
$Result1 = mysql_query($sql, $cnx) or die(mysql_error());   
echo "ajoute par".$_POST['id_user']."<p>".$_POST['textarea1']."</p>";

Formulaire HTML :

Code :

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

1
2
3
4
5
6
7
8
    <form id="formulaire" method="post" action="#">
        <legend>Saisir un commentaire :</legend>
        <fieldset>
            <input type="text" id="id_user" name="id_user" value="1"/><br/>
            <textarea id="textarea1" name="textarea1">bonjour</textarea>
            <input type="submit" value="envoyer"/>
        </fieldset>
    </form>

[error404]

Bon j'ai vraiment l'impression que c'est cette histoire d'event qui bloque le script :

Code :

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

1
2
3
4
5
6
7
8
9
10
function bindForm(){
    Event.observe('formulaire', 'submit',aSubmit);
}
 
function aSubmit(e){
    Event.stop(e);
    alert('submit');
}
 
Event.observe(window, 'load', bindForm);

Ce script fonctionne sans refresh. Suis-je condamné à respecter les mêmes noms de champs et le même nom de formulaire ? N'est-il pas possible d'avoir une fonction dans laquelle on peut passer ses paramètres.

Merci de m'éclairer.

[Bovino]

Essaye de faire comme ça :

Code :

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

1
2
3
function bindForm(){
    Event.observe($('bouton'), 'click', add_comment('formulaire','textarea1','commentaire'));
}

et

Code :

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

1
2
3
4
5
6
7
8
<form id="formulaire" method="post" action="#">
        <legend>Saisir un commentaire :</legend>
        <fieldset>
            <input type="text" id="id_user" name="id_user" value="1"/><br/>
            <textarea id="textarea1" name="textarea1">bonjour</textarea>
            <input type="button" id="bouton" value="envoyer"/>
        </fieldset>
    </form>

[error404]

En fin de compte, j'ai pu le gérer sans faire passer de paramètres dans la fonction add_comment présente dans bindForm(). Je verrais par la suite si c'est adéquate comme solution.

En attendant merci du coup de main Bovino.