11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai un souci au niveau de mon code pour la suppression d'une ligne sélectionnée.
En effet, j'aimerais quand je sélectionne une ligne dans mon tableau via une case à cocher d'arriver à la supprimer.
J'aimerais aussi sélectionner plusieurs lignes et les supprimer en même temps. La suppression côté client marche mais côté serveur elle ne fonctionne pas. Je vous remercie par avance.

Code ci-dessous :


<div>
	<a type="button" class="delete">Supprimer</a>
</div>
<div id="msg"></div>
<table>
	<form method="post" action="delete.php">	
	   <thead>
	      <tr>
	         <th><input type="checkbox" id="head"></th>
	         <th>Name</th>
	         <th>Delete</th>
	      </tr>
	   </thead>
	   <tbody>
	      <?php
	         // connexion à la Bd
	         require_once("db.php");
	         // requête 
	         $sql = "SELECT * FROM cat ORDER BY cat_id DESC";
	         $req = $db->prepare($sql);
	         $req->execute() or die(print_r($req->errorInfo()));
	         $rows = $req->fetchAll();
	         foreach($rows as $row) {
	      ?>
	      <tr data-row-id="<?=$row["cat_id"];?>">
	         <td><input type="checkbox" class="check" data-id="<?=$row["cat_id"];?>"></td>
	         <td><?=$row["cat_name"];?></td>
	         <td><a class="remove" data-id="<?=$row["cat_id"];?>" href="javascript: void(0)"><img src="supprimer.jpg" alt="supprimer"></a></td>
	      </tr>
	      <input type="hidden" name="cat_delete" value="<?=$row["cat_id"];?>">
	      <?php
	         }
	      ?> 
	   </tbody>
	</form>
</table>


             // js
	         $(document).ready(function(){
	               $('#head').on('click', function(e) {
	                   if($(this).is(':checked', true)) {
	                       $(".check").prop('checked', true);  
	                   } else {  
	                       $(".check").prop('checked', false);  
	                   }  
	               });
	               $('.delete').on('click', function(e) {
	                  e.preventDefault();
	                  var $this = $(this); 
	                  var cat_delete = $this.find('[name="cat_delete"]').val();
	                  var all = []; 
	                    $(".check:checked").each(function() {  
	                        all.push($(this).attr('data-id'));
	                    });  
	                    if(all.length <=0) {  
	                        alert("Veuillez sélectionner une ligne !");  
	                    } else {  
	                        var DELETE = "Voulez-vous vraiment supprimer cette ligne ?";  
	                        var check = confirm(DELETE); 
	                        if(check == true){ 
	                            $.ajax({   
	                                type: "POST",  
	                                url: "delete.php",  
	                                cache:false,  
	                                data: $this.serialize(), 
	                                beforeSend: function() {
	                                   $this.after('<img src="loader.gif" alt="loading" id="loading">');
	                               }, 
	                                success: function(response) {
	                                 console.log(response);   
 
	                                    $("#loading").hide();  
	                                    $("#msg").html(response);
	                                }   
	                            });
	                           $.each(all, function(index, value) {
	                              $('table tr').filter("[data-row-id='" + value + "']").remove();
	                           });
	                        }  
	                    }  
	                });
	                $('.remove').on('click', function(e) {
	                    var DELETE = "Voulez-vous vraiment supprimer cette ligne ?";  
	                     var check = confirm(DELETE);  
	                     if(check == true){
	                         $('table tr').filter("[data-row-id='" + $(this).attr('data-id') + "']").remove();
	                     }
	                });
	            });


// fichier delete.php
require_once("db.php");
$cat_delete = $_POST['cat_delete'];
if (isset($cat_delete)){
	// requête 
        $q = array('cat_delete'=>$cat_delete);
	$sql = "DELETE FROM cat WHERE cat_id =  :cat_delete";
	$req = $db->prepare($sql);
	$req->execute($q) or die(print_r($req->errorInfo()));
}

Modifié par dinolam (29 Mar 2017 - 11:25)
Bonjour @Zelena,

Merci d'avoir pris le temps de me répondre.
Mais tu ne réponds pas à mon post.
Mon problème ne vient pas de ce que tu viens d'évoquer et je n'ai pas d'erreur non plus.
C'est juste quand je supprime ça marche côté client et non côté serveur.

Cdlt,
Je ne suis pas d'accord avec vous : la solution de votre problème se trouve dans le lien que je vous ai envoyé.

Mais je ne vais pas polémiquer, libre à vous de croire le contraire.

Smiley smile
J'ai corrigé dans le premier code que j'ai posté mais ça ne change pas grand chose dans mon code.


// fichier delete.php
require_once("db.php");
$cat_delete = $_POST['cat_delete'];
if (isset($cat_delete)){
	// requête 
        $q = array('cat_delete'=>$cat_delete);
	$sql = "DELETE FROM cat WHERE cat_id =  :cat_delete";
	$req = $db->prepare($sql);
	$req->execute($q) or die(print_r($req->errorInfo()));
} else {
        echo 'Erreur !';
}

J'ai le message Erreur ! qui s'affiche en essayant de supprimer une ligne mais quand je fais un
print_r($_POST);
ça ne me renvoie rien.

Cdlt,
Modifié par dinolam (29 Mar 2017 - 12:32)
Modérateur
Le premier problème est que form est un enfant de table,

comme c'est invalide il doit se refermer tout de suite probablement et être vide.

Il faut entourer table par form et non le contraire.

Le second est dans les valeurs transmises, actuellement un champ hidden qui a toujours le même nom, donc ton script effacera toujours la dernière valeur.

Ce sont les valeurs de tes checkboxes que tu dois récupérer, et comme tu obtiendras un tableau, effectuer une requête avec IN
Bonjour @kustolovic,

Merci pour ta contribution.
Je ne comprends le second problème.
Peux-tu m'expliquer avec un exemple stp?
Merci !

Cdlt,