Question-réponse: jquery-ajax-php

**mOscar007** · 14/06/2016, 11h34

Bonjour à tous,

Je reviens vers vous pour un problème d'envoi de question-réponse. En effet j'ai un formulaire ou je pose ma question et j'enregistre directement dans la BD. Ensuite j'affiche ma question avec le formulaire pour répondre. Un utilisateur peut poser plusieurs questions s'il le souhaite mais j'aimerais que chaque question soit indépendante. Chaque réponse est liée à la question concernée par une clé étranger question_id.

J'arrive pour le moment à poser une question et répondre. Mon problème est une fois que je pose plusieurs je ne pourrai pas répondre sur le reste. Mes questions sont affichées par ordre décroissant (de la plus récente à la plus ancienne). Sur sur la plus récente il n'y a pas de soucis je répond sans problème. Mais sur le reste il ne se passe rien. Dans ma console je n'ai pas d'erreur. J'ai fait requête Ajax pour afficher mes réponses sans recharger la page. J'aimerais avoir le choix quand je veux répondre à une autre question qui n'est la dernière postée de pouvoir le faire sans problème. Pour le moment je suis bloqué sur ça. Toute aide est la bienvenue.
Merci par avance !

Je vous mets ci-dessous mon code :

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
 
// Affichage question-réponse et formulaire réponse:
 
// connexion à la BD sql server
require_once('db.php');
 
$user_id = isset($_SESSION['user_id']) ? urldecode($_SESSION['user_id']) : null;<br>// Affiche les questions et sa réponse<br>$q = array('user_id'=>$user_id);
 
$sql = 'SELECT * FROM question WHERE user_id = :user_id ORDER BY question_date DESC';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($db->errorInfo()));
 
