Ajax sur tableau

Version imprimable

Ajax sur tableau

Bonjour,

J'ai une messagerie interne au site que je développe.

Lorsque je veux supprimer plusieurs messages, je coche les checkbox et valide.
Je fais un appel Ajax pour ne pas avoir à recharger la page + afficher un message + faire disparaître les messages concernés.
Le problème, c'est que le message de suppressions des messages n’apparaît qu'au 1er clic. ensuite je n'ai plus de messages jusqu'au moment ou je recharge manuellement la page.
Et mon second problème vient du fait que si je coche plusieurs checkbox, en BDD elles seront bien supprimées, mais l'effet fadeOut ne se fait que sur une seule ligne.

Voici mon code

le tableau de données

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
echo '<div class="error"></div><table class="mess">';
        echo '<thead><tr><th></th><th></th><th></th><th></th><th></th><th><small>'.$total_mess1.'</small></th></tr></thead><tbody>';
 
    echo '<div id="id_form_suppression">';
        echo '<FORM method="POST" action="#">';
 
    while($user=$req->fetch(PDO::FETCH_OBJ)) {
        if (($user->lu)==1) {
            echo '<tr id="ligne_'.$user->id.'"><td><input type="checkbox" id="choix" name="choix[]" value="'.$user->id.'"></td> <td><img src='.$urlImg.'mess_lu.png>';
        }
        else {
            echo '<tr id="ligne_'.$user->id.'"><td><input type="checkbox" id="choix" name="choix[]" value="'.$user->id.'"></td> <td><img src='.$urlImg.'mess_non_lu.png>';
        }
        if (($user->piece_jointe) <> ''){echo '<img src='.$urlImg.'piece_jointe.png></td>';}else{echo '</td>';}
 
            echo '<td>le '.dateFr($user->date_mess).'</td>';
            echo '<td>à '.nl2br(htmlspecialchars(ucfirst($user->prenom))). ' '.nl2br(htmlspecialchars(ucfirst($user->nom))).'</td>';
            echo '<td colspan="2"><a href="indv_env.php?id='.$user->id.'&session='.$user->session.'&lu='.$user->lu.'&token='.$user->token.'">';
            echo  nl2br(htmlspecialchars($user->titre_mess));
            echo '</a></td></tr>';
    }
            echo '</tbody></table><br>
                    <div class="mess_footer"><label><input onclick="CocheTout(this, \'choix[]\');" type="checkbox"><small>Tout sélectionner</small></label><br><br><input id="submit" type="submit" name="submit" value="Submit" onclick="ValidSuppression()" /></div></FORM></div>';

le JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function ValidSuppression() {
    $(document).ready(function() {
        $("#id_form_suppression").on('submit', 'form', function() {
 
            id = $('#choix:checked').val();
 
            $.ajax({
                url: "suppr_test.php",
                type: "post",
                data: $('#choix:checked').serialize(),
                //data: id,
                success: function(data) {
                    $(".error").append(data).fadeOut(2000);
                    $("#ligne_"+id).fadeOut();
                }
            });
        return false;
        });
    });
}

Requete SQL

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if(isset($_POST['choix']) AND !empty($_POST['choix'])){// suppression du/des message(s)
        $count = count($_POST['choix']);
            foreach($_POST['choix'] as $id) {
                $suppr_env = "1";
                $res = Cnx::connectCnx()->prepare('UPDATE  messagerie m SET suppr_env='.$suppr_env.' WHERE m.id='.$id.'');
                $res->bindValue(':id', $id);
                $res->bindParam(':suppr_env', $suppr_env);
                $res->execute();
            }
            echo '<div class="apres_valid_mess">'. $count .' message(s) supprimé(s)</div>';
}
else {
    echo '<div class="new_mess_erreur"> Aucun message n\'a été selectionné</div>';
}

Quelqu'un a une idée svp?

17/11/2014, 09h55
freddou17

slt,

Code:

id="choix"

l'id doit être unique dans la page

++
17/11/2014, 19h38
jimmo

Ca y est, c'est modifié
Mais ça ne change rien à mon problème

J'ai remplacé

Code:

1
2
3
4
5
6
7
8
success: function(data) {
 $(".error").append(data).fadeOut(2000);
 $("#ligne_"+id).fadeOut();
}
// par
success: function(data) {
  alert(data);
                }

et l'alerte est lancée a chaque fois.

D'ou peut venir le problème?

17/11/2014, 22h39
danielhagnoul

data: $('#choix:checked').serialize() !!! :weird:
17/11/2014, 23h15
jimmo

Heuuu, que veux tu dire?
18/11/2014, 03h43
danielhagnoul

Cette méthode ne s'utilise pas de cette manière.

Que donne un console.log( $('#choix:checked').serialize() ); ?
18/11/2014, 09h19
freddou17
Slt,
Code:

1 2 3 4 success: function(data) { $(".error").append(data).fadeOut(2000); $("#ligne_"+id).fadeOut(); }
Es tu sur que la variable id est connu car ça ressemble comme même à une erreur js

++
18/11/2014, 11h42
jimmo

Il me renvoi
choix%5B%5D=785&choix%5B%5D=784
c'est pas ce qu'l doit faire?

Salut freddou17, la variable est reconnue.
Mais j'ai trouvé une autre manière de faire en fait

Code:

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
 
// j'ai remplacé #choix par .select_case_suppr
function ValidSuppression() { 
	$(document).ready(function() {
		$("#id_form_suppression").on('submit', 'form', function() {
			console.log( $(".select_case_suppr:checked").serialize() );
			$("input[class='select_case_suppr']:checked").each(function(i) { //efface la/les lignes concernées
				var select_case_suppr = this.value;
				$(this).closest('tr').fadeOut();
			});
			$.ajax({ 
				url: "suppr_mess.php",
				type: "post",
				dataType : 'html',
				data: $('.select_case_suppr:checked').serialize(),
				success: function(data) {
					$(".error").empty().append(data).delay(3000).hide(200, function(){ $(this).html('').toggle()});					
				},
				error : function(resultat, statut, erreur){
					$(".error").html("Une erreur s'est produite. Veuillez recommencez ou prendre contact avec votre responsable.");
				}
			});
		return false;
		});
	});
}

Voila ou j'en suis.
Les appels ajax fonctionnent à volonté, et toutes les lignes sélectionnées sont supprimées.
Je sais pas si c'est la meilleure façon de faire, mais ça fonctionne,
je suis preneur de tout autres conseils :)

18/11/2014, 15h53
danielhagnoul

Citation:

Envoyé par jimmo

Il me renvoi
choix%5B%5D=785&choix%5B%5D=784
c'est pas ce qu'l doit faire?

Ha ! :-o

Si choix[]=785 et choix[]=784 sont les valeurs attendues, c'est OK.

Ce sont effectivement les valeurs attendues, donc je pense que ça doit être bon :)

Par contre un autre soucis du même style.

Code:

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 ValidEnvoiMess() { //Affiche un message de réussite ou d'erreur lors de l'envoi d'un message
    $(document).ready(function() {
        $("#mess_new").on('submit', 'form', function() {
            $("#loader").show();
            var formData = new FormData($(this)[0]);
            $.ajax({
                url: 'new_mess_enr.php',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(data){
                    $("#loader").hide();
                    $(".error").empty().append(data).delay(3000).hide(200, function(){ $(this).html('').toggle()});
                    if(data == "ok"){
                    document.getElementById('id_destinataire').value = '0';
                    document.getElementById('titre_mess').value = '';
                    document.getElementById('message').value = '';
                    }
                }
            });
            return false;
        });
    });
};

Code:

1
2
3
4
$resultat = Cnx::connectCnx()->prepare('INSERT INTO messagerie ..............);
$resultat->execute();
 
echo"ok";

si php me retourne "ok", je voudrai vider les champs.
Et je ne vois pas du tout ou je me trompe.

18/11/2014, 16h14
Bovino

Ce genre de chose est souvent dû à la présence de caractères non affichables.

Code:

if($.trim(data) == "ok"){
18/11/2014, 16h45
jimmo

Super c'est exactement ça.
Ca fonctionne à merveille.
Grand merci à tous