Modifier / supprimer avec AJAX

**flodereims** · 27/04/2018, 09h14

Bonjour, j'ai un petit soucis avec mon formulaire AJAX.

Pour ce qui est de la partie MODIFIER, aucun soucis, quand je clique sur modifier, une fenetre modal s'ouvre et m'affiche le message du commentaire, je peux ensuite le changer, et en appuyant sur modifier, il ne recharge donc pas la page mais modifie le commentaire sur ma page et dans la BDD.

Pour le bouton SUPPRIMER, j'ai repris à peu près le même code en modifiant un peu, mais j'ai du faire une erreur quelque part, car quand je supprime le message, je suis obligé de recharger la page pour qu'il se retire de ma page.... je n'ai pas ce problème là avec le bouton modifier... sauriez vous me dire pourquoi ?

Merci d'avance.

Voici mon code:

HTML / AJAX:

Code html :

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<?php
session_start();
require 'db/database.php';
include 'commentaire-traitement.php';
?>
 
 
<div id="page">
 <div class="wrapper">
 
 
<?php include 'partials/header.php'; ?>
 
 
<h1 class="text-logo">Poster un commentaire</h1>
 
 
<!-- FORMULAIRE D'ENVOI DES COMMENTAIRES -->
 
<form class="contact-form row">
    <div class="form-field col x-50">
       <input id="name" class="input-text js-input" type="text" readonly="readonly" value="<?php if(isset($_SESSION['admin'])) { echo  $_SESSION['name']; } ?><?php if(isset($_SESSION['membre'])) { echo $_SESSION['name']; } ?>">
    </div>
    <div class="form-field col x-50">
       <input id="email" class="input-text js-input" type="text" readonly="readonly" value="<?php if(isset($_SESSION['admin'])) { echo  $_SESSION['email']; } ?><?php if(isset($_SESSION['membre'])) { echo $_SESSION['email']; } ?>">
    </div>
    <div class="form-field col x-100">
       <input id="message" class="input-text js-input" type="text">
       <label class="label" for="message">Message</label>
    </div>
    <div class="form-field col x-100">
       <div id="2" class="submit-btn" type="submit">Envoyer</div>
    </div>
</form>
<br><br>
 
 
<?php
 
  // ON RECUPERE LES COMMENTAIRES //
      $liste = $db->query('SELECT * FROM user');
      $user = $liste->fetchAll();
      foreach ($user as $user_liste) { 
      ?>
 
  <!-- ON AFFICHE LES COMMENTAIRES -->
        <div id="<?php echo $user_liste->comment_id; ?>" class="container-commentaire">
          <span data-target="comment_nom"><?php echo $user_liste->comment_nom; ?></span>
          <span data-target="comment_email"><?php echo $user_liste->comment_email; ?></span>
          <span data-target="comment_message"><?php echo $user_liste->comment_message; ?></span>
          <span><a data-role="update" data-comment_id="<?php echo $user_liste->comment_id ;?>">Modifier</a></span> - <span><a data-role="supprimer" data-comment_id="<?php echo $user_liste->comment_id ;?>">Supprimer</a></span>
        </div>
 
<?php } ?>
 
 
 
    <!-- MODAL BOUTON MODIFIER -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modification du commentaire</h4>
          </div>
          <div class="modal-body">
              <div class="form-group">
                <label>Message</label>
                <input type="text" id="comment_message" class="form-control">
              </div>
                <input type="hidden" id="userId" class="form-control">
          </div>
          <div class="modal-footer">
            <a id="save" class="btn btn-default pull-right">Modifier</a> 
            <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Fermer</button>
          </div>
        </div>
      </div>
    </div>
 
 
        <!-- MODAL BOUTON SUPPRIMER -->
    <div id="modalSupprimer" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Suppression du commentaire</h4>
          </div>
          <div class="modal-body">
              <div class="form-group">
                <label>Etes vous sûr de vouloir supprimer ce commentaire ?</label>
              </div>
                <input type="hidden" id="userIdsuppr" class="form-control">
          </div>
          <div class="modal-footer">
            <a id="supprimer" class="btn btn-default pull-right">Supprimer</a> 
            <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Fermer</button>
          </div>
        </div>
      </div>
    </div>
 
 
</div> <!-- FIN DIV WRAPPER GENERAL -->
</div> <!-- FIN ID #PAGE GENERAL -->
 
 
<!-- SCRIPT BOUTON MODIFIER -->
<script>
  $(document).ready(function(){
 
    //  append values in input fields
      $(document).on('click','a[data-role=update]',function(){
            var comment_id  = $(this).data('comment_id');
            var comment_message  = $('#'+comment_id).children('span[data-target=comment_message]').text();
 
            $('#comment_message').val(comment_message);
            $('#userId').val(comment_id);
            $('#myModal').modal('toggle');
      });
 
      // now create event to get data from fields and update in database 
 
       $('#save').click(function(){
          var comment_id  = $('#userId').val(); 
          var comment_message =   $('#comment_message').val();
 
          $.ajax({
              url      : 'commentaire-traitement.php',
              method   : 'post', 
              data     : {comment_message : comment_message , comment_id: comment_id},
              success  : function(response){
                            // now update user record in table 
 
                             $('#'+comment_id).children('span[data-target=comment_message]').text(comment_message);
                             $('#myModal').modal('toggle'); 
 
                         }
          });
       });
  });
</script>
 
 
<!-- SCRIPT BOUTON SUPPRIMER -->
<script>
  $(document).ready(function(){
 
    //  append values in input fields
      $(document).on('click','a[data-role=supprimer]',function(){
            var comment_id  = $(this).data('comment_id');
 
            $('#userIdsuppr').val(comment_id);
            $('#modalSupprimer').modal('toggle');
      });
 
      // now create event to get data from fields and update in database 
 
       $('#supprimer').click(function(){
          var comment_id  = $('#userIdsuppr').val(); 
 
          $.ajax({
              url      : 'commentaire-traitement.php',
              method   : 'post', 
              data     : {comment_id: comment_id},
              success  : function(response){
                            // now update user record in table 
 
                             $('#modalSupprimer').modal('toggle'); 
 
                         }
          });
       });
  });
</script>

PHP:

Code php :

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
<?php
 
include 'db/database.php';
 
 
if(isset($_POST['comment_message'])){
 
	$comment_message = $_POST['comment_message'];
	$comment_id = $_POST['comment_id'];
 
	//  query to update data 
 
	$result = $db->prepare("UPDATE user SET comment_message = '$comment_message' WHERE comment_id='$comment_id'");
	$result->execute();
	if($result){
		echo 'data updated';
	}
 
}
 
 
if(isset($_POST['comment_id'])){
 
	$comment_id = $_POST['comment_id'];
 
	//  query to update data 
 
	$result = $db->prepare("DELETE FROM user WHERE comment_id='$comment_id'");
	$result->execute();
	if($result){
		echo 'data supprimer';
	}
 
}
 
?>

**flodereims** · 27/04/2018, 11h11

Oh mais je suis bête.... il faut juste que je rajoute un $('#'+comment_id).hide('slow'); dans le success... sujet résolu !

Modifier / supprimer avec AJAX

AJAX

Discussions similaires

Partager

Partager