while ($row= $req->fetch(PDO::FETCH_ASSOC)):
         <div class="question">
                <p><?=isset($row['question_titre'])?$row['question_titre']:' ';?></p>
                <p><?=isset($row['question_description'])?$row['question_description']:' ';?></p>
                <p><em>Par <?=isset($row['user_name'])?$row['user_name']:'';?>, le
                    <?=isset($data['question_date'])?$data['question_date']:'';?></em></p>
         </div>
 
         <div class="form">
            $q1 = array('question_id'=>$question_id');
            $sql1 = 'SELECT * FROM reponse WHERE question_id = :question_id ORDER BY reponse_date DESC';
            $req1 = $db->prepare($sql1);
            $req1->execute($q1) or die(print_r($db->errorInfo()));
 
            while ($data = $req1->fetch(PDO::FETCH_ASSOC)):
              <div class="reponse">
                 <p><?=isset($data ['reponse_message'])?$data ['reponse_message']:'';?></p>
                 <p>Par <?=isset($_SESSION ['user_name'])?$_SESSION['user_name']:'';?>, le
                    <?=isset($data['reponse_date'])?date('d/m/Y H:i:s', strtotime($data['reponse_date'])):'';?></p>
              </div>
            endwhile;
 
               <div id="status"></div>
 
               <form method="post" action="actionReponse.php" class="myform">
                      <textarea name="message" id="message"></textarea>
 
                      <input type="submit" name="valider" value="Envoyer">
 
                      <input type="hidden" name="question_id" id="question_id" value="<?=isset($row['question_id'])?$row['question_id']:'';?>">
                      <input type="hidden" name="user_name" id="user_name" value="<?=isset($_SESSION['user_name'])?$_SESSION['user_name']:'';?>">
                      <input type="hidden" name="date" id="date" value="<?=date('d/m/Y H:i:s')">
               </form>
        </div>
endwhile;

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
 
// Partie jquery-ajax :
 
$(document).ready(function() {
    $('.myform').on('submit', function(e) {
        e.preventDefault();
 
        var $this = $(this);
 
        var message = $('#message').val();
        var question_id = $('#question_id').val();
        var user_name = $('#user_name').val();
        var date = $('#date').val();
 
        if (message === '' || question_id === '') {
             $('#status').html('<p class="error">Champ invalide</p>');
        } else {
            $.ajax({
                url: 'ActionReponse.php',
                type: 'POST',
                data: $this.serialize(),
                ContentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                beforeSend: function() {
                    $this.after('<span id="load4"><img src="inc/img/loader.gif" alt="loading"> Chargement...</span>');
                },
                success: function(data){
                    $('#load4').remove();
 
                    $('.form').prepend('<div class="reponse"><p>'+message+'</p><p>Par '+user_name+', le '+date+'</p></div>').hide().slideDown();
                }
            });
        }
    });
});

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
 
// PHP : actionReponse.php
 
 $question_id = isset($_REQUEST['question_id']) ? $_REQUEST['question_id'] : null;
 $date = isset($_REQUEST['date ']) ? $_REQUEST['date '] : null;
 $message = isset($_REQUEST['message']) ? nl2br(htmlspecialchars($_REQUEST['message'])) : null;
 
// connexion à la BD
require_once('db.php');
 
$q2 = array('message'=>$message, 'date'=>$date, 'question_id'=>$question_id);
$sql2 = "INSERT INTO reponse (reponse_message, reponse_date, question_id) VALUES (:message, :date, :question_id)";
$req2 = $db->prepare($sql2);
$req2->execute($q2) or die(print_r($db->errorInfo()));
$data = $req2;

Invité · 17/06/2016, 11h02

Bonjour,

1/ rien qu'à la coloration syntaxique, on voit qu'il y a une erreur icic :

Code php :

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

            $q1 = array('question_id'=>$question_id');

2/ Pour le reste (pas de réponse des autres membres), il faudrait revoir ta question :

être plus clair,
mettre des commentaires dans le code,... afin d'en faciliter la lecture
...

3/

Code :

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

                      <input type="hidden" name="question_id" id="question_id" value="<?=isset($row['question_id'])?$row['question_id']:'';?>">

Un id doit être UNIQUE.
Or, ici, tu es dans une boucle.

Le name doit aussi être unique (ou sous forme d'array) :

Une solution :

Code :

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

                      <input type="hidden" name="question_id[]" id="question_id_<?=$row['question_id'];?>" value="<?=isset($row['question_id'])?$row['question_id']:'';?>">

Une autre :

Code :

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

                      <input type="hidden" name="question_id[]" class="question" data-id="<?=$row['question_id'];?>" value="<?=isset($row['question_id'])?$row['question_id']:'';?>">

Ou :

Code :

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

                      <input type="hidden" name="question_id[<?=$row['question_id'];?>]" class="question"  value="<?=isset($row['question_id'])?$row['question_id']:'';?>">

Après, il faut modifier le code jQuery en conséquence.

Il sera sans doute utile d'utiliser .each() :

Code javascript :

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

1
2
3
$('.question').each( function() {
   ...
}

**mOscar007** · 17/06/2016, 12h12

Bonjour @jreaux62,

Merci d'avoir pris le temps de me répondre.
Le problème de la coloration syntaxique est du sur le fait que je ne savais pas comment mettre du code php et html en même sur ce forum et comment isole mon code html ou php. Si je dois imbriquer du html dans php, la balise [code] n'est pas fait pour ça je suppose. Sur mon éditeur le code est bien séparé. Bon bref ...

Pour la partie code merci encore de cet éclaircissement. Je n'ai pas pensé le faire de cette manière. Est-ce que dans la partie jquery je peux faire ceci avec .each() ? Et pour chaque input de type hidden je peux faire pareil ?

Code :

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

1
2
3
4
 
$('.question').each( function() {
      var question_id= $this.find("input[name='question_id']").val();
}

Invité · 17/06/2016, 14h01

1/ La coloration n'a aucun problème.
C'es TA ligne de code qui en a :

Code :

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

            $q1 = array('question_id'=>$question_id');

un ' en trop !

2/ Pour ta question... J'ai donné 3 solutions, qui se traitent différemment.

il faut nous remontrer ton code (les parties modifées)

**mOscar007** · 17/06/2016, 14h41

Re,

J'ai modifié les inputs du formulaire de réponse par rapport au précédent et le code jquery :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// HTML
<form method="post" action="actionReponse.php" class="myform">
        <textarea name="message[]" id="message_<?=isset($_POST['message'])?$_POST['message']:'';?>"></textarea>
 
         <input type="submit" value="Envoyer">
 
         <input type="hidden" name="question_id[]" id="question_id_<?=$row['question_id'];?>"
                 value="<?=isset($row['question_id'])?$row['question_id']:'';?>">
         <input type="hidden" name="user_name[]" id="user_name_<?=$_SESSION['user_name'];?>"
                 value="<?=isset($_SESSION['user_name'])?$_SESSION['user_name']:'';?>">
         <input type="hidden" name="date[]" id="date_<?=date('d/m/Y H:i:s');?>" value="<?=date('d/m/Y H:i:s');?>">
</form>

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
 
//  jQuery
$(document).ready(function() {
    $('.myform').on('submit', function(e) {
        e.preventDefault();
 
        var $this = $(this);
 
        $('#message ').each(function() {
            var message  = $this.find("input[name='message']").val();
        });
         $('#question').each(function() {
            var question_id = $this.find("input[name='question_id']").val();
        });
        $('#user_name').each(function() {
            var user_name= $this.find("input[name='user_name']").val();
        });
        $('#date').each(function() {
            var date = $this.find("input[name='date']").val();
        });
 
        if (message.indexOf === '' || question_id.indexOf === '' || user_name.indexOf === '' || date.indexOf === '') {
             $('#status').html('<p class="error">Champ invalide</p>');
        } else {
            $.ajax({
                url: 'ActionReponse.php',
                type: 'POST',
                data: $this.serialize(),
                ContentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                beforeSend: function() {
                    $this.after('<span id="load4"><img src="inc/img/loader.gif" alt="loading"> Chargement...</span>');
                },
                success: function(data){
                    $('#load4').remove();
 
                    $('.form').prepend('<div class="reponse"><p>'+message+'</p><p>Par '+user_name+', le '+date+'</p></div>').hide().slideDown();
                }
            });
        }
    });
});

Invité · 17/06/2016, 15h50

1/ Tu n'as pas compris.

Code :

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

$('#question').each(...

Un id est UNIQUE : on ne peut pas lui appliquer each(...) !

ALors qu'une class peut être multiple :

Code :

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

$('.question').each(...

2/ As-tu regardé le code HTML généré (sans PHP) ?

**mOscar007** · 17/06/2016, 17h03

J'ai choisi la solution suivante :

Code :

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

<input type="hidden" name="question_id[<?=$row['question_id'];?>]" class="question"  value="<?=isset($row['question_id'])?$row['question_id']:'';?>">

Donc modification de mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
// HTML
<form method="post" action="actionReponse.php" class="myform">
        <textarea name="message" class="message" value="<?=isset($_POST['message'])?$_POST['message']:'';?>"></textarea>
 
         <input type="submit" value="Envoyer">
 
         <input type="hidden" name="question_id[<?=$row['question_id'];?>]" class="question" value="<?=isset($row['question_id'])?$row['question_id']:'';?>">
         <input type="hidden" name="user_name[<?=$_SESSION['user_name'];?>]" class="user_name" value="<?=isset($_SESSION['user_name'])?$_SESSION['user_name']:'';?>">
         <input type="hidden" name="date[<?=date('d/m/Y H:i:s');?>]" class="date" value="<?=date('d/m/Y H:i:s');?>">
</form>

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
 
//  jQuery
$(document).ready(function() {
    $('.myform').on('submit', function(e) {
        e.preventDefault();
 
        var $this = $(this);
 
        $('.message ').each(function() {
            var message  = $('.message').val();
        });
         $('.question').each(function() {
            var question_id = $('.question').val();
        });
        $('.user_name').each(function() {
            var user_name= $('.user_name').val();
        });
        $('.date').each(function() {
            var date = $('.date').val();
        });
 
        if (message === '' || question_id === '' || user_name === '' || date === '') {
             $('#status').html('<p class="error">Champ invalide</p>');
        } else {
            $.ajax({
                url: 'ActionReponse.php',
                type: 'POST',
                data: $this.serialize(),
                ContentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                beforeSend: function() {
                    $this.after('<span id="load4"><img src="inc/img/loader.gif" alt="loading"> Chargement...</span>');
                },
                success: function(data){
                    $('#load4').remove();
 
                    $('.form').prepend('<div class="reponse"><p>'+message+'</p><p>Par '+user_name+', le '+date+'</p></div>').hide().slideDown();
                }
            });
        }
    });
});

J'ai l'erreur suivante qui s'affiche : ReferenceError: message is not defined à la ligne :

Code :

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

if (message === '' || question_id === '' || user_name === '' || date === '') {...

Je ne comprend pas comment récupérer mes attributs name.

Invité · 17/06/2016, 18h19

1/

Envoyé par jreaux62

2/ As-tu regardé le code HTML généré (sans PHP) ?

"Ctrl" + "U"
ou clic droit "afficher la source"

Le code PHP n'a pas (peu) d'intérêt.

2/ Ce n'est pas le name, mais le value que tu as besoin de récupérer.

**mOscar007** · 17/06/2016, 21h34

J'aimerais surtout savoir ma manière de procéder est bonne. Car d'après l'erreur affichée mes variables ne sont pas définies. Donc c'est peut être l'utilisation de .each() qui n'est pas bonne.

**mOscar007** · 20/06/2016, 09h33

Bonjour @jreaux62,

Le code HTML m'affiche ceci (j'ai copié juste la partie formulaire) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
// HTML
<form method="post" action="actionReponse.php" class="myform">
        <textarea name="message[]" class="message" value=""></textarea>
 
         <input type="submit" value="Envoyer">
 
         <input type="hidden" name="question_id[Marc]" class="question" value="Marc">
         <input type="hidden" name="user_name[4]" class="user_name" value="4">
         <input type="hidden" name="date[20/06/2016 09:21:01]" class="date" value="20/06/2016 09:21:01">
</form>

Je ne récupère toujours pas mon message.
Je ne sais pas comment récupérer mes inputs.

Cdlt,

Question-réponse: jquery-ajax-php

jQuery

Discussions similaires

Partager

Partager